Node common attributes and methods

1. The node type property

(1) console.log () to optimize the behavior of the browser, as the label is printed on the console

(2) console.dir () printed in the form of objects on the console

var box = document.getElementById('box')
    console.log(box)
    console.dir(box)

(3) return element .nodeType node type is a node label

(4) Returns the name of the node element .nodeName, uppercase tag names

Value .nodeValue node label (5) This returns the null

 var box = document.getElementById('box')
    console.log(box)
    console.dir(box.nodeType)  //1
    console.dir(box.nodeValue)  //null
    console.dir(box.nodeName)   //DIV

2. The operation node hierarchy attributes

All nodes in the (1) returns a pseudo-element array .childNodes element stores all the child nodes

console.dir(box.childNodes)  //NodeList(7)

(2) all sub-elements (node ​​labels) in a pseudo-element array element returns .children stores all subelements

console.dir(box.children)  //HTMLCollection(3)

(3) returns the parent element .parentNode (parent element) 

console.log(box.parentNode)

(4) Returns the next sibling element .nextElementSibling element

console.log (box.nextElementSibling)

(5) elements .previousElementSibling return to the previous sibling

console.log(box.previousElementSibling)

3. The method of operation of a node

(1) .appendChild parent node (child node) add a child node, shearing effect

box.appendChild(p)

(2) a parent node .insertBefore (child nodes to be added, with reference to the child node) shearing effect

box.insertBefore(p,span)

(3) the parent node .removeChild (child node) node is removed

 box.removeChild(info)

(4) a parent node .replaceChild (alternate child node, the child node to be replaced) with a shearing effect

box.replaceChild(p,span)

(5) the parent node .cloneNode (true / false) clone node does not pass, the equivalent of a false pass cloned node itself 

 console.log( box.cloneNode())

 4. Create a dynamic element

(1) element .innerHTML = html-form character string can be used to create an identification tag element, and renders the page

 box.innerHTML=' <span>span内容</span>'

(2) document.createElement ( 'html-form character string') designed to create the element, returns a new element, but the element is not in the tree dom

 var box = document.getElementById('box')
   var p= document.createElement('p')
    box.appendChild(p)v

(3) document.write ( 'html string of the form') is directly written in the script does not overwrite the original content, on the event function will overwrite the original content

document.write ( ' <h1 of> ha </ h1 of> ' )

   var box = document.getElementById('box')
    var bt = document.getElementById('bt')
 bt.onclick=function(){
  document.write('<h1>哈哈哈</h1>')
 }