一、 DOM操作

1.1 节点树

document.firstChild; 属性返回指定节点的首个子节点

document.lastChild; 属性返回指定节点的最后一个子节点

document.childNodes; 属性返回指定节点的子节点集合 - 数组

document.parentNode; 属性返回指定节点的父节点

document.nextSibling; 属性返回指定节点之后紧跟的节点，在相同的树层级中

document.previousSibling; 属性返回同一树层级中指定节点的前一个节点

1.2 元素树

document.firstElementChild 属性返回指定元素的第一个子元素

document.lastElementChild 属性返回指定元素的最后一个子元素

document.children 属性返回指定元素的子元素的集合-数组

document.parentElement 属性返回指定元素的父元素

document.nextElementSibling 属性返回指定元素之后的下一个兄弟元素

document.previousElementSibling 属性返回指定元素的前一个兄弟元素

document.childElementCount 属性返回指定元素的子元素的个数

1.3 节点操作方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

父节点.appendChild(新的子节点);

insertBefore() 方法可在已有的子节点前插入一个新的子节点

父节点.insertBefore(新的子节点,已有的子节点);     // existing现有的

replaceChild() 方法可将某个子节点替换为另一个

父节点.replaceChild(新节点,要替换的节点);

removeChild() 方法指定元素的某个指定的子节点。

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
父节点.removeChild(要删除的子节点)

cloneNode() 方法创建节点的拷贝，并返回该副本。方法克隆所有属性以及它们的值。如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

var cln=itm.cloneNode(true); // 拷贝节点
document.getElementById("myList1").appendChild(cln);

1.4 创建元素与删除元素

document.createElement() // 创建元素节点

document.createTextNode() // 创建文本节点

document.appendChild(node) // 向子节点的末尾添加新的节点

document.insertBefore(newNode, existNode) // 现有的子元素之前插入一个新的子元素

document.removeChild(node) // 删除一个子元素

document.remove() // 删除目标元素

总结

以上就是今天带你走进从零认识JavaScript到精髓（十六）JavaScript的DOM操作
会持续更新中…
原创不易，期待您的点赞关注与转发评论