Introduction to DOM common attribute methods

1. Get the element node

• Called through the document object

1.getElementById()-Get an element node object through the id attribute

2.getElementsByTagName()-Get a set of element node objects by tag name

This method will return us an array-like object, and all the queried elements will be encapsulated in the object, not an array.

3.getElementsByName()-Get a set of element node objects through the name attribute

The latter two are elements, and the plural means that there can be multiple objects with the same label or name

2. Get the child nodes of the element node

• Call through a specific element node (recursively, the node must be found first, and then its methods or attributes must be called, and document cannot be used directly, so the search is global)

1.getElementsByTagName()- method , return the descendant node of the specified tag name of the current node

2. childNodes- attribute , which means all the child nodes of the current node, get all child nodes including element and text node. The white space between DOM tags will also be treated as text nodes. What is returned is an array-like list containing nodes (you can find it in the form of an array subscript)

<ul id="city">
    <li id="bj">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
</ul>

City has 9 child nodes, 5 blank nodes (blank between ul label and li label, blank between li label and li label), and four element nodes (li label)

<ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li> <li>首尔</li></ul>

Only 4 nodes (li label) are used for writing

3.firstChild- attribute , representing the first child node of the current node (including blank text node)

4.lastChild- attribute , which means the last child node of the current node

5. Children- attributes . You can get all the child elements of the current element, excluding the text node. What is returned is an array-like list containing nodes.

6.firstElementChild-attribute. Get the first child element of the current element (not including text nodes, not including ie8 and below)

3. Get the parent node and sibling node of the element

Call through specific nodes

1.parentNode-attribute, representing the parent node of the current node

2.previousSibling-attribute, which represents the previous sibling node of the current node (may get a blank text node)

3previousElementSibling-attribute, get the previous sibling node of the current node (no blank text node will be obtained, not available in IE8 and below)

4.nextSibling-attribute, indicating the next sibling node of the current node

4. Attributes of element nodes

•Get, element object. Attribute name example:

element.value (the value of the text box is the content filled in the text box)

element.id

element.className (class reserved words therefore use className)

• Setting, element object. Attribute name = new value example:

element.value = “hello”

element.id = “id01”

element.className = “newClass”

5. Other attributes

innerHTML()-Gets and sets the html code inside the tag (the text between the start and end tags), which has no meaning for self-closing tags. (Label without closing tag)

•NodeValue—The text node can get and set the content of the text node through the nodeValue property

/* innerText
*  -该属性可以获得元素内部的文本属性
*  -他和innerHTML区别，会自动将html标签去掉。
*/

The node is not necessarily an HTML element, it may also be a blank text node, the white space between the label and the label. <br>This simple newline label is also a node.