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

而DOM最主要的是对元素节点和属性节点的添加、删除、修改和检查。下面是对元素节点和属性节点的操作。

元素节点

支票

在添加、删除和修改DOM之前，我们必须首先找到相应的元素。具体搜索方法如下：

GetElementByID() //获取单个节点getElementsByName() //获取节点数组NodeList getElementsByName() //获取节点数组NodeList。您还可以通过使用元素节点的属性来获取它的父子节点和文本节点：

子节点

从Node.childNodes //获取NodeList节点列表；请注意，换行符在浏览器中被视为文本节点。如果以这种方式获取节点列表，则需要过滤Node.firstChild //返回第一个子节点Node.lastChild //返回最后一个子节点的父节点

父节点//返回父节点。ownerDocument //返回祖先节点(整个文档)的同级节点

Node.previousSibling //返回上一个节点，如果不是，则返回nullNode.nextSibling //返回下一个节点增量

要添加节点，必须先创建一个节点，然后将新创建的节点插入到DOM中。因此，下面介绍创建和插入节点的方法，在创建节点时也介绍复制节点的方法。

创建节点

CreateElement() //根据指定的标签名新建一个元素节点，创建一个代码片段(为了避免频繁刷新DOM，可以先创建一个代码片段，完成所有节点操作后统一添加到DOM中)

CreateDocumentFragment()复制节点

Clonednode=节点。clonenode(布尔值)//只有一个参数，并且传入了一个布尔值。true表示复制该节点下的所有子节点；True表示仅复制节点并将其插入到节点中

/*插入节点*/parent node . append child(child node)；//将新节点追加到子节点列表parentnode的末尾。insertbefore (newnode，target node)；//在targetNode之前插入newNode插入html代码*/node . insertadjacenthtml(' begin '之前，html)；//插入代码节点。在此元素之前插入adjacenthtml(' begin '之后，html );//插入代码节点。在此元素的第一个子元素之前插入adjacenthtml ('before end '，html );//插入代码节点。在此元素的最后一个子元素后插入adjacenthtml ('after end '，html );//在此元素后插入代码替换节点

parentNode.replace(newNode，TargetNode)；//用要删除的新节点替换目标节点

移除节点

parentNode.removeChild(子节点)；//移除目标节点node.parentnode.removechild(节点)；//使用属性节点而不知道父节点

操作属性节点意味着添加、删除和修改DOM样式。内联式、内联式和外联式有不同的操作方法。通过各种方法获得的样式也是可读、可写和只读的。

直接获取CSS样式

节点。Style.color //样式本身的可读和可写属性和方法

获取node . style . cstext//获取行中的style string node . style . length//获取行中的style node . style . item(0)//获取指定位置的样式，获取并修改元素样式

HTML5为元素提供了一个新的属性：classList来添加、删除和修改元素的样式表。操作如下：

node . class list . add(value)；//将指定的类节点. classList.contains(值)添加到元素中；//判断元素是否包含指定的类，如果包含，则返回true node . class list . remove(value)；//删除指定的类节点. class list . toggle(value)；//如果有则删除，但是没有通过添加指定的类来修改DOM特性的方法

获取Node.getAttribute('id') //获取Node.setAttribute('id') //设置Node.removeAttribute() //移除Node.attributes //获取所有DOM属性的只读方法

GetComputedStyle是一种窗口的方法。它可以获取当前元素的所有CSS属性值，但它是只读的。它有两个参数，第一个是传入节点，第二个可以传入：hover、blur等。获取它的伪类样式，如果没有，则传入null。

但是IE不支持getComputedStyle方法，currentStyle可以用来保持兼容性：

window.getComputedStyle？Window.getcomputedstyle (node，null) :node.currentstyle以上对JavaScript DOM节点操作方法的总结是边肖分享的全部内容。希望能给大家一个参考，支持我们。