JavaScript学习笔记：DOM的操作_JavaScript, JavaScript学习笔记, DOM, 会员专栏教程

作者：大漠日期：2018-04-27 点击：2661

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

通过上一节的学习，对JavaScript中的DOM有了一定的认识。虽然对DOM中相关的知识点有一定的概念，但还是缺乏对DOM的实际操作。如果你仔细阅读过上一篇文章的话，你应该会发现，当时也提到了一些DOM操作相关的东西，比如，DOM的增、删、改和查等。那么今天我们就来看看这些方面的东西。

DOM的增

先来看DOM操作中的增。其主要分为两个部分：新创建节点和插入节点。

新创建节点

常用的DOM节点创建有关的API接口主要有：

document.createElement：创建指定的HTML元素或一个HTMLUnknownElement
document.createTextNode：创建文本节点
document.createDocumentFrame：创建文档片段
document.createAttribute：创建节点属性
document.adoptNode：从外部文档中获取一个节点
document.importNode：拷贝外部文档的一个节点
node.cloneNode：克隆节点

`document.createElement`

document.createElement(tagName[, options])是其中最常用的DOM API之一，主要用来创建由标签名称（tagName）指定的HTML元素，如果标签名称不是一个有效的HTML元素，将会创建一个HTMLUnknownElement对象。来看一个简单的示例：

let newEle = document.createElement('div');
let newContent = document.createTextNode('我是一个新创建的div元素')
newEle.appendChild(newContent)
document.body.appendChild(newEle)

注意，通过document.createElement创建的元素并不属于document对象，它只是创建出来，并未添加到HTML文档中，需要调用appendChild()或insertBefore()等方法将其添加到HTML文档中。

如果你对HTMLUnknownElement从未接触，建议你有空花点时间阅读@张鑫旭老湿的《》和@米粽大大翻译的《Custom Elements》。

`document.createTextNode`

document.createTextNode(text)创建一个文本节点，参数text为文本节点的内容。比如：

let newContent = document.createTextNode('我是一个新创建的div元素')
newEle.appendChild(newContent)

创建了一个文本节点newContent，然后把这个新创建的文本节点通过appendChild()方法，将其插入到newEle元素中，当作其内容。document.createTextNode(text)方法返回的节点，被浏览器当作文本渲染，而不是当作HTML代码渲染，因此会对HTML代码进行转义，可以用来展示用户的输入，避免XSS攻击。

function escapeUserInput(str) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
}

var userInput = '<p>危险内容</p>';
var template = '<div>' + escapeUserInput(userInput) + '</div>'

// 此时被转义，危险内容不再危险
<div>&lt;p&gt;危险内容&lt;/p&gt;</div>

但是，该方法不对单引号和双引号转义，因此用来为属性赋值的时候，仍然会被 XSS 攻击：

var userInput = '" onmouseover="console.log(\'危险操作\')" "';
var template = '<div color="' + escapeUserInput(userInput) + '">user set color</div>'

// 被注入一个 onmouseover 操作
<div color="" onmouseover="console.log('危险操作')" "">user set color</div>

其中XSS攻击属于Web安全方面的知识了，不属于这篇文章的范畴。如果你对XSS相关的东西感兴趣的话，可以看看下面几篇文章：

`document.createDocumentFragment`

document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此，使用文档片段document fragments 通常会起到优化性能的作用。

比如下面这个示例，给一个ul添加10000个li，先用拼接字符串的方式来实现：

let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul')

document.body.appendChild(newUlEle)

for (let i = 0; i < 10000; i++) {
    str += '<li>第' + i + '个子节点</li>'
}

newUlEle.innerHTML = str

console.log('耗时' + (Date.now() - start) + 'ms');

多次刷新，可以看到创建10000个li时，渲染所需要的时间如下图：

把上面的示例，换成append()的方式，逐个添加对应的li：

let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul')

document.body.appendChild(newUlEle)

for (let i = 0; i < 10000; i++) {
    let liEle = document.createElement('li')

    liEle.textContent = '第' + i + '个子节点'
    newUlEle.appendChild(liEle)
}

console.log('耗时：' + (Date.now() - start) + 'ms')

这种方法所费时间如下图：

都说第二种方法要比第一种方法耗时，看上去有点像。接下来再来看createDocumentFragment的方法。可以预见的是，这种方法肯定比第二种强，但应该没有第一种快：

