DOM介绍_html-js-css

概述 9-1 DOM基本介绍 9-1-1什么是DOM 首先，我们需要介绍什么是DOM。DOM的英语全称为Document Object Model,翻译成中文就是文档对象模型。也就是说，将整个文档看作是一个对象。而一个文档又是由很多节点组成的，那么这些节点也可以被看作是一个个的对象。DOM里面的对象属于宿主对象，需要浏览器来作为宿主。一旦离开了浏览器这个环境，那么该对象将不复存在。同样，上一章

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 做了扩展，于2000¹年出版，引入了流行的 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" >Lorem ipsum dolor sit amet.</p>

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" >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" >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" >Lorem ipsum dolor sit amet.</p> <p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

let i = document.getElementByID("test1");

//p元素节点的子节点(文本节点)的节点值 console.log(i.firstChild.nodeValue);

</script>

</body>

效果：

Lorem ipsum dolor sit amet.

需要注意的是n odeValue是获取节点的值，所以还是需要先定位到元素节点下面的文本节点。

最后一点需要说明的是，属性节点并不是元素节点的子节点，只能算作是元素节点的一个附属节点，如下图：

这里我们通过一段代码来证明上面说的这一点，如下:

<body>

<p ID="test1" >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>

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]

可以看到这里关于页面里面所有的图片就都出来了。这是一个节点列表，所以我们可以像使用数组一样来取得每一个图片元素

<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 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]

9-2-4 document.anchors

返回所有具有n ame属性的va>元素的一个节点列表

示例如下：

<body>

va hr ef="" name="链接 2"> 链接 2v/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,链接2: a,链接3: a]

? 0: a

? 1: a

length: 2

?链接2: a

?链接3: a

?_proto_: HTMLCollection

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

9-3快速查找节点

从D0M2级开始引入了 getElementByID()等可以快速查找节点的方法，让我们查找特定的元素变得非常的容易，在这一节我们就来介绍一下这些快速查找某一个节点的方式。

9-3-1 getElementByID()

这个方法到现在都还是非常流行的，通过这个方法可以快速锁定ID为某个值的节点，示例如下：

<body>

<p ID="test">Lorem ipsum dolor sit amet.</p>

//快速找到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>

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" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

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" >Lorem ipsum dolor sit amet?v/p>

9-3-4 document.getElementsByname()

使用这个方法可以访问到对应name值的元素节点。因为节点允许有相同的name值，所以这个方法返回的也会是一个节点列表。示例如下：

vbody>

vp ID="test1" >Lorem ipsum dolor sit amet.v/p> vp ID="test2" name="qwe">Lorem ipsum dolor sit amet.v/p> <a hr ef="" > 链接 1v/a>

vul ID="test3">

vli>item1v/li>

</ul>

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" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

let i = document.querySelector(".abc"); console.log(i);

v/script>

v/body>

效果：

<p ID="testl^,1 >Lorem ipsum dolor sit amet?v/p>

可以看到这里就找到了符合要求的第一个元素

9-3-6 document.querySelectorAll()

这个方法相比上面的方法多了一个All的标志符，我们可以猜想，这就是会返回所有符合要求的元素，同样还是使用CSS的语法来进行查找，示例如下：

vbody>

vp ID="test1" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

let i = document.querySelectorAll(".abc"); console.log(i);

console.log(i[0]);

v/script>

v/body>

效果：

▼ (2) [potest 1 a?abc]

? 0: p#testl.abc

? 1: a?abc

length: 2

?_proto_: NodeList

<p ID="testl" >Lorem ipsum dolor sit amet?v/p>

可以看到，这里返回的就是一个节点列表，我们仍然可以通过类似数组的形式来精确访问到某一个具体的节点。

9-4关系查找节点

在D0M2级之前，还没有快速查找节点的方式，这个时候只有通过节点之间的关系来对节点进行查找。文档中所有节点之间都存在这样那样的关系。节点间的各种关系可以用传统的家族关系来描述，类似于一个家谱图。节点与节点之间的关系如下图所示：

9-4-1 childNodes 属性

每个节点都有一个childNodes属性，其中保存着一个NodeList的类数组对象。该对象包含了该节点下面所有的子节点。NodeList对象是自动变化的。这里让我们先来看一下这个childNodes属性，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

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,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" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

let i = document.getElementByID("test3") console.log(i.child ren);//获取下面的所有元素节点 </script>

</body>

效果：

▼ (3) [li,li]

? 0: li

? 1: li

? 2: li

length: 3

?_proto_: HTMLCollection

可以看到，这次获取到的就只是元素节点，长度为3

9-4-3 firstChild 和 lastChild
接下来我们首先要介绍的是这两个属性，分别是访问一个节点的第一个子节点以及最后一个节点，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

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" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

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" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

let i = document.getElementByID("test3"); console.log(i.firstChild.nextSibling.firstChild);

</script>

</body>

效果：

"iteml"

lastchild基本上就和刚才的fi rstChild相反，获取的是子节点里面的最后一个节点，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

let i = document.getElementByID("test3"); console.log(i.lastChild);

</script>

</body>

效果：

? #text

这里也是获取到的是一个空白节点。

9-4-4 parentNode

从英文的意思我们就可以知道，这就是获取父级节点的属性，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

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" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

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>

连续写两次pr evIoUsSiblings，可以跳过第一个空白节点，定位到va>节点。

接下来我们来看一下nextSibling,nextSibling属性返回同一父节点的下一个相邻节点。如

果节点是父节点的最后一个节点，则返回null，示例如下：

vbody>

vp ID="test1" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

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" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

</ul>

