This is the 10th day of my participation in Gwen Challenge

Introduction to DOM Objects

What is DOM?

DOM(Document Object Model) is a set of universal standards for regulating Document contents.

DOM is an important way for JS to manipulate HTML documents. DOM can be used to complete the HTML document within all elements of the access, access, label attributes and style Settings and other operations.

DOM HTML node tree

DOM HTML refers to the attributes and methods provided in DOM for manipulating HTML documents, where documents represent HTML files, the labels in the documents are called elements, and all contents in the documents are called nodes (as can be seen, nodes include elements). An HTML file can be thought of as a tree of nodes composed of all elements, with a hierarchy of nodes.

Nodes can be divided into: tag node (that is, element), text node, attribute node, comment node. The relationship between nodes is as follows: 1. Root node: The < HTML > tag is the root node of the entire document, and there is only one. 2. Child node: refers to the lower level node of a node. For example, the <head> node under < HTML >. 3. Parent node: refers to the upper-layer node of a node. 4. Sibling node: Two nodes belong to the same level. For example, the <head> and <body> nodesCopy the code

Common node types

ELEMENT_NODE element node ATTRIBUTE_NODE attribute node TEXT_NODE text node COMMENT_NODE comment node DOCUMENT_NODE document node to give an example of how to use it, as follows:  <div id = "test"></div> <script> var test = document.getElementById('test'); console.log(test.nodeType === Node.ELEMENT_NODE); // The result is ture console.log(document.nodeType === node.document_node); </script>Copy the code

HTML element manipulation

Gets the element of the operation

Methods using doucument objects
1. The document. The getElementById () returns the Id of the first object with the reference 2. Document. GetElemensByName () returns a collection of objects with a specified name 3. Document. The getElementsByTagName () returns with objects in the specified tag name 4. Document. GetElementsClassName () returns the class name with a collection of objects (does not support 6 ~ 8) to see concrete example < div id = "box">box</div> <div class = "bar">bar</div> <div name = "main">main</div> <script> // gets a reference to the first object with the specified ID console.log(document.getElementById('box')); / / get all the objects in the specified name. The console log (document. The getElementsByName (' main ')); / / get all the objects in the specified tag name for the console, log (document. GetElementsByTagName (' div ')); / / get all the objects in the specified class name for the console, log (document. GetElementsByClassName (' bar ')); </script>Copy the code

You can see that the document.getelementById () method returns an object, while the other three methods return a collection of objects that can be retrieved by subscripting. (The subscript defaults to 0).

var box = document.getElementById('box');
        var divs = document.getElementsByTagName('div');
        console.log(box === divs[0]);
Copy the code

You can see that the result is true, which also validates document.getelementById ().