let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul')

document.body.appendChild(newUlEle)

let fragment = document.createDocumentFragment()

for (let i = 0; i < 10000; i++) {
    let liEle = document.createElement('li')

    liEle.textContent = '第' + i + '个子节点'
    fragment.appendChild(liEle)
}

newUlEle.appendChild(fragment)

console.log('耗时：' + (Date.now() - start) + 'ms')

`document.createAttribute()`

document.createAttribute(attrName)方法创建并返回一个新的属性节点。这个方法不是很常用，因为添加属性通常使用node.setAttribute()。

let node = document.getElementById('content')
let attr = document.createAttribute('title')

attr.nodeValue = 'Hello JavaScript!'

node.setAttributeNode(attr)

上面的代码会给div#content的元素添加一个title属性，而且这个title属性的值为Hello JavaScript!：

同样的，document.createAttribute()虽然创建了属性节点，如果不通过setAttributeNode()方法的话，创建的属性的节点是不会运用到对应的元素节点上的。该方法的返回值是一个Attr类型的节点。借助nodeValue给该节点赋值，然后给该属性节点设置对应的属性值。等同的效果，常常使用setAttribute()方法来替代该方法。后续我们会介绍到setAttribute()方法相关的知识。

`document.adoptNode`

document.adoptNode(externalNode) 从其他的 document 中获取一个节点（externalNode），并将该节点以及它的所有子节点从原文档删除, 并且它的 ownerDocument 属性会变成当前的 document。之后你可以把这个节点插入到当前文档中，不常用，了解即可。

// 该函数用来从本文档的第一个 iframe 中获取第一个 element 元素，
// 并插入到当前文档树中
function getEle(){
    var iframe = document.getElementsByTagName("iframe")[0],
    ele = iframe.contentWindow.document.body.firstElementChild;

    if(ele){
        document.body.appendChild(document.adoptNode(ele))
    }else{
        alert("没有更多元素了")
    }
}
document.getElementById("move").onclick = getEle

注意，该方法在同一 document 下的不同两个元素中也可以使用，可以实现从左边栏列表中选取某些元素加载到右边栏的功能。如果节点资源来自不同的源的时候，调用 adoptNode 可能会失败。

有些情况下，将外部文档的节点插入当前文档之前,你需要使用 document.importNode() 从外部文档导入源节点，了解更多细节。

`document.importNode`

document.importNode(externalNode, deep) 这个接口也不常用，作用是拷贝外部文档的一个节点（externalNode）。deep 表明是否要导入节点的后代节点，默认为 false 不导入后代节点。

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

注意，这个方法仅拷贝节点，此时，节点存在于内存中，还需要插入当前文档中才能显示。

`node.cloneNode`

node.cloneNode(deep)方法返回该节点的一个副本，deep可选，表明是否采用深度克隆，如果为true，则该节点的所有后代节点也都会被克隆，否则，只克隆该节点本身。

let node = document.getElementById('content')
let cloneNode = node.cloneNode(true)

cloneNode.id = "newId"

document.body.appendChild(cloneNode)

上面的这个小示例，克隆了div#content以及其所有后代节点，并且把新克隆的元素的id赋值为newId，然后再把新克隆出来的所有节点重新插入body中。最终的效果如下：

上面的示例，演示了，使用node.cloneNode(true)可以克隆节点的所有后代节点以及其所有属性。那么对于绑定的事件是否也能被克隆呢？还是通过示例来验证一下，看看事件是否也会被克隆。

<div id="box">
    <button id="clone" onclick="console.log('Click Clone Button')">Clone Me!</button>
</div>

<div id="new"></div>

// cloneNode
let btn = document.getElementById('clone')
let box = document.getElementById('box')
let newDiv = document.getElementById('new')

newDiv.appendChild(box.cloneNode(true))

上面的示例使用了内联方式直接把事件写在HTML标签上。从结果我们可以看到绑定在HTML标签上的事件也被克隆了。

接下来在上例的基础上做一下调整，把内联方式换成绑定在节点对象上的事件：

let btn = document.getElementById('clone')
let box = document.getElementById('box')
let newDiv = document.getElementById('new')

btn.onclick = function () {
    console.log('click clone')
}

newDiv.appendChild(box.cloneNode(true))