let i = document.getElementByID("test2"); console.log(i.prevIoUsElementSibling);

</script>

</body>

效果：

再来看一^? nextElementSibling属性的例子

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

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" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

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" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

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" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

//创建一个新的p元素

let newP = document.createElement("p")；

//创建一个文本节点

let newContent = document.c reateTextNode("这是一个测试")；

//将文本节点添加给P元素节点作为子节点

newP.appendChild(newContent)；

</script>

</body>

但是到目前为止，我们页面上还看不到任何的效果。什么原因呢？是因为虽然我们这个有内容的元素节点已经创建好了，但是我们还没有将其添加到我们的文档里面。

怎么将这个新创建好的节点添加到文档里面呢？方法非常简单，还是使用刚才

的appendChild()方法，将其添加为某一个节点的子节点即可，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

该文档是极速pdf编辑器生成，

如果想去掉该提示,请访问并下载：

http://www.jisupdfeditor.com/

//创建一个新的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.

链接1

• iteml

• item2

• item3

这是一个测试

可以看到，这里我们就已经确实将新创建的vp＞元素添加到文档里面了。

上面我们已经向大家介绍了 appendChild()方法了，除了此方法外，关于节点的 *** 作还有一些其他常见的方法。例如insertBefore() 是添加在节点的前面，

个

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

//创建一个新的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" >Lorem ipsum dolor sit amet.</p> <p ID="test2" name="qwe">Lorem ipsum dolor sit amet.</p> <a hr ef="" > 链接 1</a>

</ul>

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" >Lorem ipsum dolor sit amet.</p> <p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

//创建一个新的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

可以看到，这里我们的第二个段落就确实被替换成了新的元素节点

9-5-4克隆节点

有些时候，我们不想创建和插入一个完全新的元素，而是想要复制某个节点，这个时候就轮到克隆节点登场了。克隆节点分为浅克隆和深克隆，只需要向cloneNode()方法传入一个布尔值即可实现浅克隆和深克隆。

克隆节点的语法如下：

节点.clone (布尔值)

浅克隆

所谓浅克隆，就是指指克隆某一个节点，仅仅是克隆该节点而已，方法参数传入false 示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

</ul>

//获取ul元素节点

let ul = document.getElementByID("test3");

//进行浅克隆

let newul = ul.cloneNode(false);

//添加到文档上面 document.body.appendChild(newul);

</script>

</body>

效果：

Lorem ipsum dolor sit amet.

链接1

• iteml

• item2

• item3

光看上面的效果，我们感觉好像没有克隆成功，但实际上是克隆成功了的，我们打开开发者工具进行查看

▼ <body>

<p ID="testl” test2^,l>Lorem ipsum dolor sit amet?v/p>

? <sc ript>...</sc ript>

? vul ID="test3"></ul> == </body>

可以看到，打开开发者工具以后我们看到确实对

进行了克隆ul深克隆

所谓深克隆，就是指复制某个节点和其子节点，需要传入的布尔值为

。示例如下：true<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <p ID="test2">Lorem ipsum dolor sit amet.</p>

1</a>链接 <ul ID="test3">

</ul>

获取

//元素节点ullet ul = document.getElementByID("test3");

进行深克隆，只需要将

//改为falselet newul = ul.cloneNode(true);true

//添加到文档上面

document.body.appendChild(newul);

</script>

</body>

效果：

Lorem ipsum dolor sit amet.

链接

1•

iteml •

item2 •

item3 •

iteml •

item2 •

item3 可以看到，我们不用打开开发者工具，直接从页面上就能直观的感受到区别，这里已经将

以及下面的子元素进行了完完整整的复制。ul9-5-5

在前面，我们已经学会了向文档里面添加节点，但是存在一个问题，那就是如果要添加大量节点的话，这种逐个添加的方法会显得效率很低，因为添加一个节点就会刷新一次页面。这个时候，我们就可以使用文档碎片

里面提供的DOM方法，将节点先添加在一个文档碎片里面，然后最后再一次性添加到文档里面cr eateElementF ragment()<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2" name="qwe">Lorem ipsum dolor sit amet.</p>

1</a>链接 <ul ID="test3">

</ul>

let arrText = ["first","second","third"];

let oF = document.createdocumentFragment(); for(let i=0;i<arrText.length;i++)

{

创建元素节点

//let oP = document.createElement("p");p

oP.innerText = arrText[i];

//给元素节点添加文本内容 //将元素节点添加到文档碎片里面

}oF.appendChild(oP);

OF将document.body.appendChild(oF);里面所有的节点一次性添加到文档上面 </script>

</bOdy>

效果：

Lorem ipsum dolor sit amet

链接

1•

iteml •

item2 •

item3 first

second

third

9-5-6

关于节点的 *** 作，基本上就是上面给大家介绍的那么多。这里再顺带介绍一个创建注释节点作为扩展。在创建注释节点

中提供了创建注释节点的方法DOM，使用该方法可以创建一个注释，示例如下：cr eateComment()<bOdy>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2" name="qwe">Lorem ipsum dolor sit amet.</p> <a hr ef="" >

1</a>链接 <ul ID="test3">

</ul>

//获取第一个段落节点

let test1 = document.getElementByID("test1");

//创建一个注释节点

