目录
在前面我们讲述DOM概念的时候，有提到，网页中所有的内容都是节点，节点是DOM树中非常重要的概念，故对节点单独做一个总结：
常用节点类型
元素节点
元素节点即所有元素标签
1.节点类型nodetype：1
2.节点名字nodeName：大写标签名
3.节点文本内容nodeValue：null
属性节点
属性节点即所有属性
1.节点类型nodetype：2
2.节点名字nodeName：属性名
3.节点文本内容nodeValue：属性值
文本节点
文本节点包括所有文字、标签之间的空格和换行
1.节点类型nodetype：3
2.节点名字nodeName：#text
3.节点文本内容nodeValue：文本内容
注释节点
注释节点即注释内容
1.节点类型nodetype：8
2.节点名字nodeName：#comment
3.节点文本内容nodeValue：注释内容
文档节点
文档节点即文档document
1.节点类型nodetype：9
2.节点名字nodeName：#document
3.节点文本内容nodeValue：null
获取节点方式
节点层级
节点可分为四种：
1.根节点：即<html>，有且仅有一个
2.父节点：某节点的上级节点
3.子节点：某节点的下级节点
4.兄弟节点：具有相同父节点的节点
获取父节点
语法：element.parentNode
<div>
<h5>content0</h5>
<p>content1</p>
<span>content2</span>
</div>
<script>
//获取标签<h5>
var h5 = document.querySelector('h5');
//获取其父节点
console.log("标签<h5>父节点是：",h5.parentNode);
</script>上例中节点<h5>的父节点是<div>，所以输出应该是<div>， console接口中可以查看输出，并且<div>可以展开看见其内部子元素
获取子节点
1.获取所有子节点(节点集合)
语法：element.childNodes
2.获取第一个子节点
语法：element.firstChild
3.获取最后一个子节点
语法：element.lastChild
4.获取元素子节点(元素集合)
语法：element.children
5.获取第一个子元素节点
语法：element.firstElementChild
6.获取最后一个子元素节点
语法：element.lastElementChild
<div>
<h5>content0</h5>
<p>content1</p>
<span>content2</span>
</div>
<script>
//获取节点<div>
var div = document.querySelector('div');
//获取节点<div>下所有子节点
console.log("节点<div>下所有子节点",div.childNodes);
//获取节点<div>第一个子节点
console.log("节点<div>第一个子节点",div.firstChild);
//获取节点<div>最后一个子节点
console.log("节点<div>最后一个子节点",div.lastChild);
//获取节点<div>下所有子元素子节点
console.log("节点<div>下所有子节点",div.children);
//获取节点<div>第一个子元素子节点
console.log("节点<div>第一个子节点",div.firstElementChild);
//获取节点<div>最后一个子元素子节点
console.log("节点<div>最后一个子节点",div.lastElementChild);
</script>注意：所有子节点包括空格换行符等文本节点!
获取兄弟节点
1.获取上一个兄弟节点
语法：element.previousSibling
2.获取下一个兄弟节点
语法：element.nextSibling
3.获取上一个兄弟元素节点
语法：element.previousElementSibling
4.获取下一个兄弟元素节点
语法：element.nextElementSibling
<div>
<h5>content0</h5>
<p>content1</p>
<span>content2</span>
</div>
<script>
//获取节点<p>
var p = document.querySelector('p');
//获取节点<p>上一个兄弟节点
console.log("节点<p>上一个兄弟节点",p.previousSibling);
//获取节点<p>下一个兄弟节点
console.log("节点<p>下一个兄弟节点",p.nextSibling);
//获取节点<p>上一个兄弟元素节点
console.log("节点<p>上一个兄弟元素节点",p.previousElementSibling)
//获取节点<p>下一个兄弟元素节点
console.log("节点<p>下一个兄弟元素节点",p.nextElementSibling)
</script>同样的，也要注意空格和换行等文本节点
创建节点方式
创建节点方式属于动态创建，有三种方式，其特点如下：
1.document.write()
<div></div>
<script>
//写入节点span
document.write("<div><span>span content</span></div>");
</script>页面成功显示span content文本内容 ，使用该方式创建元素，当页面文档流加载完毕，再次调用会导致页面重绘
2.element.innerHTML
<div></div>
<script>
//找到div元素
var div = document.querySelector('div');
//写入节点
div.innerHTML =` <p>p content</p>`;
//输出div元素
console.log(div.childNodes); //NodeList(2) [text, p]
</script>使用该方法将节点加入元素中，导致页面部分重绘，不会导致页面全部重绘
3.document.createElement()
<script>
//创建<button>
var btn = document.createElement("BUTTON");
//输出
console.log(btn); //<button></button>
</script>使用该方式创建节点结构清晰效率高，但创建多个元素效率稍低
添加节点方式
添加节点有两种位置方式可以进行增添
1.appendChild()：添加节点到指定父节点的已有子节点末尾
2.insertBefore(child,指定元素)：添加节点到指定父节点的指定子节点首部
<div>
<ul id="add">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</div>
<span>添加尾部元素</span>
<p>添加首部元素</p>
<script>
//获取<span>
var span = document.querySelector('span');
//添加节点到指定父节点的已有子节点末尾
document.querySelector('ul').appendChild(span);
//获取<p>
var p = document.querySelector('p');
//获取<ul>
var ul = document.querySelector('ul');
//获取<li>
var lis = ul.querySelectorAll('li')
//添加节点到指定父节点的已有子节点首部
document.querySelector('ul').insertBefore(p,lis[1]);
</script>网页渲染效果：
删除节点方式
删除节点方式可以删除指定节点
语法：removeChild(child)
我们在上面添加节点的代码中做出删除动作
//删除节点
ul.removeChild(lis[2]);最终删除第三个<li>样式，网页呈现效果如下：
克隆节点方式
在之前的博客中我们有自己讲深拷贝与浅拷贝，在这里，这种克隆节点方式也分为深拷贝与浅拷贝两种拷贝方式
语法：node.cloneNode(true/false)
true:深拷贝，复制节点本身和所有子节点
false(或空):浅拷贝，只复制节点本身
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
<script>
//克隆节点
var ul = document.querySelector('ul');
//深拷贝
var deepCopy = ul.cloneNode(true);
console.log("深拷贝：",deepCopy)
//浅拷贝
var shallowCopy = ul.cloneNode(false);
console.log("浅拷贝：",shallowCopy)
</script>
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