从结果可以看出，绑定在节点对象的事件在克隆的副本并不包含事件处理程序。接着再做一下调整，使用addEventListener()方法把事件添加在节点上：

btn.addEventListener('click', function (){
    console.log('Click clone!')
})

得到的效果其实和上图是一样的。也就是说，克隆的时候，addEventListener()绑定的事件并没有被克隆。

从上面的示例可以证明，副本节点只能绑定使用内联方式绑定的事件处理函数。简单点说，只有内联在HTML元素的事件，才会被cloneNode()克隆。

注意，这个拷贝的节点并不在文档中，需要自行添加到文档中。同时拷贝的节点有可能会导致节点的的 id 属性重复，最好修改新节点的 id，而 name 属性也可能重复，自行决定是否需要修改。

节点修改

DOM节点修改有关的API有：

node.appendChild()：插入一个新节点
node.insertBefore()：插入一个新节点
node.removeChild()：删除一个节点
node.replaceChild()：替换一个节点

其中node.appendChild和node.insertBefore属于DOM增中的新节点插入，而removeChild属于DOM中的删，replaceChild属于DOM中的改。这一节，咱们只先聊增这一部分，对于删和改，我们后面会单独介绍。

`node.appendChild`

parentNode.appendChild(child)方法将一个节点child添加到指定的父节点parentNode的子节点列表的末尾。本方法返回值为要插入的这个节点。

let pEle = document.createElement('p')

pEle.textContent = '我是新添加的p元素'

document.body.appendChild(pEle)

上面的示例创建了一个新的段落元素pEle，然后使用appendChild()将这个新创建的元素添加到body的最末尾。

使用appendChild()方法的时候有一点需要注意。如果被插入的节点已经存在文档树中，则节点会被从原先的位置移除，并插入到新的位置。当然，被移动的元素被绑定的事件也会被同步过去，比如：

<div id="old">
    <p id="move">我是一个段落元素</p>
</div>

<div id="new"></div>

<button id="btn">创建元素</button>

let pEle = document.getElementById('move')
let newEle = document.getElementById('new')
let btnEle = document.getElementById('btn')

pEle.addEventListener('click', function() {
    console.log('click me!')
})

btnEle.addEventListener('click', function () {
    pEle.textContent = '我是新添加的p元素'
    newEle.appendChild(pEle)
})

如果要保留原来的这个子节点的位置，则可以用 Node.cloneNode 方法复制出一个节点的副本，然后再插入到新位置。这个方法只能将某个子节点插入到同一个文档的其他位置，如果你想跨文档插入，需要先调用document.importNode方法。还有，如果appendChild()方法的参数是DocumentFragment节点，那么插入的是DocumentFragment的所有子节点，而不是DocumentFragment节点本身。此时，返回值是一个空的DocumentFragment节点。

`node.insertBefore`

parentNode.insertBefore(child, referenceNode)方法将一个节点child插入作为父节点parentNode的一个子节点，并且位置在参考节点referenceNode之前。

如果第二个参数referenceNode为null，则插入位置你父节点的末尾：

parentNode.insertBefore(node, null);
// 等价于
parentNode.appendChild(node);

注意，第二个参数为null时不能省略，否则会报错。

来看一个小示例：

<div id="parent">
    我是父节点
    <p id="child">我是旧的子节点</p>
</div>

<button id="btn">插入节点</button>

let parentEle = document.getElementById('parent')
let childEle = document.getElementById('child')
let btnEle = document.getElementById('btn')

btnEle.addEventListener('click', function () {
    let newEle = document.createElement('span')

    newEle.textContent = '我是新添加节点的文本内容'

    parentEle.insertBefore(newEle, childEle)
})

使用这个方法可以模拟prependChild，产生类似于appendChild()，但是将节点插入作为指定父节点的第一个子节点：

Node.prototype.prependChild = function (node) {
    return this.insertBefore(node, this.firstChild)
}

let parentEle = document.getElementById('parent')
let btnEle = document.getElementById('btn')


btnEle.addEventListener('click', function () {
    let newEle = document.createElement('p')

    newEle.textContent = '我是新添加节点的文本内容'

    parentEle.prependChild(newEle)
})

其实这个效果和前面的效果是类似的。同样的，使用这个方法还可以模拟insertAfter，将节点要插在父节点的某个子节点后面：