let zhushi = document.c reateComment("

");这是一个注释//将注释节点添加到第一个段落节点上面

test1.appendChild(zhushi);

</script>

</body>

效果：直接看页面效果是看不到区别的，需要打开开发者工具查看源代码

<!DOCTYPE HTML>

? <head>...</head>

??▼ <body - == "Lorem ipsum dolor sit amet

▼ <p ID="testl" class="abc">

这是一个注释?</p>

v!~^,

v/p>

<p ID="test2" name="qwe^,>Lorem ipsum dolor sit amet?l</a>

? <sc ript>„.</sc ript> </body>

</HTML> 9-5-7

最后，需要说一下的是，节点的相关信息是实时进行改变的。举个例子，如果我们添加或者删除了一个节点，那么当我们访问父节点的长度时马上就会有改变，如下：

<body>实时集合

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2" name="qwe">Lorem ipsum dolor sit amet.</p>

1</a>

</ul>

let ul = document.getElementByID("test3"); console.log(ul.childNodes.length);//7 let newli = document.createElement("li");

newli.inne rText =

ul.appendChild(newli);"新的 console.log(ul.childNodes.length);//8 元素"； </script>

</body>长度已经实时的发生了改变效果：

Lorem ipsum dolor sit amet.

链接

•iteml

• item2

• item3

•新的阮素

这里有一^坑，使用以前的I方法，例如

来获取到的元素是实时集合的，返回的是DOM，而使用新的document.getElementsByTagname来获取到的元素集合不是实时集合，返回来的是HTMLCollection这个的长度是不会实时更新的。que rySelecto rAll快速获取节点内容NodeList,通过前面的学习，现在我们已经能够对文档中的节点进行基本的增删改 *** 作了。但是前面所介绍的方式，我不得不承认实在是相当的繁琐。我明明只是想新增一个节点，却需要好几个步骤才能实现。

9-6那么，有没有一种方式可以让我们更加快捷简便的 *** 作节点呢？答案是有的，就是通过直接修改节点内部信息来简化节点的 *** 作步骤。

9-6-1 INNERHTML

innerText

在和中，我们可以通过

和DOM来获取到节点内部的信息。关于这两个属性的作用和区别，我们来看下面这一个示例就能够明白，如下：inne rH TML<body>inne rText<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

1v/a>

vli>item2v/li>

vli>item3v/li>

v/ul>

vscript>

let i = document.getElementByID("test3");

console.log(i.innerText); console.log(i.INNERHTML);

v/script>

v/body>

效果：

iteml

item2

item3

<li>iteml</li>

可以看到，区别还是非常明显的，

用于获取元素节点的文本值，而

则用于用户元素节点下面的所有东西，包括inne rText标签。inne rH TML那么在知道了这个知识点后，回头再来看我们的节点 *** 作就简单多了，来看下面的示例:H TML<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p>

<p ID="test2">Lorem ipsum dolor sit amet.</p>

1v/a>

vli>item2v/li>

vli>item3v/li>

v/ul>

vscript>

let body = document.getElementsByTagname("body")[0];

body.inne rH TML += "vp >

v/p>";

v/script>这是一个测试 v/body>

这里我要修改

里面的节点内容，我不需要费尽周折的删除已有节点，然后创建新的节点这些步骤，直接修改

的bod y的内容即可，非常的方便简洁。body9-6-2 textContent i nnerHTML这里再给大家介绍一个

属性，通过该属性，我们可以直接获取到一个元素节点的文本内容(扩展)

vbody>textContentvp ID="test1" >Lorem ipsum dolor sit amet.v/p>

vp ID="test2">Lorem ipsum dolor sit amet.v/p>

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.textContent);

v/script>

v/body>

效果：

Lorem ipsum dolor sit amet

好像也是获取元素节点的文本值，两者有什么区别么？具体的区别主要体现在如下几点：

•?

这里我们就直接获取到了元素节点的文本值。
那么，这里估计有人要问了，前面的innerTexttextContent

¹¹ innerText 会获取 style= "displaymone• 中的文本，而 textContent不会

style innerText会获取•标签里面的文本，而innerText不会

IE 虽然作为标准方法但是只支持对以上的浏览器的兼容性较好

• textContent这里我们来看一个具体的例子，示例如下：ie8+<body>

<!--

此代

码只是作为测试,无任何实际含义--><div ID="test"><p>Hello</p>

<div >

<p>World</p>

</div>

<ul>

</ul>

</div>

let testdiv = document.getElementByID（‘test‘）; console.log（"

textContent

+ testdiv.textContent）; console.log（"我是 inne rText 输出的"+ testdiv.inne rText）;我是 </script>输出的"</body>

效果：

textContent

Hello

我是*{margin: 0px;padding: 0px;}输出的

World

iteml

item2

item3

innerText

Hello

我是iteml输出的item2

item3

属性和类的 *** 作

9-7-1

9-7获取和设置元素属性

在元素属性 *** 作相关方法(扩展)

中提供了两个方法来获取和设置元素节点的属性，分别是

以DOMsetAttribute()getAtt ribute()顾名思义就是获取到元素节点的属性值，而

及则是设置元素节点的属性值，如下：

getAtt ribute()<body>setAtt ri bute()<p ID="test1" >Lorem ipsum dolor sit amet.</p>

let test1 = document.getElementByID("test1");

console.log(test1.getAttribute("ID"));//test1 console.log(test1.getAttribute("class"));//abc

</script> </body>

还有一种方法，也可以获取到元素节点的属性值，是通过

方法来返回指定的属性名。需要注意的是，使用该方法时，首先需要使用

属性来获取到一个元素节点的所有的属性集合，然后再在该集合上调用getnamedItem()方法来返回指定的属性名。att ributes示例如下：getnamedItem()<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1");

ID="test1" console.log(test1.attributes.getnamedItem("ID"));

获取到属性节点的节点值获取到属性节点console.log(test1.attributes.getnamedItem("ID").value); </script>

//</body>testl

接下来我们来看一下设置属性，语法如下：

