Summary of JavaScript native node operation

Native is the foundation of Javascript, or need to pay more attention to, long time have forgotten, now tidy up 1.

Get child nodes

children is not a standard dom attribute, but is supported by almost all browsers. Does not contain text nodes.

Note: In IE, children contains comment nodes.

childNodes is a standard attribute. Returns all child nodes. Include text nodes.

Get the first child node

1.firstChild

document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild

Get the last 1 child node

1.lastChild

document.getElementById('b_pole').childNodes[0].childNodes[0].lastChild

Determine whether there are child nodes

1.hasChildNodes()

document.getElementById('b_pole').childNodes[0].childNodes[0].hasChildNodes()

Determine node type and node name

1.nodeType

1: Elements

2: Attributes

3: Text

2.nodeName

document.getElementById('b_pole').childNodes[0].childNodes[0].nodeType //1
document.getElementById('b_pole').childNodes[0].childNodes[0].nodeName //UL

Create an DOM structure

1. Create Element Node createElement

2. Create the text node createTextNode

document.createElement('div')
document.createTextNode('ok')

Insert node

1.insertBefore

2.appendChild

document.getElementById('b_pole').insertBefore(document.createTextNode('div'),document.getElementById('b_pole').firstChild)

document.getElementById('b_tween').childNodes[0].nextSibling.previousSibling.appendChild(document.createTextNode('ZQZQZQZQZ'))

Remove Node

1.removeChild

document.getElementById('b_pole').removeChild(document.getElementById('b_pole').childNodes[0])

And returns the deleted node dom

Gets the next 1 node (sibling) of the element

1.nextSibling

document.getElementById('b_pole').nextSibling

Gets the last node (sibling) of an element

1.previousSibling

document.getElementById('b_pole').previousSibling