Node.prototype.insertAfter = function(node, referenceNode) {
    return this.insertBefore(node, referenceNode.nextSibling);
}

和 appendChild 类似，如果插入的节点是文档中已经存在的节点，则会移动该节点到指定位置，并且保留其绑定的事件。

DOM的删

DOM节点的删除主要API是node.removeChild。可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child，并返回被删除的节点。

这个方法是要在被删除的节点的父节点上调用的，而不是在被删除节点上调用的，如果参数节点不是当前节点的子节点，removeChild 方法将报错：

// 通过 parentNode 属性直接删除自身
var node = document.getElementById('deleteDiv');
if (node.parentNode) {
    node.parentNode.removeChild(node);
}

// 也可以封装以下作为一个方法直接使用:
Node.prototype.remove = function(node) {
    if (node.parentNode) {
        return node.parentNode.removeChild(node);
    }
    throw new Error('Can not delete.');
}

node.remove();

使用这个方法也可以很简单的模拟 removeAllChild ：

Node.prototype.removeAllChild = function() {
    var deleteNode = []
    while (this.firstChild) {
        deleteNode.push(this.removeChild(this.firstChild));
    }
    return deleteNode;
}

被移除的这个子节点仍然存在于内存中，只是不在当前文档的 DOM 中，仍然还可以被添加回文档中。但是如果不使用一个变量保存这个节点的引用，被删除的节点将不可达，会在某次垃圾回收被清除。

DOM的改

parentNode.replaceChild(newChild, oldChild) 方法用指定的节点newChild替换当前节点parentNode的一个子节点oldChild，并返回被替换的节点oldChild。

<div id="parent">
    <p id="child">我是旧的第一个子节点</p>
</div>

<button id="btn">替换节点</button>

let parentEle = document.getElementById('parent')
let oldEle = document.getElementById('child')
let btnEle = document.getElementById('btn')

btnEle.addEventListener('click', function () {
    let newEle = document.createElement('p')

    newEle.setAttribute('id', 'newChild')
    newEle.textContent = '我是新添加节点的文本内容'

    parentEle.replaceChild(newEle, oldEle)
})

简单的总结一下

DOM中的节点操作对应的主要API有：

appendChild()：用于向childNodes列表的末尾添加一个节点。返回新增的节点。
insertBefore()：接收两个参数:要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点。同时被方法返回。
replaceChild()：接收两个参数:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中移除。同时由要插入的节点占据其位置。
removeChild()：接收一个参数，即要移除的节点。返回被移除的节点。

这四个方法都是操作的某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点，如果在不支持子节点的节点上，调用了这些方法，将会导致错误。

DOM的查

DOM节点中的查主要包括：查找元素（类似于CSS中的选择器）和节点查找。

查找元素

先来看DOM中怎么查找到元素，也就是说选择到你想要的元素。在DOM中查找元素（选择到想要的元素）对应的API主要有：

document.getElementById(id)：匹配特定id的元素
document.getElementsByName(name)：根据给定的name 返回一个在 (X)HTML document的NodeList集合
document.getElementsByTagName(tagName)：返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection
document.getElementsByClassName(className)：返回包含了所有指定类名的子元素的类数组对象
document.querySelector(selector)：返回文档中与指定选择器或选择器组匹配的第一个Element
document.querySelectorAll(selector)：返回与指定的选择器组匹配的文档中的元素列表。返回的对象是NodeList

假设我们有一个简单的DOM文档：

<div id="box">
    <h3>Title</h3>
    <ul class="list">
        <li class="item">Item1</li>
        <li class="item">Item2</li>
        <li class="item">Item3</li>
        <li class="item">Item4</li>
        <li class="item">Item5</li>
    </ul>
    <p id="intro">Intro ...</p>
</div>

为了更好的说明前面的几个API，后续中的示例，都会采用这个DOM结构。其对应的DOM树不再绘制了。

`document.getElementById(id)`

document.getElementById(id)返回的是一个Element对象，用来匹配文档中指定的id元素。如果没有找到对应的元素，该方法会返回null。另外，document.getElementById()方法不会搜索不在文档中的元素。当创建一个元素，并且分配id后，必须要使用insertBefore或其他类似的方法把元素插入到文档之后才能使用document.getElementById()获取到。

来看一个示例：

let idEle = document.getElementById('intro')
let btnEle = document.getElementById('btn')

