大家好，这里是X🐟，今天继续来更DOM基础啦，事先说明一下本篇博客主要内容，关于Node类型和Document类型的简单解释我在上一篇博客已经说明过了，这篇博客是对上一篇的延续，如果对这两个类型有疑惑的朋友可以去先看上一篇博客：点我点我🤍
那么废话不多说，让我们开始DOM基础二吧！！！！！
上一篇博客讲了每个节点都有三个属性：nodeValue、nodeName、nodeType，现在来讲讲节点之间的关系
大家都知道HTML就是一个个标签组合而成的，也叫做标签语言，之前讲到了这就像一棵树，每个节点之间构成的树，那么这棵树，细化到每个节点之间，肯定都是存在一定关系的，就像家谱图一样，学过树的朋友们都知道，存在着子树、根、父亲等等的概念，在这里也一样，比如：< body>元素可以看成< html>元素的子元素；也就是< html>元素是< body>元素的父亲；< head>元素可以看成是< body> 的同胞元素，因为它们都有着共同的父亲< html>
上面讲到了每个节点之间肯定多多少少存在着关系，那么这个关系可以用childNodes属性来描述，每个节点都有该属性，并且其中保存着NodeList对象，NodeList是一种类数组对象，用来保存一组有序的节点，这样就可以通过位置来访问这些节点啦
注意注意👱♀️：上面说到每个节点都具有这个属性，那么我们通过方括号的形式就可以来访问NodeList的值了，并且它们都具有Length属性，但是但是，NodeList不是Array的实例👨🎓塔实际上是DOM结构动态查询的结果，它是会变化的,所以我们访问元素就变得超级无敌简单啦,上一个图👇👇👇
具体使用方法也和数组一样，非常简单：
var firstChild = yourNode.childNodes(0);
var secondChild = yourNode.childNodes(1);
var length = yourNode.childNodes.length;
//用 item() 访问也是可以的，只是习惯了直接用括号比较方便
var firstChild_1 = yourNode.childNodes.item(0);
🏡在上面的图可以看到还有一个parentNode属性，并且它们都指向相同的一个parent，因为所有的节点都有着相同的父亲，所以除了父节点外，包含在childNodes列表当中的每个节点相互之间都是同胞节点🚧🚧🚧
⛪在上面的图也可以看到还有nextSibling、previousSibling,通过这两个属性就可以访问同一个列表里其他的节点，其中，列表中第一个节点的previousSibling属性值为null，同样最后一个节点的nextSibling属性也为null🚥🚥🚥如果列表中只有一个节点，那么两个属性值都为null🚛
那至于lastChild和firstChild和父节点之间的关系就不说啦，显而易见
想判断一个节点是否包含子节点，除了使用length方法外，这个函数非常常用~~
当一个节点包含一个或者多个子节点的情况下返回true，否则返回false
这是节点的最后一个属性啦，这个属性指向表示整个文档的文档的节点🚢就是“所属关系”的意思，因为任何节点都不能同时存在于两个或者多个文档中，通过这个属性我们就可以直接访问文档节点🗼
注意噢，要使用以下方法的话，操作的对象必须都是某个节点的子节点，也就是你要使用的话必须先取得父节点🛹🛹🛹当然了，不是所有节点都有子节点的，所以这样就很容易导致没有子节点又调用了这些方法，这样就会出错🛫🛫🛫下面先介绍方法，最后再举例子演示🌤🌤🌤
该方法可以在childNodes列表的尾部添加一个节点，添加完之后，所有的父节点、子节点都会得到相应的更新，且该方法会返回新增的节点
该方法可以将节点放在childNodes列表中的任意位置，该方法自然就需要接受两个参数：要插入的节点和作为参照的节点，插入节点之后，被插入的节点就变成了参照节点的前一个节点(previousSibling)，同时被方法返回，如果参照节点为null，则此时该方法就如appendChild()方法效果一致
该方法就是替换节点，并且删除原本的节点🚄该方法接受两个参数：要插入的节点和要替换的节点，虽然说被替换的节点依然在文档中，但是它在文档中已经没有它的位置了，并且被替换的节点与之相关的所有关系指针也同时会被复制过来，所以大可不必担心
这个方法只接受一个参数，也就是要移除的节点，被移除的节点作为返回值返回🚛
里面我运用了一些函数，如果没有学过的朋友我下面都有注释的，都非常简单，看名字就大致明白这个函数的功能🚤🚤🚤
<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 删除节点</title>
<script language="javascript">
function delNode()
{
var deleteN=document.getElementById('di');
if(deleteN.hasChildNodes())
{
deleteN.removeChild(deleteN.lastChild);
}
}
</script>
</head>
<body>
<h1>删除节点操作演示</h1>
<div id="di">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</div>
<form>
<input type="button" value="删除行" onclick="delNode();"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul li::marker {
content: '😎';
}
</style>
<script type="text/javascript">
function replace_test(){
//思路：1.首先找到要替换的节点；2. 创建一个新的节点；3.找到父节点，在父节点的角度调用replaceChild(新,旧)方法
var newli = document.createElement('li');//创建新节点
var newtext = document.createTextNode('学生');//创建该新节点的文本节点
newli.appendChild(newtext);
var nodeul = document.getElementsByTagName('ul')[0];//找到父节点
var oldli = nodeul.children[2];//找到要替换的节点
nodeul.replaceChild(newli,oldli);//替换
}
</script>
</head>
<body style="background-color: #FFD700;">
<div id="container">
<ul>
<li>校长</li>
<li>老师</li>
<li>小明</li>
<li>主任</li>
<li>副校长</li>
</ul>
</div>
<button onclick="replace_test()" value="">节点的替换与修改按钮</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul li::marker {
content: '💜';
}
</style>
<script type="text/javascript">
//实现：在冬天前插入秋天
function insert_test(){
var newli = document.createElement('li');//创建新节点
var new_li_text = document.createTextNode('秋天');
newli.appendChild(new_li_text);//将这个文本节点追加到新节点上
var nodeul = document.getElementsByTagName('ul')[0];//获取第一个UL的节点
var nodeli_3 = nodeul.getElementsByTagName('li')[2];//获取UL的第3个节点
nodeul.insertBefore(newli,nodeli_3);
}
</script>
</head>
<body style="background-color: #ff557f;">
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>冬天</li>
</ul>
</div>
<button onclick="insert_test()" value="">节点的添加</button>
</body>
</html>
好啦，这就是本篇博客的所有内容，如果对你有帮助的话，别忘了点赞、收藏，再来一波关注噢🧡🧡🧡