setAtt ribute("

","

具体示例如下：属性名<body>具体值")

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); test1.setAttribute("class","qwe");

</script>

</body>

效果：

^u v/p>

<body> == ?

<p ID="testl<script>...</script> >Lorem ipsum dolor sit amet?</body>

</HTML> 可以看到，这里我们就确实已经改变了元素的属性了。

同样，设置属性也提供了叫做

的方法来对元素节点的属性进行设置。和上面获取属性值使用到的

方法一样，也是需要用在属性集合上，也就是说要先使用

来获取到一个元素节点的属性集合，然后在该属性集合上来使用该方法，示例如下：setnamedItem()<body>getnamedItem()<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>att ributeslet test1 = document.getElementByID("test1");

//创建一个新的属性节点

let newAttr = document.createAttribute("class");

//为属性节点赋值如果该属性已经存在就覆盖否则就是新增

newAttr.nodeValue = "qwe"; test1.attributes.setnamedItem(newAttr);

</script>

</body>

效果：

== ^,

元素节点存在属性，所以是做的覆盖 *** 作。

.▼ <body 下面我们来演示一个为元素新增属性，如下：

<p ID=<body>testl" all"> 设置属性值时，需要先创建一个属性节点，然后给这个属性节点赋值，最后将这个属性节点挂在元素节点上面。这里由于vp>vp ID="test1" >Lorem ipsum dolor sit amet.v/p>classvscript>

let test1 = document.getElementByID("test1");

//创建一个新的属性节点

let newAttr = document.createAttribute("name");

//为属性节点赋值如果该属性已经存在就覆盖否则就是新增

newAttr.nodeValue = "intro"; test1.attributes.setnamedItem(newAttr);

v/script>

v/body>

效果：

? <head>...</head>

== ^l

v/p>

</body>

??▼ <body </HTML>

<p ID="testl" class=删除元素属性‘abc" name="intro”>Lorem ipsum dolor sit amet?如果要删除属性，可以使用

里面提供的

方法来进行删除，直接传入要删除的属性名作为参数即可，示例如下：

vbody>

vp ID="test1" >Lorem ipsum dolor sit amet.v/p>

vscript>DOMlet test1 = document.getElementByID("test1");removeAtt ribute()//

class

test1.removeAttribute("class");

v/script>

v/body>

效果:删除<HTML lang="en”>属性

== <p ID="testl">Lorem ipsum dolor sit amet

v/p>

?▼ <body </HTML>

同样也可以使用?方法来删除属性，也是同样要先用

获取到元素节点的属性集合，示例如下： <body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); test1.attributes.removenamedItem("class");

</script>removenamedItem()</body>att ributes效果：

== <p ID="testl">Lorem ipsum dolor sit amet

v/p>

</body> </HTML>

?▼ <body 获取属性索引

方法，该方法也是在属性集合的基础上使用，传入的参数为数字，可以定位到某一个属性上面，示例如下：?<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script> let test1 = document.getElementByID("test1"); console.log(test1.attributes.item(0));//ID="test1" console.log(test1.attributes.item(0).nodeValue);//test1 console.log(test1.attributes.item(1));// console.log(test1.attributes.item(1).nodeValue);//abc

</script>

</body>

9-7-2

item()属性也可以通过获取属性的方法来获取到，但是新的

里面可以使用

来获取一个元素节点所有的类，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); console.log(test1.classList); // DOMTokenList(2) ["abc","qwe",valu e: "abc qwe"]

console.log(test1.classList[0]); // abc console.log(test1.classList[1]); // qwe </script>元素的类的相关 *** 作（扩展）
虽然说一个元素节点的class</body>DOM可以看到，通过classList属性确实获取到了一个元素节点的所有的类。可以像访问数组一样访问到每一个类名。

除了上面所介绍的

以外，我们还可以通过

这个属性来获取

元素的类，如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>classListlet test1 = document.getElementByID("test1"); console.log(test1.classname);//abc qwe </script>

</body>classList这里我们通过classname属性获取到了该DOM元素所有的类，返回的值是一个字符串。

添加类

在新的

里面也新添加了一个

方法来给一个元素节点快速添加类，示例如下：

需要注意的是该方法需要用在类名集合上面，也就是说要先使用classname来获取一个元素节点的所有类DOM<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); test1.classList.add("kkk");DOM</script>add()效果：

?classList<head>...</head>

^,1

let test1 = document.getElementByID("test1"); test1.classList.remove("qwe");

</script>

</body>

效果：

? <head>...</head>

.▼ <body> == ▼ vbody == ^u

<p ID="testlv/p> test1" >Lorem ipsum dolor sit amet.</p> <script>

</body>

</HTML>

是否含有某个类可以使用

?方法来检测一个元素节点是否含有指定的某一个类，示例如下：

<p ID=<body>testl" >Lorem ipsum dolor sit amet?<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); let i = test1.classList.contains("qwe"); console.log(i);//true

let j = test1.classList.contains("kkk"); console.log(j);//false

</script>

</body>

切换类contains()方法是一个非常有用的方法，可以用来对类进行切换。如果元素节点没有给出的类，就添加该类，如果有该类，就删除该类。如果类被添加了，就返回

如果是被删除了，就返回

。示例如下：

|需要注意也是用在类的集合上面，也就是

上面

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); test1.classList.toggle("kkk");

console.log(test1.classList); test1.classList.toggle("kkk");

toggle()console.log(test1.classList);true,</script>false</body>

效果：classList?

(3)

^ll

¹¹

^ll

¹¹

value:

^tl ][?abc(2) ^ll "give",^ltkkkvalue: ^lt¹*‘abc qwe kkk]9-7-3

