9-1 DOM基本介绍
9-1-1什么是DOM
首先，我们需要介绍什么是DOM。DOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型。也就是说，将整个文档看作是一个对象。而一个文档又是由很多节点组成的， 那么这些节点也可以被看作是一个个的对象。DOM里面的对象属于宿主对象，需要浏览器来作 为宿主。一旦离开了浏览器这个环境，那么该对象将不复存在。同样，上一章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是一个宿主对象。
DOM的作用如下：
・浏览器提供的操纵HTML文档内容的应用程序接口
・用于对文档进行动态操作，如增加文档内容，删除文档内容，修改文档内容等等
9-1-2 DOM 历史
在介绍了什么是DOM之后，接下来我们来看一下DOM的一个发展史。而一说到DOM的发展史， 那就不得不介绍DOM的级别。这里我们对DOM的级别来进行一个简单的介绍，如下：
DOM Level 0：首先，我们需要确定的是在DOM标准中并没有DOM0级这个级别。所谓
的DOM0级是DOM历史坐标中的一个参照点而已，怎么说呢，DOM0级指的是IE4和N etscape 4.0这些浏览器最初支持的DOM相关方法。主要关注于常见的页面元素，比如图像，链接和表 单。有些现在图像和表单的那些方法，目前依然可以被用在当前版本的DOM中。
DOM Level 1：于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心 (DOM Core)和DOM HTML。这个版本引入了网页的完整模型，允许在网页的每个部分进行导 航。
DOM Level 2：对DOM level 1 做了扩展，于20001年出版，引入了流行的 getElementById()方 法，让访问网页上的特定元素变得更加容易。
DOM Level 3：对DOM level 2做了进一步的扩展，于2004年出版。
9-1-3节点类型与节点名称
—个文档是由大量的节点所构成的。而每一个节点都有一个叫做nodeType的属性，用于表明节 点的类型。不同的节点类型对应了不同的数值，具体对应的数值如下表：
|
节点名称 |
对应数值 |
|
兀素P点 |
Node.ELEMENT_NODE(1) |
|
属性节点 |
Node.ATTRIBUTE_NODE ⑵ |
|
文本节点 |
Node.TEXT_NODE ⑶ |
|
CDATA节点 |
Node.CDATA_SECTION_NODE ⑷ |
|
实体引用名称节点 |
Node.ENTRY_REFERENCE_NODE(5) |
|
实体名称节点 |
Node.ENTITY_NODE(6) |
|
处理指令节点 |
Node.PROCESSING_INSTRUCTION_NODE(7) |
|
注释节点 |
Node.COMMENT_NODE(8) |
|
文档节点 |
Node.DOCUMENT_NODE(9) |
|
文档类型节点 |
Node.DOCUMENT_TYPE_NODE(10) |
|
文档片段节点 |
Node.DOCUMENT_FRAGMENT_NODE(11) |
|
DTD声明节点 |
Node.NOTATION_NODE(12) |
|
从上面我们可以看出， 到该节点的节点类型， |
不同的节点对应了不同的节点类型，我们可以通过nodeType属性来获取 示例如下： |
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<script>
let test1 = document.getElementById("test1");
let content = test1.firstChild;
let attr = test1.getAttributeNode("class"); console.log(test1.nodeType);//1获取元素节点的节点类型 console.log(content.nodeType);//3获取文本节点的节点类型 console.log(att r.nodeType);//2获取属性节点的节点类型 console.log(document.nodeType);//9 获取整个文档的节点类型
</script>
</body>
nodeType属性可以和if配合使用，确保不会在错误的节点类型上执行错误的操作，如下:
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <script>
let test1 = document.getElementById("test1");
//如果是元素节点
if(test1.nodeType == 1){
//设置该节点的颜色为红色
test1.style.color = "red";
}
</script>
</body>
效果：
Lorem ipsum dolor sit amet.
除了获取节点类型以外，我们还可以通过nodeName属性来获取节点的名称，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <script>
let test1 = document.getElementById("test1");
let content = test1.firstChild;
let attr = test1.getAttributeNode("class"); console.log(test1.nodeName);//P console.log(content.nodeName);//#text console.log(attr.nodeName);//class console.log(document.nodeName);//#document </script>
</body>
可以使用nodeValue来获取一个元素节点的文本值，示例如下:
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test1");
//p元素节点的子节点(文本节点)的节点值 console.log(i.firstChild.nodeValue);
</script>
</body>
效果：
Lorem ipsum dolor sit amet.
需要注意的是n odeValue是获取节点的值，所以还是需要先定位到元素节点下面的文本节点。
最后一点需要说明的是，属性节点并不是元素节点的子节点，只能算作是元素节点的一个附属节 点，如下图：
这里我们通过一段代码来证明上面说的这一点，如下:
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <script>
let test1 = document.getElementById("test1"); console.log(testl.childNodes);//打印出该节点的所有子节点 </script>
</body>
效果：
▼ NodeList(1)
► 0: text
length: 1
►_proto_: NodeList
可以看到，当我们查看vp＞元素下面的子节点时，打印出来的子节点只有一个文本节点，通过这 个例子就可以证明属性节点并不是元素节点的子节点，只能算作是元素节点的一个附属节点。
9-2旧的DOM用法
接下来，我们来看一下来自于DOM0级的旧的DOM用法。前面我们在介绍DOM历史的时候有提 到过，DOM0级主要关注于页面上常见的元素，比如图像，链接和表单等。这些方法目前依然可 以被用在当前版本的DOM中。
9-2-1 document.body
返回网页的＜body＞元素
示例如下:我在我的HTML文件里面书写如下的代码
<body>
<script>
let i = document.body; console.log('this is ',i);
</script>
</body>
效果:
this is ► <body>...</body>
可以看到，这里我们确实就引用到了文档的bod y元素
9-2-2 document.images
返回文档中所有图像的一个节点列表
<body>
vimg sr c="" alt="图片 1">
vimg sr c="" alt="图片 2">
vimg sr c="" alt="图片 3">
vimg sr c="" alt="图片 4">
vimg sr c="" alt="图片 5"> vscript>
let i = document.images; console.log(i); v/script>
v/body>
► (5) [img, img, img, img, img]
可以看到这里关于页面里面所有的图片就都出来了。这是一个节点列表，所以我们可以像使用数 组一样来取得每一个图片元素
<body>
vimg sr c="" alt="图片 1">
vimg sr c="" alt="图片 2">
vimg sr c="" alt="图片 3">
vimg sr c="" alt="图片 4">
vimg sr c="" alt="图片 5"> vscript>
let i = document.images;
console.log(i);//获取页面所有的图片元素 console.log(i[0]);//引用第一个图片元素 v/script>
v/body>
效果：
► (5) [img, img, img, img, img]
<img src(unknown) alt="图片
9-2-3 document.links
返回所有具有href属性的va>元素和var ea>元素的一个节点列表
vbody>
va hr ef=""> 链接 1v/a>
va hr ef=""> 链接 2v/a>
va hr ef=""> 链接 3v/a>
va hr ef=""> 链接 4v/a>
va hr ef=""> 链接 5v/a>
vscript>
let i = document.links;
console.log(i);//获取页面所有的链接元素 console.log(i[0]);//获取第一个链接元素 v/script>
v/body>
效果：
► (5) [a, a, a, a, a]
<a href>链接l</a>
9-2-4 document.anchors
返回所有具有n ame属性的va>元素的一个节点列表
示例如下：
<body>
<a hr ef=""> 链接 1v/a>
va hr ef="" name="链接 2"> 链接 2v/a>
<a hr ef="" name="链接 3"> 链接 3</a>
<a hr ef=""> 链接 4v/a>
va hr ef=""> 链接 5v/a>
vscript>
let i = document.anchors;
console.log(i);//只会获取带有name属性的a元素 console.log(i[0]);
v/script>
v/body>
效果：
▼ (2) [a, a,链接2: a,链接3: a]
► 0: a
► 1: a
length: 2
►链接2: a
►链接3: a
►_proto_: HTMLCollection
<a href name="链接2”>链接2</a>
9-2-5 document.forms
返回文档中所有表单的一个节点列表
示例如下：
vbody>
vform action="" name="form1">v/form>
vform action="" name="form2">v/form> vscript>
let i = document.forms; console.log(i);
console.log(i[0]);
v/script>
v/body>
▼ (2) [form, form, forml: form, form2: form]
► 0: form
► 1: form
► forml: form
► form2: form
length: 2
►_proto_: HTMLCollection
<form action name="forml"x/form>
9-3快速查找节点
从D0M2级开始引入了 getElementById()等可以快速查找节点的方法，让我们查找特定的元素 变得非常的容易，在这一节我们就来介绍一下这些快速查找某一个节点的方式。
9-3-1 getElementById()
这个方法到现在都还是非常流行的，通过这个方法可以快速锁定id为某个值的节点，示例如下：
<body>
<p id="test">Lorem ipsum dolor sit amet.</p>
<a hr ef=""> 链接 1v/a>
<script>
//快速找到id为test的节点元素
let i = document.getElementById("test"); console.log(i);
v/script>
v/body>
效果：
<p id="test">Lorem ipsum dolor sit amet・v/p>
9-3-2 getElementsByTagName()
除了上面的通过节点的id来查找节点元素以外，还可以通过标签的名称来快速查找节点，不过通 过标签名来查找节点的方式得到的是一个节点列表，我们需要通过类似于数组的方式才能定位到 具体的某一个节点。
vbody>
vp id="test1">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef=""> 链接 1v/a>
vscript>
let i = document.getElementsByTagName("p");
console.log(i);//获取所有的p元素 console.log(i[0]);//获取元素列表的第一个p元素 v/script>
v/body>
▼ (2) [p4ftestl, p#test2, testl: p^testl, test2: potest2]
► 0: p#testl
► 1: p#test2
length: 2
► testl: p#testl
► test2: p#test2
►_proto_: HTMLCollection
<p id="testl,l>Lorem ipsum dolor sit amet・v/p>
9-3-3 getElementsByClassName()
className，顾名思义，就是通过类名来查找到元素。而我们知道，类名也是可以有相同的，所 以通过这种方式返回的也会是一个元素列表，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a>
<script>
let i = document.getElementsByClassName("abc");
console.log(i);//获取类名为abc的元素 console.log(i[0]);//获取类名为abc的第一个元素 v/script>
v/body>
效果：
▼ (2) [p#testla・abc, testl: p#testl・abc]
► 0: p#testl.abc
► 1: a・abc
length: 2
► testl: p#testl.abc
►_proto_: HTMLCollection
<p id="testl" class="abc">Lorem ipsum dolor sit amet・v/p>
9-3-4 document.getElementsByName()
使用这个方法可以访问到对应name值的元素节点。因为节点允许有相同的name值，所以这个方 法返回的也会是一个节点列表。示例如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p> vp id="test2" name="qwe">Lorem ipsum dolor sit amet.v/p> <a hr ef="" class="abc"> 链接 1v/a>
vul id="test3">
vli>item1v/li>
<li name="qwe">item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementsByName("qwe"); console.log(i);
</script>
</body>
效果：
▼ (2) [potest2, li]
► 0: p#test2
► 1: li
length: 2
►_proto_: NodeList
9-3-5 document.querySelector()
这是H TML5新增的查找节点方法，该方法最大的特点在于可以通过CSS的语法来查找文档中所匹 配的第一个元素，注意，只是第一个元素！示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a> <script>
let i = document.querySelector(".abc"); console.log(i);
v/script>
v/body>
效果：
<p id="testl,1 class="abc">Lorem ipsum dolor sit amet・v/p>
可以看到这里就找到了符合要求的第一个元素
9-3-6 document.querySelectorAll()
这个方法相比上面的方法多了一个All的标志符，我们可以猜想，这就是会返回所有符合要求的元 素，同样还是使用CSS的语法来进行查找，示例如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef="" class="abc"> 链接 1v/a> <script>
let i = document.querySelectorAll(".abc"); console.log(i);
console.log(i[0]);
v/script>
v/body>
效果：
▼ (2) [potest 1a・ abc]
► 0: p#testl.abc
► 1: a・abc
length: 2
►_proto_: NodeList
<p id="testl" class="abc">Lorem ipsum dolor sit amet・v/p>
可以看到，这里返回的就是一个节点列表，我们仍然可以通过类似数组的形式来精确访问到某一 个具体的节点。
9-4关系查找节点
在D0M2级之前，还没有快速查找节点的方式，这个时候只有通过节点之间的关系来对节点进行 查找。文档中所有节点之间都存在这样那样的关系。节点间的各种关系可以用传统的家族关系来 描述，类似于一个家谱图。节点与节点之间的关系如下图所示：
9-4-1 childNodes 属性
每个节点都有一个childNodes属性，其中保存着一个NodeList的类数组对象。该对象包含了 该节点下面所有的子节点。NodeList对象是自动变化的。这里让我们先来看一下这 个childNodes属性，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a>
<ul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul> vscript>
//获取ul节点
let i = document.getElementById("test3")
//输出ul节点的childNodes属性 console.log(i.childNodes); v/script>
v/body>
▼ (7) [text, li, text, li, text, li, text] 6
► 0: text
► 1: li
► 2: text
► 3: li
► 4: text
► 5: li
► 6: text
length: 7
►_proto_: NodeList
可以看到，＜ul＞的childNodes属性是该节点的所有子节点的一个列表。有人估计会觉得奇 怪，为什么明明＜ul＞下面只有3个vli＞ ,但是长度显示的却是7。实际上这里所指的子节点不 仅仅只是指的下面的元素节点，还包括了文本节点，空白节点等，都一概被含入了进去。
9-4-2 children 属性
child ren属性只返回一个节点下面的所有子元素节点，所以会忽略所有的文本节点和空白节 点，我们还是以上面的代码来举例，如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test3") console.log(i.child ren);//获取下面的所有元素节点 </script>
</body>
效果：
▼ (3) [li, li, li]
► 0: li
► 1: li
► 2: li
length: 3
►_proto_: HTMLCollection
可以看到，这次获取到的就只是元素节点，长度为3
9-4-3 firstChild 和 lastChild
接下来我们首先要介绍的是这两个属性，分别是访问一个节点的第一个子节点以及最后一个节 点，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a>
<ul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
let i = document.getElementById("test3"); console.log(i.firstChild);
v/script>
v/body>
效果：
► #text
可以看到这里就访问到了 <ul>下面的第一个子节点，但是其实这个节点是一个空白节点，什么 意思呢？就是说在DOM里面会将空格和换行也视为是一个节点。这样的节点叫做空白节点。如 果我现在将<ul>元素和vli>元素之间的空白给删除掉，那么第一个子元素就应该为<ul>下 面的第一个<li> ,如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef="" class="abc"> 链接 1v/a>
vul id="test3">vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
let i = document.getElementById("test3");
console.log(i.firstChild);
v/script>
v/body>
效果：
<li>iteml</li>
这时vul＞下面的第一个子元素就变为了第一个＜li＞元素。
如果想要在保持之前的HTML结构的基础上获取第一个<li>元素的内容的话，就只有层层往下 找，如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test3"); console.log(i.firstChild.nextSibling.firstChild);
</script>
</body>
效果：
"iteml"
lastchild基本上就和刚才的fi rstChild相反，获取的是子节点里面的最后一个节点，示例 如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test3"); console.log(i.lastChild);
</script>
</body>
效果：
► #text
这里也是获取到的是一个空白节点。
9-4-4 parentNode
从英文的意思我们就可以知道，这就是获取父级节点的属性，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a>
<ul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
let i = document.getElementById("test3"); console.log(i.parentNode);
v/script>
v/body>
效果：
► <body>...</body>
这里就访问到了 <ul>节点的父节点<body>元素。
9-4-5 previousSibling 和 nextSibling
pr eviousSiblings属性返回同一父节点下的前一个相邻节点。如果该节点已经是父节点的第一
个节点，则返回null，示例如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef="" class="abc"> 链接 1</a>
vul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
let i = document.getElementById("test3");
console.log(i);
console.log(i.previousSibling.previousSibling);
</script>
</body>
效果：
► <ul id="test3">...</ul>
<a href class=,,abc">链接l</a>
连续写两次pr eviousSiblings，可以跳过第一个空白节点，定位到va>节点。
接下来我们来看一下nextSibling , nextSibling属性返回同一父节点的下一个相邻节点。如
果节点是父节点的最后一个节点，则返回null，示例如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef="" class="abc"> 链接 1v/a>
vul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
let i = document.getElementById("test1"); console.log(i.nextSibling.nextSibling);
v/script>
v/body>
效果：这里也是同样，如果只写一个nextSibling ,那么访问到的是一个空白节点，连续写两 个，就跳过了这个空白节点，访问到了下一个元素节点。
<p id="test2,l>Lorem ipsum dolor sit amet・v/p>
9-4-6 previousElementSibling 和 nextElementSibling
把前后的换行也算作是一个空白节点，这样的处理确实也有太麻烦了。所以，现在添加上
了 pr eviousElementSibling和nextElementSibling这两个属性，直接用于查询某一^节点
的上一个或者下一个元素节点，示例如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test2"); console.log(i.previousElementSibling);
</script>
</body>
效果：
<p id=l,testl" class^'abc'^Lorem ipsum dolor sit amet・v/p>
再来看一^? nextElementSibling属性的例子
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a>
<ul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
let i = document.getElementById("test2"); console.log(i.nextElementSibling); v/script>
v/body>
效果:
9-5节点操作
操作节点其实就有点像操作数据库数据一样，无非就是对节点进行增删改查，当然查就是前面我 们所讲的查找节点，接下来我们来看一下对节点的增删改的操作。
9-5-1创建和添加节点
首先我们来看一下如何创建一^节点。在document对象里面存在一^? cr eateElement()的方 法，允许我们来创建一个元素节点，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1v/a>
<ul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
//创建一个新的p元素
let newP = document.createElement("p");
v/script>
v/body>
通过前面的学习，我们都知道了，元素节点是元素节点，文本节点是文本节点，所以我们这里光 有一个vp>的元素节点是没什么意义，我们还需要添加文本节点。
在DOM里面，使用cr eateTextNode()方法来创建一^文本节点，示例如下：
vbody>
vp id="test1" class="abc">Lorem ipsum dolor sit amet.v/p>
vp id="test2">Lorem ipsum dolor sit amet.v/p>
<a hr ef="" class="abc"> 链接 1</a>
vul id="test3">
vli>item1v/li>
vli>item2v/li>
vli>item3v/li>
v/ul>
vscript>
//创建一个新的p元素
let newP = document.createElement("p");
//创建一个文本节点
let newContent = document.c reateTextNode("这是一个测试")；
</script>
</body>
好，至此我们的文本节点也就已经创建好了。
我们已经知道，一般来讲，一个元素里面有内容的话，那么这个文本节点将会是元素节点的子节 点，所以我们现在需要做的事儿，就是将这个文本节点添加到元素节点的后面。
在DOM里面有一个叫做appendChild()的方法，可以用于将另一个节点添加为自己的子节点， 语法如下：
父节点.appendChild (子节点)，我们来试一试：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//创建一个新的p元素
let newP = document.createElement("p")；
//创建一个文本节点
let newContent = document.c reateTextNode("这是一个测试")；
//将文本节点添加给P元素节点作为子节点
newP.appendChild(newContent)；
</script>
</body>
但是到目前为止，我们页面上还看不到任何的效果。什么原因呢？是因为虽然我们这个有内容的 元素节点已经创建好了，但是我们还没有将其添加到我们的文档里面。
怎么将这个新创建好的节点添加到文档里面呢？方法非常简单，还是使用刚才
的appendChild()方法，将其添加为某一个节点的子节点即可，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//创建一个新的P元素
let newP = document.createElement("p");
//创建一个文本节点
let newContent = document.c reateTextNode("这是一个测试")；
//将文本节点添加给P元素节点作为子节点 newP.aPPendChild(newContent);
//获取body节点
let doc = document.body；
//为bod y节点添加子节点 doc.aPPendChild(newP)；
</scriPt>
</body>
效果：
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
链接1
- iteml
- item2
- item3
这是一个测试
可以看到，这里我们就已经确实将新创建的vp＞元素添加到文档里面了。
上面我们已经向大家介绍了 appendChild()方法了，除了此方法外，关于节点的操作还有一些 其他常见的方法。例如insertBefore() 是添加在节点的前面，
个
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//创建一个新的P元素
let newP = document.createElement("p");
//创建一个文本节点
let newContent = document.c reateTextNode("测试测试")；
//将文本节点添加给P元素节点作为子节点 newP.aPPendChild(newContent);
//获取id为test2的p元素节点
let P = document.getElementById("test2")；
//将newP添加到p的前面
document.body.insertBefore(newP,P)； </script>
</body>
效果：
Lorem ipsum dolor sit amet.
测试测试
Lorem ipsum dolor sit amet.
链接1
- iteml
- item2
- item3
可以看到，我们这里就已经将新创建的节点添加到第二个段落的前面去了。
9-5-2删除节点
既然有添加节点，那么自然也就有删除节点，删除节点的语法如下：
父节点.remove (子节点)
语法是非常的简单，接下来我们来试验一下，如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <p id="test2" name="qwe">Lorem ipsum dolor sit amet.</p> <a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li name="qwe">item2</li>
<li>item3</li>
</ul>
<script>
let test2 = document.getElementById("test2");
//删除第2个段落 document.body.removeChild(test2);
</script>
</body>
效果：
Lorem ipsum dolor sit amet.
链接1
- iteml
- item2
- item3
可以看到，第二个段落就已经被删除掉了
9-5-3替换节点
有些时候，我们需要对节点进行替换，这也是可以实现的，语法如下：
父节点.r eplaceChild(新节点，旧节点)
接下来我们来试一试，代码如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//创建一个新的p元素
let newP = document.createElement("p");
//创建一个文本节点
let newContent = document.c reateTextNode("测试测试")；
//将文本节点添加给P元素节点作为子节点 newP.appendChild(newContent);
//获取id为test2的p元素节点
let p = document.getElementById("test2")；
//用newP添来替换第二个p
document.body.replaceChild(newP,p);
</script> </body>
效果：
Lorem ipsum dolor sit amet.
测试测试
链接1
- iteml
- item2
- item3
可以看到，这里我们的第二个段落就确实被替换成了新的元素节点