JavaScript——DOM操作节点

SouthernWind
122 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

操作节点(节点=元素+属性+文本+注释)

1.根据层次关系获取节点

使用以下节点属性，就可以实现根据层次关系获取节点。

属性名称描述
parentNode返回节点的父节点。 注意是最近的一个父节点，如果指定的节点没有父节点则返回null。
childNodes返回子节点集合。它返回所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。故不提倡使用childNodes。里面的每一个节点表示为childNodes[i]。
firstChild返回第一个子节点。同样也是包含所有的节点。找不到则返回null。 最普遍的用法是访问该元素的文本节点。
lastChild返回最后一个子节点。同样也是包含所有的节点。找不到则返回null。
previousSibling返回上一个兄弟节点。包括元素节点，文本节点等。找不到则返回null。
nextSibling返回下一个兄弟节点。包括元素节点，文本节点等。找不到则返回null。
children返回子元素节点集合。它只返回子元素节点，其余节点(比如文本节点等)不返回。
firstElementchild返回第一个子元素节点。 找不到则返回null。IE9及其以上才支持。
lastElementchild返回最后一个子元素节点。找不到则返回null。IE9及其以上才支持。
previousElementsibling返回上一个兄弟元素节点。找不到则返回null。IE9及其以上才支持。
nextElementsibling返回下一个兄弟元素节点。找不到则返回null。IE9及其以上才支持。

1.节点树中的节点彼此拥有层级关系。 父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。 父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

2.实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便， 而 firstElementChild 和 lastElementChild 又有兼容性问题(IE9以上才支持)。所以： 如果想要第一个子元素节点，可以使用parentNode .children[0] ; 如果想要最后一个子元素节点，可以使用parentNode .children[parentNode.children.length - 1] ;

2.获取节点信息

使用以下节点属性，就可以获取节点自身相关信息。

属性名称描述
nodeName节点名称（元素节点-标签名；属性节点-属性名称；文本节点-永远是#text；注释节点-）
nodeValue节点值
nodeType节点类型（元素节点-1；属性节点-2；文本节点-3；注释节点-8；文档节点-9）

3.创建/添加/删除/替换/复制节点

1.创建节点

语法：document.createElement('tagName'); 参数：tagName是创建的元素标签名称，如input、tr、td、li等。 返回值：返回新创建的节点。

var li = document.createElement('li'); //1.创建元素节点li
console.log(li);

2.添加节点

语法：node.appendChild(child); //追加，新节点将作为父节点的最后一个子节点存在。 参数：node是指定的父节点，child是要向父节点中添加的子节点。 返回值：返回添加的子节点。

语法：node.insertBefore(child, refChild); //插入，新节点将被插入到已存在的这个节点的前面。 参数：node是指定的父节点，child是要向父节点中添加的子节点，refChild是父节点中已存在的一个子节点。 返回值：返回添加的子节点。

var ul = document.querySelector('ul'); //0.获取父节点ul
var li = document.createElement('li'); //1.创建元素节点li
ul.appendChild(li); //2.将创建的元素节点li 追加到 父节点ul末尾。
var lili = document.createElement('li'); //1.创建元素节点li
ul.insertBefore(lili, ul.children[0]); //2.将创建的元素节点lili 插入到 父节点ul的第一个子元素节点的前面。
​
<body>
    <ul id="ulId">
        <li>起初的列表项</li>
    </ul>
</body>

练习： 发布评论： 现有task.xml文件，请补全函数的方法体部分。 要求首先获取到文本框中的内容， 如果为空，弹出警告框提示"您没有输入内容"， 如果不为空，新创建一个li元素，设置其内容为多行文本框中输入的内容，然后将li元素添加到ul元素中。

3.删除节点

语法：node.removeChild(refChild); //从父节点中删除一个子节点。 参数：node是指定的父节点，refChild是父节点中已存在的一个子节点。 返回值：返回删除的节点。

var ul = document.getElementById('ulId2'); //0.获取父节点ul
if (ul.children.length == 0) {
    document.getElementById('btnId2').disabled = true;
} else {
    ul.removeChild(ul.children[0]); // 1.点击按钮依次删除父节点ul下面的子节点li
}
​
<body>
    <ul id="ulId2">
        <li>刘备</li>
        <li>关羽</li>
        <li>张飞</li>
    </ul>
</body>

4.替换节点

语法：node.replaceChild(newChild, oldChild); //用newChild节点替换node下的oldChild子节点。 参数：node是指定的父节点，newChild是替换成的新节点，oldChild是父节点中要被替换掉的老节点。 返回值：返回被替换掉的老节点。

var oldNode = document.getElementById("imgId"); //1.获取要被替换掉的节点
var newNode = document.createElement("img"); //2.创建要替换成的新节点
newNode.setAttribute("src", "img/f03.jpg"); //3.为新节点设置src属性
oldNode.parentNode.replaceChild(newNode, oldNode); //4.完成新旧节点的替换
​
<body>
    <ul id="ulId3">
        <li>
            <img src="img/f02.jpg" id="imgId">
        </li>
    </ul>
</body>

5.复制节点(克隆节点)

语法：node.cloneNode(); //复制node节点。 参数：node是要复制的节点。 返回值：返回调用该方法的节点的一个副本。 须注意：括号里的参数为空或者false时，表示浅拷贝，只克隆节点本身，不克隆里面的子节点。 ​ 括号里的参数为true时，表示深度拷贝，会克隆节点本身以及里面所有的子节点。

var ul = document.getElementById('ulId4'); //0.获取父节点ul
var li = ul.children[0].cloneNode(false); //1.浅拷贝，只克隆节点本身，不克隆里面的子节点。
ul.appendChild(li); //2.将复制的元素节点li 追加到 父节点ul末尾。
var li2 = ul.children[0].cloneNode(true); //1.深度拷贝，会克隆节点本身以及里面所有的子节点。
ul.appendChild(li2); //2.将复制的元素节点li2 追加到 父节点ul末尾。
​
<body>
    <ul id="ulId4">
        <li>悟空</li>
        <li>八戒</li>
        <li>沙僧</li>
    </ul>
</body>
avatar
文章
阅读
粉丝