节点类型主要有三种：元素节点、属性节点和文本节点。


DOM的主要目的是改变和删除元素节点和属性节点。

元结

检查

在添加和删除DOM之前，应该先找到相应的元素：


（包括） / /得到单节点
getElementsByTagName（列表） / /得到节点数组
getelementsbyname（列表） / /得到节点数组


它还可以利用元素节点的属性获取其父节点和子节点和文本节点。

子节点






node.childnodes / /获得子节点列表中的节点列表；注意换行符被视为在浏览器的文本节点，如果以这种方式访问的节点列表，需要过滤
node.firstchild / /返回第一个子节点
node.lastchild / /返回最后一个子节点


父节点




node.parentnode / /返回父节点
node.ownerdocument / /返回祖先节点（文件）


兄弟节点




node.previoussibling / /返回到前一个节点，如果没有则返回null
node.nextsibling / /后返回一个节点


增加

新节点首先创建节点，然后将新节点插入到DOM中，因此引入以下方法来创建节点和插入节点，并在创建节点时引入复制节点的方法。

创建一个节点




（createElement） / /按照指定的标签名称来创建一个新的元素节点


创建代码段（为了避免频繁刷新DOM，您可以首先创建代码段，完成所有节点操作并添加到DOM）




createdocumentfragment（）


复制节点




clonednode = node.clonenode（布尔） / /只有一个参数，为一个布尔值，真说一份所有节点的子节点；虚假表示节点的复制


插入节点




插入节点
parentnode.appendchild（子结点）； / /新节点的节点列表
parentnode.insertbefore（节点，targetnode）； / /前节点将插入targetnode

插入HTML代码
Node.insertAdjacentHTML（'beforebegin，HTML）； / /插入代码中的元素之前
Node.insertAdjacentHTML（'afterbegin，HTML）； / /插入代码之前的第一个子元素
Node.insertAdjacentHTML（'beforeend，HTML）； / /插入代码元素的最后一个孩子后
Node.insertAdjacentHTML（'afterend，HTML）； / /插入代码在以下元素


替换节点




parentnode.replace（节点，targetnode）； / /替换targetnode与节点


删除

删除节点




parentnode.removechild（子结点）； / /删除目标节点
node.parentnode.removechild（节点）； / /未知的父节点的情况下


属性节点

操作属性节点是添加或删除DOM样式。内联样式、内联样式和外部样式有不同的操作方法；不同方法获得的样式也有可读的和只读的点。

直接获取CSS样式




node.style.color / /读/写


风格本身的性质和方法




node.style.csstext /得到节点的内联样式的字符串
对node.style.length / /数检索风格线
node.style.item（0） / /到指定位置的风格


获取和修改元素样式

HTML5提供了一个新的元素属性：列表执行加法和元素的样式删除。操作如下：


Node.classList.add（值）； / /添加指定的类的元素
node.classlist.contains（价值）； / /判断元素包含指定的类，如果返回true
node.classlist.remove（价值）； / /删除指定的类
Node.classList.toggle（值）； / /没有删除，添加指定的类


一种修改DOM特性的方法




node.getattribute（'id'） / /得到
node.setattribute（'id'） / /套
（节点。removeattribute） / /删除
node.attributes / /获得DOM的所有功能


只读方法

getcomputedstyle是窗口的方法。它可以获得当前元素的所有最终的CSS属性值，但它是read-only.it有两个参数，第一个输入节点，第二可以通过：悬停，模糊，等得到伪类，如果没有，它是进入空。

然而，IE不支持getcomputedstyle方法和currentstyle可以用来保持兼容性：


window.getcomputedstyle window.getcomputedstyle（节点、空）：node.currentstyle


上述Javaｓｃｒｉｐｔ DOM节点操作方法总结分享的全部内容，小编的，希望能给大家一个参考，我希望你能支持它。