Dom basic operations

Additions and deletions to change search node

View element node
- document on behalf of the entire document <html/>is the root tag of the document
- document.getElementById()
  - The actual development to avoid using id and id selector
  - The following elements IE8 browser id is not case sensitive, but also returns the attribute name matching elements
- document.getElementsByTagName()
- document.getElementsByName()
  - The old version of the browser is only part of the label name to take effect (forms, form elements, img, ifrme)
- document.getElementsByClassName()
  - Less IE8 version does not support, with multiple class
- document.querySelector() && document.querySelectorAll()
  - CSS selectors, less than or equal IE7 versions do not support
  - Selected element is not real-time, for example as follows
```
  // html
  <div></div>
  <div></div>
  <div></div>

  // js
  var arr_1 = document.querySelectorAll('div');
  var arr_2 = document.getElementsByTagName('div');
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);
  console.log(arr_1); // NodeList(3) [div, div, div]
  console.log(arr_2); // HTMLCollection(4) [div, div, div, div]
```

Traverse the node tree

parentNode // find the current DOM element of the parent element

// html
<div>
  <p></p>
  <span></span>
  <strong></strong>
</div>

// js
var oTemp = document.getElementsByTagName('span')[0];
console.log(oTemp.parentNode);                                                // <div>...</div>
console.log(oTemp.parentNode.parentNode);                                     // <body>...</body>
console.log(oTemp.parentNode.parentNode.parentNode);                          // <html lang="en">...</html>
console.log(oTemp.parentNode.parentNode.parentNode.parentNode);               // #document 最顶端的parentNode
console.log(oTemp.parentNode.parentNode.parentNode.parentNode.parentNode);    // null

childNodes // find the current DOM element of all children nodes

NodeType type of nodes and node types

Element node (1)
Attribute node (2)
Text node (3)
Comment node (8)
document ( 9 )
DocumentFragment ( 11 )

  // html
  <div>
    <p></p>
    <span></span>
    <strong></strong>
  </div>

  // js
  var oTemp = document.getElementsByTagName('div')[0];
  console.log(oTemp.childNodes);                        // NodeList(7) [text, p, text, span, text, strong, text]
  console.log(oTemp.childNodes.length);                 // 7

firstChild // find the current DOM element of first child
lastChild // Find the last child node of the current DOM element
nextSibling // find the current DOM element after a sibling
previousSibling // Find previous sibling node of the current DOM element

Based traversing element node of the tree

children // Find the current element element child

parentElement // Find the parent element node of the current element (IE9 and what is not compatible versions)

  <div>
    <p></p>
    <span></span>
    <strong></strong>
  </div>

  // js
  var oTemp = document.getElementsByTagName('div')[0];
  console.log(oTemp.parentElement);                               // <body>...</body>
  console.log(oTemp.parentElement.parentElement);                 // <html lang="en">...</html>
  console.log(oTemp.parentElement.parentElement.parentElement);   // null

firstElementChild // find the first element node current element (IE9 and what is not compatible versions)
lastElementChild // find the last element of the current element node (IE9 and what versions are not compatible)
nextElementSibling // Find the current element after a sibling node (IE9 and what versions are not compatible)
previousElementSibling // Find the previous sibling node of the current element (IE9 and what is not compatible versions)

Four attributes of nodes

nodeName: element tag name, read-only
nodeValue: text Comment Text node or nodes, can read and write
nodeType: type of the node, read-only
attributes: a set of attribute nodes element node, each node has an attribute name and attribute value, readable name, value can be read

A method node

Node.hasChildNodes (); // returns a Boolean value

Brannua

Published 49 original articles · won praise 29 · views 1893

Private letter concerns

DOM basics (b)

Dom basic operations

Guess you like