前面的两个小节针对元素的属性和类的 *** 作介绍了大量的方法，但是这些方法确实也太繁琐了，并且在及其以下的浏览器，还不支持[和abc方法。,这里给大家介绍 *** 作元素属性更为直接的方法，就像 *** 作对象的属性一样，通过点来对属性和类进行 *** 作。abc qwe*下面我们来看一个具体的例子，如下：<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <label ID="lab">Click</label>元素属性设置通用方法

<input type="text" name="" ID="username">ie8<script> test1.classname = ‘def‘; test1.Title = ‘p‘; lab.HTMLFor = ‘username‘; username.type = ‘password‘;setAtt ribute</script>getAtt ribute

ClickDOM?

==<HTML lang="en">

? <head>...</head>

▼ <body>

^,1

^l,

vinput type

效果:

Lorem ipsum dolor sit amet.

^H

? <sc ript>...</sc ript>

匸[J] Elements Console Sources Network Performance Memory Application

</body></HTML>

这里我们通过点来设置了

元素的属性，一般情况下，建议使用这种方式来访问或设置属性。不过有些情况例外，因为这种方式只能设置或访问标签固有属性的值，而自定义的属性它是无法获取或设置的。比如给

元素设置

<p ID="testl属性就无法成功，这是因为 class=”def” title="p">Lorem ipsum dolor sit amet?v/p> vlabel ID="l.ab" for="username元素本身是没有>Click</‘label>

属性。如果采用二”password" name ID="username方法就可行。>

还需要注意的就是关键字命名的属性也需要特殊对待，例如

和

属性。

如果是DO M属性，因为这是一个关键字，所以需要通过＜p＞来进行 *** 作（这个上面已经介绍过了），如果是name属性，因为这也是一个关键字，所以需要通过vp＞来进行 *** 作。name9-7-4setAtt ri bute对于一些自定义属性，按照

的规范应该尽量使用class-作为前缀，比如给for元素添加 —个自定义属性

，应该设置为class,如下：classname<body>for<p ID="test1">Lorem ipsum dolor sit amet.</p> <script>HTMLForlet test1 = document.getElementByID("test1");

test1.setAttribute(‘data-power‘,‘high speed‘); </script>自定义属性

</body>H TML5效果：data <HTML lang="en">＜p＞? <head>...</head>power▼ <body>data-power <p ID="testl" data-power="high speed">Lorem ipsum dolor sit amet

v/p>

? <sc ript>...</sc ript>

</body>

</HTML>

如果要获取

属性，可以使用

里面的

方法来获取，例如：

<body>

<p ID="test1" data-power=‘high speed‘>Lorem ipsum dolor sit amet.</p> <script>?let test1 = document.getElementByID("test1");

let dataContent = test1.getAttribute(‘data-power‘); console.log(dataContent); // high speed </script>

</body>

getAtt ribute

setAtt ributedata-datasetDOMtest1.dataset.power = ‘high speed‘;getAtt ribute()这个

是每个元素节点都有的属性，它指向所有以

开头的属性集合。不过在获取或设置的时候不需要加上这个前缀。

如果

属性的名称包含连字符，那么需要使用驼峰命名法，示例如下：

<body>

除了使用<div ID="test" data-superman-power="strong and speed">和this is a test方法以外，还可以使用标签中的</div>属性，例如：

<script>

let one = document.getElementByID("test");datasetlet dataContent = one.dataset.supermanPower; console.log(dataContent);//strong and speed </script>data-</body>

*** 作data-每个元素节点都有一个

属性，通过这个属性就可以修改任何元素节点的样式规则。示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let test1 = document.getElementByID("test1"); test1.style.color = "red";

</script>

</body>

效果：

Lorem ipsum dolor sit amet.

9-8需要注意的是，在CSS

里面有一些属性是采用的横杠隔开的，例如：style,而如果要用

来修改样式的话，需要修改为驼峰命名法，也就是

,如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let i = document.body; i.style.backgroundcolor = "red";

</script>

</body>

效果：CSSLorem ipsum dolor sit amet.background-color 除了使用点的方法以外，也可以使用中括号来表示DOM属性，也就是说backg roundColo r 属性可以提供为一个字符串，而不需要必须使用驼峰命名法，示例如下：

<body>

<p ID="test1" >Lorem ipsum dolor sit amet.</p> <script>

let i = document.body; i.style[‘background-color‘] = "pink";

</script>

</body>

效果：

Lorem ipsum dolor sit amet

接下来我们来做一个练习，使用CSS来 *** 作一个元素显示和隐藏，如下:CSS<head>

<Meta charset="UTF-8">

<Title>document</Title>

<style>

#test{

wIDth: 200px;

height: 200px;

background-color: pink; margin-top: 5px;

}DOM</style>

</head>

<body>

vbutton onclick="show()">

/

v/button>

<div ID="test"></div>

vscript>

let test = document.getElementByID("test");

let show = function(){

if(test.style.display == ‘none‘)

{

test.style.display = ‘block‘;

}显示 else{隐藏 test.style.display = ‘none‘;

}

}

v/script>

v/body>

效果：点击后

盒子进行显示和隐藏

显

隐藏

上面介绍的

属性只适用于行内样式，也就是说，如果我们使用

来获取元素节点的属性的时候，它排除了最常用的来自于外部样式表的样式，不仅外部样式表的样式获取不到，连内嵌的样式也同样无法获取。证明如下：

<head>

<Meta charset="UTF-8">

<Title>document</Title>

<link rel="stylesheet" href="1.CSS">div<style>

p{TH/color: pink;

获取非行内样式和样式的检查

}style</style>style</head>

<body>

