DOM - node operation

Node properties

The attribute name describe

parentNode Return the parent of the node

childNodes Returns the collection of child nodes ,childNodes[i], Including line breaking text nodes and comments

firstChild Returns the first child of the node , The most common use is to access the text node of the element

lastChild Returns the last child of the node ,

nextSibling Next node

previousSibling Last node

nextSibling、previousSibling  Only nodes of the same level can be selected , Cannot be transferred to parent

  Example ：

 Element attribute

The attribute name describe

firstElementChild Returns the first child of the node

lastElementChild Returns the last child of the node

nextElementSibling Next node

previousElementSibling Last node

How to be compatible with Google and ie8 And the following browser ：

In Google browser and ie9 And above , Use firstChild   、lastChild、nextSibling   、previousSibling  It contains text nodes , But while Ie8 And the following , No text nodes （ Statement let stay ie China does not support it. ）

ie8 And the following browsers do not contain text nodes ; however ie8 The comment will be selected as a node , and ie7 and ie5 Comments are not selected as element nodes

|| Next is written to ie8 And the following browsers , because ie8 I won't support it nextSibling    etc. ....

ie8 When you encounter comments, you will treat comments as elements ;

oNext = oParent.nextElementSibling || oParent.nextSibling   

oPre = oParent.previousElementSibling || oParent.previousSibling  

oFirst = oParent. firstElementChild  ||  oParent.firstChild   

oLast = oParent.lastElementChild || oParent.lastChild

 

  Node information

nodeName： The name of the node    #text（ Text nodes include line breaks and spaces ）、 Capitalized element names 、comment notes

nodeValue： Node values       “\n    ” ,"null"," I am a comment "

nodeType： Node type        3,       1,         8

Node type NodeType value

Elements element 1

Text text  3

notes comments  8

file document  9

 console.log(document.nodeType)=9;

 

Set properties

setAttribute() Method to add the specified property , And assign it a specified value , Add existing attributes and custom attribute values

attributename   The name of the added attribute

attributevalue   Added attribute value

element.setAttribute(“attributename”,“attributevalue”)

example ：document.getElementById("a").setAttribute("src","image/b.jpg");

get attribute

getAttribute() Method returns the property value of the specified property name

attributename  It's necessary . You need to get the attribute name of the attribute value

element.getAttribute(“attributename”)

Delete attribute

removeAttribute() Method to delete the specified attribute

attributename  Name of the removed attribute

element.removeAttribute(attributename)

document.getElementById("a").removeAttribute("src");