JavaScript DOM-元素节点操作

节点操作

创建

var font = document.createElement('font');      // 创建元素节点
document.body.appendChild(font);          // 把元素节点追加到DOM树上

添加

parentNode.appendChild( node )

parentNode.append( node )

在父节点中追加 node 子对象, 后者为新方法

parentNode.insertBefore(node, child);

parentNode.prepend( node )

在父节点中插入 node 子对象, 放在 child 前面. 后者为新方法

node.before(newNode)

把 newNode 对象插入到 node 对象之前 平级关系

node.after(newNode)

把 newNode 对象插入到 node对象之后 平级关系

克隆

node.cloneNode([true])

var xxx1 = document.querySelector('div.c1');
var xxx2 = xxx1.cloneNode(true);   // true 表示连同子元素也复制
document.body.appendChild(xxx2);

删除

parentNode.removeChild(node)

删除父节点中的 node 节点对象

node.remove()

删除节点自己

遍历

for (var x = node.firstChild; x != null; x = x.nextSibling) {
 	/*提取文本*/
    x.innerHTML
}

// 遍历.从数组中拿出每一个元素节点 赋值给v
for(let v of ul.children) {
	console.log(v.innerHTML)
}

替换

parentNode.replaceChild(new, old)

关联查找

node.children 获取所有 子元素节点

node.nextElementSibling
返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null；

node.previousElementSibling
返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null；

node.parentElement
返回当前节点的父级Element节点；

node.childNodes
返回一个NodeList集合，成员包括当前节点的所有子节点(空格回车也算)。

node.firstChild

返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

node.lastChild

返回该节点的最后一个子节点，如果该节点没有子节点则返回null。