<p ID="test">Lorem ipsum dolor sit amet.</p>

<script>

let test = document.getElementByID("test"); console.log(test.style);

</script>

</body>

captionSIDe:""

caretcolor:

clear:""

^,H

clipPath:

CinRiile:

^11,1

[ color:""             ]

colorlnterpolation:""

^11,1

效果:

^H

columnCount:""

^l,N

clip: 可以看到，这里我们通过内嵌样式表给

元素节点设置了一个颜色的样式，但是当我们通过

属性访问元素节点的样式时，

属性显示的却为空。

我们可以通过

colorl nterpolati on Filters: 来获取到一个网页中所有样式表的引用。例如这里我们尝试来获取一个网页中内嵌的样式规则，示例如下：

colorRendering: vhead>"

vMeta charset="UTF-8"> vTitle>documentv/Title> vstyle>

columnFill: p{

color: red;vp>}stylediv{vp>color: blue;colo r}

v/style>document.styleSheetsv/head>

vbody>

vp>Lorem ipsum dolor sit amet.v/p>

vdiv>Lorem ipsum,dolor sit amet consectetur adipisicing elit.v/div> vscript>

let CSSRules = document.styleSheets[0].CSSRules; console.log(CSSRules);

v/script>

v/body>

为样式表指定了一个称为

的集合，该集合里面包含了内嵌样式表表中定义的所有

规则，效果如下：

▼ CSSRuleList {0: CSsstyleRule,1: CSsstyleRule,length: 2} Q

(

csstext:

"p { color: red; }"

|

_f

style: CSssty LeDecla ration {0: "color",alignContent:        alignltems:          alignSelf:           alignment Baseline:       all:           ...}

DOMtype: 1CSSRules?_proto_: CSsstyleRule

CSS¥

CSsstvleRule

color: bparentStyleSheet: CSsstyleSheet {ownerRule: null,...} selectorText: "div"style: CSsstyLeDeclaration {0: "color",alignContent:          alignltems:          alignSelf:           alignmentBaseline:        all:           ...}type: 1parentRule: null

? parentStyleSheet: CSsstyleSheet {ownerRule: null,CSSRules: CSSRuleList,rules: CSSRuleList,type: "text/CSS"?_proto_: CSsstyleRule href: null,...} selectorText: "p"

? length: 2

? _proto_: CSSRuleList

可以看到这里成功获取到了内嵌样式表。

▼ 如果是外部样式表，一样的可以通过来获取到样式表的引用，示例如

fcsstext: "div { 下：lue; }"] parentRule: null

? 注意：无法像内嵌样式表一样通过

? 属性来进一步获取到样式的具体规则。只会返回一^?

。

<head>

<Meta charset="UTF-8">

<Title>document</Title>

<link rel="stylesheet" href="1.CSS">

<link rel="stylesheet" href="2.CSS">document.styleSheets</head>

<body>

<p>Lorem ipsum dolor sit amet.</p>CSSRules<div>Lorem ipsum,dolor sit amet consectetur adipisicing elit.</div> <script>nulllet CSSRules1 = document.styleSheets[0]; console.log(CSSRules1);

let CSSRules2 = document.styleSheets[1]; console.log(CSSRules2);

let CSSRules3 = document.styleSheets[0].CSSRules; console.log(CSSRules3);

</script> </body>

效果：