btnEle.addEventListener('click', function () {
    console.log(`能匹配到的：  ${idEle}`)
    console.log(idEle)

    let newEle = document.createElement('section')
    newEle.id = 'main'
    newEle.textContent = '我是新添加的元素'

    console.log(`未插入到DOM的新元素newEle: ${document.getElementById('main')}`)
    console.log(document.getElementById('main'))

    let box = document.getElementById('box')

    box.insertBefore(newEle, idEle)

    console.log(`插入到DOM的新元素newEle: ${document.getElementById('main')}`)
    console.log(document.getElementById('main'))

})

来看输出的结果：

比如上面示例，通过document.getElementById()之后，咱们获取了DOM上的节点，这个时候可以对该节点做很多事情，比如查询内容和属性，或者其他任何操作，甚至可以删除它，克隆它，或者将它移动到DOM树的其它节点上。

注意，document.getElementById(id)中的id参数是有大小写敏感的，所以document.getElementById('Intro')无法获取到元素<p id="intro">Intro ...</p>。另外还有就是，如果文档中有多个相同的id（这种情形一般不存在）时，只会返回第一个。

`document.getElementsByName(name)`

document.getElementsByName(name)将根据给定的name返回一个在document的节点列表集合。name属性只有在HTML文档中可用。该方法返回的是一个NodeList集合，这个集合包含name属性为指定值的所有元素，比如<meta>、<object>，甚至那些不支持name属性但是添加了name自定义属性的元素也包含其中。

该方法常用于取得单选按钮。同样也会返回HTMLCollection对象。HTMLCollection对象可以通过length属性访问元素长度，通过[]方括号语法访问对象中的项。方括号中既可以是数字，也可以是字符串索引值。

`document.getElementsByTagName(tagName)`

document.getElementsByTagName(tagName)将会返回一个包括所有给定标签名称tagName的元素的HTML集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的HTML集合是动态的，意味着它可以自动更新来保持和DOM树同步，而不用再次调用document.getElementsByTagName(tagName)。

let liEle = document.getElementsByTagName('li')
let btnEle = document.getElementById('btn')

btnEle.addEventListener('click', function () {
    console.log(`能匹配到的：  ${liEle}`)
    console.log(liEle.length)

    Object.keys(liEle).forEach(key => {
        console.log(key, liEle[key])
    })
})

比如上面的示例，通过getElementsByTagName('li')获取了文档中所有的<li>元素。其开始于一个具体的父元素并且从它自上而下递归地在DOM树中搜索符合标签名称参数的子元素。刚才也说了，其返回的是一个动态的HTMLCollection对象。获得这个对象之后，可以对其做一些遍历操作。比如上面使用Object.keys()遍历出li：

有关于JavaScript中对象遍历相关的操作可以阅读《如何遍历JavaScript中对象属性》和《对象属性的枚举》。

有一点需要注意，调用 getElementsByTagName() 的不是那个文件节点 document，事实上是使用这个方法 element.getElementsByTagName()。

`document.getElementsByClassName(className)`

document.getElementsByClassName(className)返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName()方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

比如，获取所有class为item的元素：

document.getElementsByClassName('item')

如果你想获取多个class的元素时，可以用空格来隔开，比如说，同时获取所有class同时包括btn和btn-lg的元素：

document.getElementsByClassName('btn btn-lg')

如果你想获取某个元素的子节点中对应class的元素时，你也可以像下面这样操作：

document.getElementById('box').getElementsByClassName('item')

`document.querySelector(selector)`

document.querySelector(selector)方法可以帮助你选择一个HTML元素。如果选择了多个HTML元素，其总是返回第一个元素。它看起来像这样：

document.querySelector('li')

使用这个方法可以通过id、class以及标签元素，甚至是元素的一些属性可以选择一个元素。

使用一个id选择元素，需要在id前使用#
使用一个class选择元素，需要在class前使用.
使用一个标签选择元素，可以直接把元素标签当作选择器

甚至为了更好的理解或者记忆，只要满足CSS的选择器，那么都可以被运用于document.querySelector(selector)中的selector选择器。

`document.querySelectorAll(selector)`

document.querySelectorAll(selector)可以帮助你选择多个元素。这个方法中的selector和document.querySelector()具有相同的语法。唯一不同的是，你可以通过用逗号,分隔来选择多个元素。

