webAPI-节点操作

1.节点层级

2.创建与添加节点

3.删除节点

4.三种创建元素方式

1.节点层级

节点：元素节点(1)、属性节点(2)、文本节点(3)

节点值：node.nodeValue
节点名：node.nodeName
节点类型：node.nodeType

父级节点

node.parentNode

const box = document.querySelector('.box')
console.log(box.parentNode)

返回某节点的最近一个父节点，若没有则返回null。

子节点

第一种：

node.childNodes(标准) 

const ul = document.querySelector('ul')
console.log(ul.childNodes)

返回所有的节点，包含元素节点、文本节点、属性节点的集合，如果只想获取里面的元素节点,则

const ul = document.querySelector('ul')
for (let i = 0; i < ul.childNodeNodes.length; i++) {
	if (ul.childNodes[i].nodeType === 1) {
		console.log(ul.childNodes[i])
	}
}

第二种

node.children

获取所有的子元素节点集合

兄弟节点

下个兄弟节点：

node.nextSibling

可以是元素节点、属性节点、文本节点

上个兄弟节点：

node.previousSibling

2.创建与添加节点

document.createElement('') // 创建节点
node.appendChild(chile)  node父级 child子级
node.insertBefore(child, 指定元素)

3.删除节点

node.removeChild(child)

4.三种创建元素方式

document.wirte()
innerHTML
document.createElement()

document.write()

const btn = document.querySelector('button')
btn.onclick = function () {
	document.write('<div>123</div>')
}

缺点：如果页面文档流加载完毕，再调用这个就会导致页面重绘，像上面这个代码点击了按钮后会重绘，重新生成只有‘123’的页面。

**innerHTML **

for (const i=0; i < 1000; i++) {
	document.body.innerHTML += '<div style="width:100px";height:2px;'
}

document.createElement(’’)

const create = document.querySelector('.create')
for (let i = 0; i <= 100; i++) {
	let a = document.createElement('a')
	create.appendChild(a)
}

在创建很多元素时，由于innerHTML的方式是拼接字符串，所以会慢一些。但是如果采用数组解惑innerHTML的方式就会速度快。

let array = []
for (let i = 0; i <= 100; i++) {
	array.push('<div style="width:100px";height:2px;')
	document.body.innerHTML = array.join('')
}