CSsstyleSheet {ownerRule: null,CSSRules: null,rules: null,type: "text/CSS‘‘,href: "file:///Users/Jie/Desktop/1.css",...}

^lt

null

我们可以通过

方法可以返回一个元素节点的所有样式信息。这是一个只读的属性，只能用于查找一个元素的样式信息，示例如下：

<head>

<Meta charset="UTF-8"> <Title>document</Title>

<link rel="stylesheet" href="1.CSS">

<style>

p{

? color: pink;

? CSsstyleSheet {ownerRule: null,type: }text/CSS",href: "file:///Users/Jie/Desktop/2.css",...}

</style>

</head>getComputedStyle()<body>

<p ID="test">Lorem ipsum dolor sit amet.</p> <script>

let test = document.getElementByID("test");

let i = getComputedStyle(test); console.log(i);

</script>

</body>

效果：

¹

¹

¹

¹

L r

¹

^u

¹¹

¹

¹

CSsstyIEDeclaration {0: "animation-delay",1: "animation-direction‘‘,2: "animation-duration",3: "animation-fi11- mode",4: "animation-iteration-count‘‘,5: ‘‘animation-name",6: "animation-play-state",7: "animation-timing- function",8: "background-attachment",9: ‘‘background-blend-mode‘¹¹,10: "background-clip‘*,11: "background-color",12: "background-image‘‘,13: ‘‘background-origin‘‘,14: "background-position",15: ‘‘background-repeat‘^u,16: "backgroundsize‘‘,17: "border-bottom-color",18: "border-bottom-left-radius",19: "border-bottom-right-radius¹¹‘,20: "borderbottom-style",21: "border-bottom-wIDth",22: "border-collapse",23: ‘‘border-image-outset",24: "border-image- repeat",25: ‘‘border-image-slice",26: "border-image-source",27: "border-image-wIDth",28: "border-left-color‘^u,29: "border-left-style",30: "border-left-wIDth‘‘,31: ‘‘border-right-color",32: "border-right-style",33: "border-right- wIDth",34: "border-top-color",35: "border-top-left-radius",36: "border-top-right-radius",37: "border-top

,38: "border-top-wIDth",39: "bottom",40: "Box-shadow",41: "Box-sizing",42: ‘‘break-after",43: "break- ¹efore". 44: "break-insIDe",45: "caption-sIDe",46: "clear",47: "clip",48: "color",49: "content",50:

"cursor",51: "direction",52: "display",53: "empty-cells‘*,54: ‘‘float",55: "Font-family",56: "Font-kerning",57: "Font-size",58: "Font-stretch",59: "Font-style",60: "Font-variant",61: "Font-variant-ligatures",62: ‘‘Font- variant-caps‘可以看到，在调用,63: "Font-variant-numeric",64: 方法以后，返回了一^个Font-weight",65: ‘‘height",66: 对象。该对象就包含了已经应用到该元素节点上的所有 image-rendering",67:

"isolation‘样式的属性键值对。,68: "justify-items",69: "justify-self",70: "left",71: "letter-spacing",72: "line-height我们可以点击左边的小三角将其展开，就可以看到每个*,73: "Liststyle-image‘‘,74: "List-style-position",75: " List-style-type",76: "margin-bottom‘*,77: "margin-left",78: "marginright",79: "margin-top",80: "max-height属性所对应的值,81: "max-wIDth",82: "min-height",83: "min-wIDth¹¹,84: "mix-blend-mode",85: "object-fit",86: "object-position",87: "offset-distance",88: "offset-path‘‘,89: "offset-rotate",90: "opacity",91: "orphans‘*,92: "outline-color",93: "outline-offset",94: "outline-style‘‘,95: "outline-wIDth",96: "overflow-anchor",97: "overflow-wrap",98: clipRule: overflow-x",99: "nonzero"overflow-y‘^H,...}

_ygetComputedStyle()0CSsstyleDeclaration)CSS¹¹

") CSS¹¹

clipPath: "none¹¹

最后，需要特别说明一下的是，虽然我们可以通过提供的接口轻松的改变元素节点的样式，但是，动态的改变元素的类，并且将每个类的相关样式保存在单独的样式表里面才是更好的做法。

[color: 也就是说，相比：rgb(255<body> 0,<p ID="test">Lorem ipsum dolor sit amet.</p> <script>let test = document.getElementByID("test"); test.style.color = ‘red‘;</script> </body>更好的做法是：colorlnterpolation: "sRGB<head>colorlnterpolationFilters: <Meta charset="UTF-8"> <Title>document</Title> tinea rRGB" colorRendering: "auto"

<link rel="stylesheet" href="1.CSS"> </head> <body>DO M<p ID="test">Lorem ipsum dolor sit amet.</p> <script>

let test = document.getElementByID("test"); test.classList.add(‘newStyle‘);//

</script>

</body>

然后在一个样式表里面(这里的

添加如下的

.newStyle{ color: red;

*** 作表格

在实际开发中，经常会涉及到对表格的 *** 作。在

里面，

对象就代表着

中的一个表格。在为元素添加一个新的类文档中，

标签每出现一次，就代表着一个

对象被创建。l.CSS)9-9-1CSS

我们知道，一个表格是由行和列组成的，我们可以通过

9-9和

来获取到一个表格对象的行与列DOM示例如下：table<body>HTML<table border="1" ID="tab">HTML<tr>vtable><td> tablev/td>

<td> 获取表格的行和列

v/td>rowsv/tr>cellsvtr>

<td>

v/td>

vtd>18v/td>

v/tr>

vtr>姓名 <td>

v/td>年龄 vtd>20v/td>

v/tr>

v/table>

vscript>谢杰 let tab = document.getElementByID("tab");

console.log(tab .r ows);//

//获取表格的列数，需要具体到某一行

console.log(tab.rows[0].cells);

//获取表格里面一个单元格雅静 console.log(tab. rows[1].cells[0]);//vtd>

</td>

//获取表格里面一个单元格的具体的值

console.log(tab .ro ws[1].cells[0].inne rText);//

v/script>

v/body>

效果:获取表格的行数

?

(3)

[tr,tr,tr]

?谢杰(2)

[td,td]

<td> 谢杰 v/td>

谢杰

如果需要修改表格里面的内容，只需要定位到具体的单元格然后重新赋值即可，如下:

<body>   <table border="1" ID="tab"> <tr>vtd>

v/td>   vtd> v/td> v/tr> vtr>

<td> 谢杰 </td> vtd>18v/td> v/tr> vtr>

<td>

</td> vtd>20v/td> v/tr> v/table> vscript>

let tab = document.getElementByID("tab");

tab. rows[2].cells[0].innerText =

v/script>姓名 v/body>

年龄 9-9-2

前面有讲过，数组里面的二维数组，就类似于一个表格。既然遍历二维数组需要双层谢杰循环。那么自然遍历表格的内容也是使用双层

循环来搞定的，具体示例如下：雅静 vbody>

vtable border="1" ID="tab">

vtr>"小宋"； vtd>

</td>

效果:

vtd>

v/td>遍历表格的内容

</tr>forvtr>for<td>

</td> vtd>18v/td>

v/tr>

vtr>

<td> 姓名 </td> vtd>20v/td>

v/tr>年龄 v/table>

vscript>

let tab = document.getElementByID("tab");

for(let i=0;ivtab.rows.length;i++)谢杰 {

for(let j=0;jvtab.rows[i].cells.length;j++)

{ console.log(tab.rows[i].cells[j].innerText);

}雅静 } v/script>

v/body>

效果：

姓名

年龄

谢杰

18

雅静

表格插入新的行与列

在

里面提供了

以及

这两个方法来为表格插入行与列，语法如

下：

:在表格对象的指定位置上插入一^新行。

:在

集合中的指定位置上插入一个新的单元格。

示例如下：

20

9-9-3vbody>

vtable border="1" ID="tab">DOMvtr>inse rtRow()vtd> inse rtCell()</td>

vtd>

inse rRow(position)</td>

inse rtCell(postion)</tr>rows<tr>

vtd>

v/td> <td>18</td>

v/tr>

vtr>

<td> 姓名 v/td> vtd>20v/td>

v/tr>年龄 v/table>

vscript>

let tab = document.getElementByID("tab");//

tab.inse rtRow(3);//谢杰 4

在第

行的第

列添加文本内容雅静 tab.rows[3].insertCell(0).appendChild(document.createTextNode("

);

在第

行的第

列添加文本内容获取到表格对象

tab.rows[3].insertCell(1).appendChild(document.createTextNode("1")); v/script>插入第v/body>行

//效果:4 19-9-4

既然有增加表格的行与列，那么必然会有删除一个表格的行与列。在希之") 中也是提供了对应的两个方法，如下：

//deleteRow(postion):4deleteCell(postion):2示例如下：

vbody>

vtable border="1" ID="tab"> vtr>

<td>

姓名

年龄

谢杰

18

雅静

20

希之

1

v/td>

<td> 删除行与列

v/td> v/tr> vtr>DOMvtd>

v/td>删除表格对象上指定位置的一行。

<td>18</td>删除在rows集合中指定位置上的一个单元格。

</tr>

<tr>

vtd>

v/td>姓名 <td>20</td>

v/tr>年龄 v/table>

vscript>谢杰 let tab = document.getElementByID("tab");//

tab.deleteRow(2);//

3

tab .r ows[1].deleteCell(1);//

2雅静 2

v/script>

v/body>

9-9-5

通过上面我们给大家所介绍的表格属性以及方法，大家已经能够对页面里面的表格实现最基本的增删改查 *** 作了。但是除了上面所介绍的属性和方法以外，实际上获取到表格对象里面还提供了其他很多表格相关的属性和方法。这里以表格的形式列举出来，如下：删除表格对象中的第表格的属性或方法行作用删除表格对象中第caption行的第＜caption＞个单元格 thead

＜thead＞

效果:

tBodIEs

＜tbody＞表格其他相关属性和方法

tFootDO M＜tFoot＞

rows

表格中所有行的集合

cells

指向—行里面所有单元格的集合元素（如果存在）

createCaption。

指向＜caption＞元素（如果存在）

createTheadO

指向＜thead＞元素（如果存在）

createTFoot。

指向＜tFoot＞元素（如果存在）

deleteCaption。

＜caption＞

deleteThead()

vthead＞

deleteTFoot。

创建vtFoot＞元素并将其放入表格

insertRow(postion)

创建在表格对象的指定位置上插入一个新行元素并将其放入表格

deleteRow(postion)

创建删除表格对象上指定位置的一行元素并将其放入表格

insertCell(postion)

删除在rows集合中的指定位置上插入一个新的单元格元素

deleteCell(postion)

删除删除在rows集合中指定位置上的一个单元格元素

删除上面表格中所展示的属性和方法，有一部分是我们在介绍对表格做增删改查 *** 作时所介绍过的,而有些则没有进行具体介绍，但是基本用法都是大同小异的，所以这里不再做具体演示。元素

是文档对象模型。将

整个文档看作是一个对象，而一个文档又是又一个个元素节点对象组成。

2.

DOM

DOM 0

DOM 4

节点有不同的节点名称和节点类型。

在

级中提供了一组方法来访问到页面中常见的元素，例如图像，链接和表单等。

从

1.    DOM级开始提供了一组可以快速定位节点位置的方法。HTML在

级之前，通常使用节点之间的关系来对节点进行查找。     7.的历史可以分为nodeValue级到textContent级。

3.     innerText

4.     INNERHTMLDOM 0对节点的 *** 作无非就是增删改查，

5.     中提供了大量的方法可以让我们很方便的实现这些功能。DOM 2通过

6.     我们也能够获取和设置元素节点的属性以及类。DOM 2利用

我们还可以很轻松的实现修改元素节点的样式，改变它们的    在定位到具体的节点之后，我们可以通过规则。、中还专门提供了一组表格相关的属性和方法让我们很轻松的对表格数据实现增删改查。、以及来获取节点内部的值。

8.    DOM

9.     DOM

10.    DOMCSS

11.    DOM
总结
以上是内存溢出为你收集整理的DOM介绍全部内容，希望文章能够帮你解决DOM介绍所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1056838.html

DOM介绍

发表评论

评论列表（0条）

rows	表格中所有行的集合
cells	指向—行里面所有单元格的集合元素（如果存在）
createCaption。	指向＜caption＞元素（如果存在）
createTheadO	指向＜thead＞元素（如果存在）
createTFoot。	指向＜tFoot＞元素（如果存在）
deleteCaption。	＜caption＞
deleteThead()	vthead＞
deleteTFoot。	创建vtFoot＞元素并将其放入表格
insertRow(postion)	创建在表格对象的指定位置上插入一个新行元素并将其放入表格
deleteRow(postion)	创建删除表格对象上指定位置的一行元素并将其放入表格
insertCell(postion)	删除在rows集合中的指定位置上插入一个新的单元格元素

deleteCell(postion)	删除删除在rows集合中指定位置上的一个单元格元素
	删除上面表格中所展示的属性和方法，有一部分是我们在介绍对表格做增删改查 *** 作时所介绍过的,而有些则没有进行具体介绍，但是基本用法都是大同小异的，所以这里不再做具体演示。元素
是文档对象模型。将	整个文档看作是一个对象，而一个文档又是又一个个元素节点对象组成。
2.	DOM
DOM 0	DOM 4
节点有不同的节点名称和节点类型。	在