比如：

var matches = document.querySelectorAll("div.note, div.alert");

节点查找

DOM中节点共有12种类型，每种类型分别表示文档中不同的信息标记。每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。用张图来描述：

所有的节点都有这些属性，都是可以用于访问相关的node节点：

Node.childNodes: 访问一个单元素下所有的直接子节点元素，可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点（比如text节点或其他元素节点）。
Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果，仅仅是快捷方式。
Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果，仅仅是快捷方式。
Node.parentNode: 访问当前节点的父节点，父节点只能有一个，祖节点可以用Node.parentNode.parentNode的形式来访问。
Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

用张图来阐述，会更清晰：

通过这张图，理解起来就简单多了，但有个非常重要的知识点：那就是元素之间不能有空格，如果ul和li之间有空格的话，就会被认为是内容为空的text node节点，这样ul.childNodes[0]就不是第一个li元素了。相应地，<p>的下一个节点也不是<ul>，因为<p>和<ul>之间有一个空行的节点，一般遇到这种情况需要遍历所有的子节点然后判断nodeType类型。

根据上面的描述，我们可以把DOM中的节点相互之间存在着的各种关系分为：父子关系，兄弟关系等：

父关系相关的API

parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；如果不存在，则返回null
parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

子关系API

children：返回一个实时的HTMLCollection，子节点都是Element；保存的是该节点的第一层元素子节点
childNodes：返回一个实时的NodeList，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；
firstChild：返回第一个子节点，不存在返回null，与之相对应的还有一个firstElementChild；
lastChild：返回最后一个子节点，不存在返回null，与之相对应的还有一个lastElementChild；

兄弟关系型API

previousSibling：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
nextSibling：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
previousElementSibling：返回前一个元素节点，前一个节点必须是Element。
nextElementSibling：返回后一个元素节点，后一个节点必须是Element。

总结

DOM操作在JavaScript还是很重要的，简单点说，所有的交互操作都是基于DOM来操作的。而DOM中的操作，最为熟悉的就是对DOM的增、删、改、查。今天的内容也就围绕着这几个方面展开。因为涉及到的内容较多，可能会有遗漏或者说零乱。如果你觉得上面不对之处，还请路过大神指正。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/operate-dom.htmlnike air max 1 sale

上一篇: JavaScript学习笔记：初识JavaScript的DOM | 下一篇: JavaScript学习笔记：动态集合

w3cplus

JavaScript学习笔记：DOM的操作

DOM的增

新创建节点

`document.createElement`

`document.createTextNode`

`document.createDocumentFragment`

`document.createAttribute()`

`document.adoptNode`

`document.importNode`

`node.cloneNode`

节点修改

`node.appendChild`

`node.insertBefore`

DOM的删

DOM的改

简单的总结一下

DOM的查

查找元素

`document.getElementById(id)`

`document.getElementsByName(name)`

`document.getElementsByTagName(tagName)`

`document.getElementsByClassName(className)`

`document.querySelector(selector)`

`document.querySelectorAll(selector)`

节点查找

父关系相关的API

子关系API

兄弟关系型API

总结

大漠

直达目的地(^_^)

关于我们

关于站长

我的作品

w3cplus

你在这里

JavaScript学习笔记：DOM的操作

DOM的增

新创建节点

document.createElement

document.createTextNode

document.createDocumentFragment

document.createAttribute()

document.adoptNode

document.importNode

node.cloneNode

节点修改

node.appendChild

node.insertBefore

DOM的删

DOM的改

简单的总结一下

DOM的查

查找元素

document.getElementById(id)

document.getElementsByName(name)

document.getElementsByTagName(tagName)

document.getElementsByClassName(className)

document.querySelector(selector)

document.querySelectorAll(selector)

节点查找

父关系相关的API

子关系API

兄弟关系型API

总结

大漠

直达目的地(^_^)

关于我们

关于站长

我的作品

`document.createElement`

`document.createTextNode`

`document.createDocumentFragment`

`document.createAttribute()`

`document.adoptNode`

`document.importNode`

`node.cloneNode`

`node.appendChild`

`node.insertBefore`

`document.getElementById(id)`

`document.getElementsByName(name)`

`document.getElementsByTagName(tagName)`

`document.getElementsByClassName(className)`

`document.querySelector(selector)`

`document.querySelectorAll(selector)`