The operating environment of this article: Windows 7 system, javascript version 1.8.5, DELL G3 computer
The nodes in JavaScript are all in the page The content (label, attribute, text (text, newline, space, carriage return)), Node.
Our commonly used node labels:
Element node (label)
Text node
Attribute node (attribute in label)
Get
element of the node There are many ways to get nodes
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByTagName()
Document.querySelector()
Document.querySelectorAll()
Getting attribute nodes
Element.attributes Gets the set of all attributes on the element
Element.setAttribute("Attribute name", "Attribute value") Set attributes and attribute values to elements
Element.getAttribute("Attribute name") Method to get attribute values
Element.removerAttribute("attribute") deletes the attribute
Text node
There is no way to get it, no meaning
Get the child of the element Node
Element.childNodes This attribute is compatible. Standard browsers will obtain text nodes, but lower version browsers will not. Therefore, it is recommended to use the children attribute to obtain a single child node.
Get the first child node:
标准下 元素.firstElementChild 非标准下 元素.firstChild
Compatible writing method
var list=document.getElementById("list")
var fist=listElementChild||list.fistChild
console.log(fist)Get the last child node
Element.lastElementChild Element.lastChild
Getting a sibling node
Element.previousSibling Element.prevElementSibling
Getting the next sibling node
Element.nextSibling Element.nextElementSibling
Get the parent node
Element.parentNode has no compatibility
Element.parentNode.parentNode
Distinguish between offsetparent and parentNode
DOM2 Create node
1. Method to generate node document. createElement ("div")
2. Method of inserting nodes
Parent node.appendChild(new node)
Insert a new node after the child node of the parent node
3. Insert a new node at the specified position
(1) Parent element.insetBefore (new node, in front of whom) Insert the new node in front of the specified element
4. Delete element node parent element.removerChild()
[Recommended learning: js basic tutorial】