【学习笔记】DOM中的节点操作函数以及属性

来源：互联网发布：人工蜂群算法无人机编辑：程序博客网时间：2024/06/08 16:25

一、节点相关的属性
parentNode：获取元素的父节点
childNodes：获取元素的子节点其中包括文本节点等
firstChild：元素的第一个子节点
lastChild：元素的最后一个子节点
nextSibling：下一个兄弟元素
previousSibling：前一个兄弟元素
以上的一组属性中除了parentNode外，其他的属性获取的节点中都有可能会含有文本节点，如下面的nextSibling，而通常我们在使用的时候大多数是需要对元素节点进行操作，利用上面的方式获取的节点还需要利用nodeType的值来进行筛选。所以DOM提供了另外的一组属性见下面。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div class="parent">    123    <div class="child"></div></div><script>    var div = document.querySelector(".child");    console.log(div.previousSibling);</script></body></html>

二、只获取元素节点的属性
firstElementChild：获取第一个元素子节点
lastElementChild：获取最后一个元素子节点
childElementCount:获取元素子节点的个数
nextElementSibling：获取下一个兄弟元素节点
previousElementSibling：获取上一个兄弟元素节点
利用第三个和第四个方法相结合可以获取所有的元素子节点

三、添加删除元素的方法
（1）appendChild（node）：添加的元素如果不存在则在父元素最后添加元素，如果被添加的元素已经存在，则先将其父元素中的元素删除，然后再添加到指定的元素中。
（2）insertBefore（node,node1）:在node1前面添加元素node，如果第二个参数没有指定则是在父元素的最后添加元素
（3）replaceChild（newChild，oldChild）：利用新的元素替换旧的元素，如果只存在一个参数，则将元素删除
（4）removeChild（node）：移除某个元素
（5）cloneChild（boolean）：对元素进行克隆，当参数为true时则会将该元素的子元素额进行拷贝，为false时则只拷贝当前元素

阅读全文

0 0