js acquired DOM node in several ways

First, the element type is operated by a method:

1. document.getElementById();//id名，
2. document.getElementsByTagName (); // tag name
3. document.getElementsByClassName();//类名
4. document.getElementsByName (); // name attribute values, generally do not
5. document.querySelector (); // css selector mode, returns the first matching element of the pattern, as a result element; if not found matching elements, or null
6. document.querySelectorAll () // css selector mode, returns all elements that match the model, the result is a class array

note:

• Prefix document, meaning that the call these methods document node may of course be invoked in the other element node

  Second, the tree is selected according to the relationship (tree node traversal):

  [ Briefly explain nodes:

  DOM (Document Object Model) any HTML, XML documents can be portrayed as a multi-level tree nodes. All pages with the performance of a particular node is the root node of the tree structure. html document for the document root node.

  All nodes have nodeType property, representative of different types of nodes, the nodes can be determined by the type nodeType property. Node frequently used mainly in the following types:

• Element Type (element node): nodeType value 1
• Text Type (text node): nodeType value 3
• Comment Type (Note Node): nodeType value 8

• Returns true if all nodes have hasChildNodes () method for determining the presence or absence of child nodes have one or more children ]

  You can traverse the node tree by a number of attributes:

• parentNode // get the selected node's parent, the topmost node is #document
• childNodes // get the selected node's children who 
• firstChild // Get the first child node of the selected node
• lastChild // Gets the last child of the selected node
• // property acquired after nextSibling nextSibling a sibling of the selected node of the last node list is null
• // Get previousSibling previous sibling node list for the selected node of the first node is null attribute previousSibling

 

Third, the element node tree to traverse based on (traversing element node tree):

1. parentElement // Returns the current element of the parent element node (not compatible with IE9 less)
2. children // Returns the current element element child
3. firstElementChild // returns the first element child (not compatible with IE9 less)
4. lastElementChild // returns the last element child nodes (not compatible with IE9 less)
5. nextElementSibling // returns after a sibling node (not compatible with IE9 less)
6. previousElementSibling // returns the previous sibling node (not compatible with IE9 less)