大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

一、DOM简介

D——document，没有文档，也就是没有网页，DOM就无从谈起。

当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。

O——object，对象。

对象有三种，

1、用户自定义对象

2、内建对象，javascript中的对象，如Array，Math，Date等。

3、宿主对象，由浏览器提供的对象，如window对象。

M——model，模型。

正如一个火车模型代表一列真正的火车，DOM代表被加载到浏览器窗口里的当前网页。浏览器为我们提供了当前网页的模型，可通过javascript去读写它。

所以DOM(Document Object Model)，文档对象模型，可以简单理解为代表网页文档的一颗树（模型）。

二、nodeName、nodeValue以及nodeType和innerHTML和value

DOM将网页表示为一颗树，该树的节点类型有多种。

元素节点——html标签

文本节点——文本

属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。（元素节点（属性节点，文本节点））

通常可以通过开发者工具（如firebug）查看dom结构，但是要说明一点，开发者工具中的DOM并不完整，因为有些元素存在于DOM中，但是不会被开发者工具显示。比如回车会被当做一个文本节点。

点我查看DOM中的空白符

1、nodeType

DOM本质就是一堆节点的集合，由于包含不同类型的信息，所以就有不同类型的节点。接下来看nodeType。

元素节点，nodeType为1

属性节点，nodeType为2

文本节点，nodeType为3

文档节点，nodeType为9

Note：文档节点并不是根元素(html)，因为注释等内容可以出现在根元素之外。所以在构造DOM树时，根元素并不适合作为根节点，所以就出现了文档节点，而根节点作为文档节点的子节点。

<body>
<p id="p">段落</p>
<script type="text/javascript">
    var element=document.getElementById("p");
    var text=document.getElementById("p").firstChild;
    var property=document.getElementById("p").getAttributeNode("id");
    console.log("元素节点nodeType返回值"+element.nodeType);
    console.log("文本节点nodeType返回值"+text.nodeType);
    console.log("属性节点nodeType返回值"+property.nodeType);
    console.log("文档节点nodeType返回值"+document.nodeType);
</script>
</body>

这里我要重点说一下属性节点。先上一张图：

图是w3schools教程中的，属性节点（红色框）的画法是很特别的，我第一次看教程没看懂为什么要这么画？难道其中有隐情？但是教程也都没有提及。

可能很多人没注意，我现在来说一下。

因为属性节点实际上是附属于元素的，所以不被看做是元素的子节点，因为并没有被当做是DOM的一部分。在属性节点上调用parentNode，previousSibling和nextSibling都返回null。

<body> <p id="p">段落</p> <script type="text/javascript"> var element=document.getElementById("p"); console.log("<p>的子节点是 "+element.firstChild); var property=document.getElementById("p").getAttributeNode("id"); console.log("属性节点的parentNode "+property.parentNode); console.log("属性节点的左邻节点 "+property.previousSibling); console.log("属性节点的右邻节点 "+property.nextSibling); </script> </body>

所以w3schools的画法也就可以理解了，属性节点不是子节点，所以“随便”挂到元素节点上。

nodeType属性经常和if配合使用，确保不会在错误的节点类型上执行错误的操作。比如

<script type="text/javascript">
window.onload=function(){
    var mynode=document.getElementById("p");
    if(mynode.nodeType==1){
        mynode.setAttribute('title','段落');
        mynode.style.color="red";
    }
}
</script>

补充内容:

值——元素类型

1——元素节点，表示文档中元素，元素节点是唯一能够拥有属性的节点类型。元素和属性的文本内容都是由文本节点来表示的。

2——属性节点，代表元素的属性。

3——文本节点，只包含文本内容，也可以只包含空白。

4——CDATA段节点。

5——ENTITY REFERENCE实体引用节点。实体引用节点可以被用于表示DOM树中的一个实体引用。

6——ENTITY实体节点，表示文档中已分析或未分析的实体。

7——PI（processing instruction）处理指令节点，

8——注释节点，表示注释的内容。

9——文档节点(DOCUMENT)，文档树的根节点。

10——DOCUMENT TYPE文档类型节点。

11——DOCUMENT FRAGMENT文档片段节点，文档片段是”轻量级的”或”最小的”Document对象。

12——NOTATION记号节点表示了在DTD中声明的记号。

w3c12种nodeType

2、nodeName

对于元素节点，nodeName就是标签名。元素节点也可以通过tagName获取标签名。【update 20170315】

对于文本节点，nodeName永远是#text

对于属性节点，nodeName是属性名称

对于文档节点，nodeName永远是#document

注意：

nodeName是一个只读属性，不能进行设置。

nodeName所包含的XML元素的标签名称永远是大写的。

<body>
<p id="p">段落</p>
<script type="text/javascript">
    var element=document.getElementById("p");
    var text=document.getElementById("p").firstChild;
    var property=document.getElementById("p").getAttributeNode("id");
    console.log("元素节点nodeName返回值"+element.nodeName);/*元素节点返回标签名P*/
    console.log("文本节点nodeName返回值"+text.nodeName);/*文本节点永远返回#text*/
    console.log("属性节点nodeName返回值"+property.nodeName);/*返回属性名，这里是id*/
    console.log("文档节点nodeName返回值"+document.nodeName);
</script>
</body>    
</html>

3、nodeValue

对于元素节点，因为本身不直接包含文本，所以nodeValue是不可用的。

对于文本节点，nodeValue值为文本值

对于属性节点，nodeValue值为属性值

<body>
<p id="p">段落</p>
<script type="text/javascript">
    var element=document.getElementById("p");
    var text=document.getElementById("p").firstChild;
    var property=document.getElementById("p").getAttributeNode("id");
    console.log("元素节点nodeValue返回值"+element.nodeValue);
    console.log("文本节点nodeValue返回值"+text.nodeValue);
    console.log("属性节点nodeValue返回值"+property.nodeValue);
    console.log("文档节点nodeValue返回值"+document.nodeValue);
</script>
</body>    
</html>

下面是一个关于nodeType,nodeName和nodeValue的综合demo。

<body> <h1 id="h1">An HTML Document</h1> <p><input id="elementNode" type="button" value="查看元素节点的各项值"></p> <p><input id="text" type="button" value="查看文本节点的各项值"></p> <p><input id="documentNode" type="button" value="查看文档节点的各项值"></p> <p><input id="property"type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="property" value="本按钮的属性节点演示" /></p> <script type="text/javascript"> function showElement(){ var element=document.getElementById("h1"); alert('nodetype:'+element.nodeType);//nodeType=1  alert('nodeName:'+element.nodeName); alert('nodeValue:'+element.nodeValue); //null  alert('element:'+element); } function showText(){ var element=document.getElementById("h1"); var text=element.childNodes[0]; alert('nodeType:'+text.nodeType); //nodeType=3  alert('nodeValue:'+text.nodeValue); //文本节点的nodeValue是其文本内容  text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。  alert('nodeName:'+text.nodeName); alert(text.data); //data同样是其内容,这个属性下同样可以增删改。  } function showDocument(){ alert('nodeType:'+document.nodeType); //9  alert('nodeName:'+document.nodeName); alert(document); } function showAttr(){ var property=document.getElementById("property"); //演示按钮，有很多属性  var attrs=property.attributes; for(var i=0;i<attrs.length ;i++){ var attr=attrs[i]; alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2  alert('attr:'+attr); alert('attr.name:'+attr.name+'='+attr.value); } } function demo(){ var element=document.getElementById("elementNode"); element.onclick=showElement;//按钮1获取节点的nodeType值 var text=document.getElementById("text"); text.onclick=showText; var documentNode=document.getElementById("documentNode"); documentNode.onclick=showDocument; var property=document.getElementById("property"); property.onclick=showAttr; } window.onload=demo; </script> </body>

View Code

4、innerHTML

innerHTML只对元素节点有用，获取元素节点内容，也就是元素节点包含的文本节点的值。其他节点使用nodeValue。

<body> <p id="p">p标签的内容</p> <script> var p=document.getElementById("p"); console.log(p.innerHTML); console.log(p.firstChild);//p的第一个子节点是文本节点 console.log(p.firstChild.innerHTML);//无效 console.log(p.firstChild.nodeValue);//使用nodeValue进行访问 </script> </body>

5、value

尽管innerHTML只对元素节点有用，但不是所有的元素节点都能使用innerHTML，比如像<input> 这样的替换元素。

<label>姓名：<input type="text" value="lxy" /></label> <script> var oinput=document.getElementsByTagName("input")[0]; console.log("oinput.innerHTML "+oinput.innerHTML);//没有内容 console.log("oinput.value "+oinput.value);//获取input的value属性 </script>

其实很好理解，因为input里面不包含文本节点，所以用innerHTML获取不到文本节点的值。可使用value获取其属性值。

类似的，form里的DOM元素（input select checkbox textarea radio）值获取时都使用value。

textarea虽然可以访问innerHTML,但是获取的是初始文档中的值，当页面的textarea中的值发生变化时，innerHTML不会及时更新。有兴趣可自己写demo测试。

三、HTML DOM 访问节点

DOM的思想就是每个节点都是对象，是对象我们就可以通过一些方法获取它或者改变它的属性等。

可以通过多种方法来查找DOM元素：

a、使用getElementById()和getElementByTagName()和getElementsByClassName()方法

b、通过一个元素节点的parentNode、childNodes、children、firstChild和lastChild和previousSibling和nextSibling

c、通过document.documentElement和document.body

1、getElementById()和getElementsByTagName()和getElementsByClassName()和getElementsByName()

这四种方法会忽略文档的结构。

getElementById()不多说。

getElementsByTagName()使用指定标签名返回所有元素，这些元素是调用该方法的元素的后代。

getElementsByClassName()返回带有指定类名的所有元素的节点列表。

getElementsByName()根据元素的name属性返回所有元素的节点列表。(IE容错能力较强，会得到一个数组，其中包括id等于name值的。我还没测试)

<body> <span class="class">span标签内容</span> <p class="class">p标签的内容</p> <script> var aclass=document.getElementsByClassName("class"); for(var i=0;i<aclass.length;i++){ console.log(aclass[i].innerHTML); } </script> </body>

还有一些方法是和文档结构相关的，因为DOM树中的节点是紧密相连的

上——parentNode

下——childNodes/children，firstChild,lastChild

左/右——previousSibling/nextSibling

2、childNodes

childNodes保存子节点的引用，包括空白也在内（除了IE<9），也包括<script>在内。

<!DOCTYPE HTML> <!-- My document --> <html> <head> <title>My Document</title> </head> <body> <h1>Header</h1> <p> Paragraph </p> <script type="text/javascript"> window.onload=function(){ var childNodes=document.body.childNodes; for(var i=0;i<childNodes.length;i++){ console.log(childNodes[i]); } } </script> </body> </html>

在chrome中效果如下，

3、children

如果只想获得子节点中的元素节点，跳过文本节点，应该使用children属性。

IE<9会在children属性中列出注释节点。

还是上面的例子，将document.body.childNodes改为document.body.children;效果如下：

使用childNodes和children获得是一个集合，想要获得单个元素，可以使用一些快速的索引siblings、parent等。

4、firstChild和lastChild

firstChild和lastChild是childNodes中首尾节点的快速索引。

var body=document.body; alert(body.firstChild===body.childNodes[0]);//true alert(body.lastChild===body.childNodes[body.childNodes.length-1]);//true

对firstChild最普通的用法是访问某个元素节点的文本：

var x=[a paragraph]; var text=x.firstChild.nodeValue;

小技能：

写代码检查DOM节点是否为空，就是说没有children或者文本。可用以下三种方法”

if (elem.childNodes.length) { ... } if (elem.firstChild) { ... } if (elem.lastChild) { ... }//最快

5、parentNode，previousSibling和nextSibling

获取父节点或者左右相邻的节点。

可借助这些属性来更新DOM，增删元素。

parentNode属性常被用来改变文档的结构。假设希望从文档中删除带有id为”maindiv”的节点：

var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);

首先找到带有指定id的节点，再移至其父节点并执行removeChidld()方法。

现在有一个问题：

document.body.lastChild.nextSibling总是null吗？//是

同样document.body.children[0].previousSibling呢?//不一定，null或者文本。因为document.body.children[0]代表第一个元素节点，可能会有文本节点作为它 previousSibling。

6、特殊入口

访问DOM还有两个特别的入口——document.documentElement和document.body。

document.documentElement代表<html>元素。

document.body代表<body>元素，可以为null，比如在body没有呈现的时候引用就是null。

<head> <script type="text/javascript"> alert("head部分的body"+document.body);/*null*/ </script> </head>

四、HTML DOM 操作

1、创建新元素（节点）

createElement()//创建一具体的元素
createTextNode()//创建一个文本节点
createDocumentFragment()//创建一个DOM片段

createDocumentFragment()创建一个文档碎片，把所有的节点都加在上面，最后把文档碎片一次性添加到document中，比一次次修改DOM更高效。

查看createDocumentFragment()执行效率了解更多。

2、元素操作

a、更改元素内容

<body> <p id="p">p标签的内容</p> <script> var p=document.getElementById("p"); alert("暂停观察"); p.innerHTML="内容替换了"; </script> </body>

还可以直接给文本节点的nodeValue赋值。

比如：p.firstChild.nodeValue=”再次更新文字”

b、新增元素(appendChild和insertBefore)

appendChild()将新元素作为父元素的最后一个子元素。

<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); var newP=document.createElement("p"); var text=document.createTextNode("新增的p标签的内容"); newP.appendChild(text); p1.parentNode.appendChild(newP); </script> </body>

insertBefore()通过父元素调用，将第一个元素插入第二个元素前面

<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); var newP=document.createElement("p"); var text=document.createTextNode("新增的p标签的内容"); newP.appendChild(text); p1.parentNode.insertBefore(newP,p1);//通过父p1的父元素将newP插入到p1的前面 </script> </body>

c、移除元素removeChild

DOM中删除元素，必须通过父元素进行操作。

<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); alert("暂停观察"); p1.parentNode.removeChild(p1); </script> </body>

d、替换元素replaceChild

替换元素也必须通过父元素来进行，接收2个参数，和insertBefore类似，用第一个参数替换第二个。

<body> <p id="p1">p标签的内容</p> <script> var p1=document.getElementById("p1"); var p2=document.createElement("p"); var text=document.createTextNode("替换的文本"); p2.appendChild(text); alert("暂停观察"); p1.parentNode.replaceChild(p2,p1); </script> </body>

可见DOM结构的改动（增删改）都是通过父节点来进行的。

e、一个综合demo

通过InnerHTML更改元素内容，通过appendChild新增元素，通过removeChild移除元素。

<body> <input type="text" id="text"/> <input type="button" value="添加li" id="button"> <ul> </ul> <script> window.onload=function(){ var obutton=document.getElementById("button"); obutton.onclick=createLi; } function createLi(){ var oText=document.getElementById("text"); var oUl=document.getElementsByTagName("ul")[0]; var oLi=document.createElement("li"); oLi.innerHTML=oText.value; var oA=document.createElement("a"); oA.innerHTML="删除"; oA.href="javascript:;"; oA.onclick=function(){ oUl.removeChild(this.parentNode); } oLi.appendChild(oA); oUl.appendChild(oLi); } </script> </body>

3、特性操作

用getAttribute()，setAttribute()和removeAttribute()控制HTML标签的特性。

<body> <a href="#">starof</a> <script type="text/javascript"> var a=document.getElementsByTagName("a")[0]; alert(a.getAttribute("href")); a.setAttribute("href","http://www.cnblogs.com/starof"); alert(a.getAttribute("href")); a.removeAttribute("href"); alert(a.getAttribute("href")); </script> </body>

通过setAttribute更改样式：（就是重置内联样式）

不是p1.setAttribute(“color”,”green”);

而是p1.setAttribute(“style”,”color:green;background-color:orange;”);

因为setAttribute的修改是动态的，所以查看源代码时看不到！

4、样式操作

obj.style.属性=属性值，是通过添加内联样式去覆盖已有样式的。

修改文字颜色为红色

<body> <p id="p">p标签的内容</p> <script> var p=document.getElementById("p"); alert("暂停观察"); p.style.color="red"; </script> </body>

5、事件操作

DOM对HTML事件做响应。

事件处理的工作机制：

在元素添加了事件处理函数后，一旦预定事件发生，相应的JavaScript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。

比如给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript返回给onclick事件处理函数的值是true，onclick事件处理函数将认为“这个链接被点击了”；反之如果那段JavaScript代码返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个函数没有被点击”。

可以拿下面代码验证：

<a href=”http://www.baidu.com” onclick=”return false;”>click me</a>

关于事件这部分内容太多，有兴趣可看

javaScript事件（一）事件流

javaScript事件（二）事件处理程序

javaScript事件（三）事件对象

javaScript事件（四）event的公共成员（属性和方法）

javaScript事件（五）事件类型之鼠标事件

五、资源链接

javascript教程

DOM中的空白符

w3c12种nodeType

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/168200.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

DOM「建议收藏」

一、DOM简介

二、nodeName、nodeValue以及nodeType和innerHTML和value

1、nodeType

2、nodeName

3、nodeValue

4、innerHTML

5、value

三、HTML DOM 访问节点

1、getElementById()和getElementsByTagName()和getElementsByClassName()和getElementsByName()

2、childNodes

3、children

4、firstChild和lastChild

5、parentNode，previousSibling和nextSibling

6、特殊入口

四、HTML DOM 操作

1、创建新元素（节点）

2、元素操作

a、更改元素内容

b、新增元素(appendChild和insertBefore)

c、移除元素removeChild

d、替换元素replaceChild

e、一个综合demo

3、特性操作

4、样式操作

5、事件操作

五、资源链接

发表回复

DOM「建议收藏」

一、DOM简介

二、nodeName、nodeValue以及nodeType和innerHTML和value

1、nodeType

2、nodeName

3、nodeValue

4、innerHTML

5、value

三、HTML DOM 访问节点

1、getElementById()和getElementsByTagName()和getElementsByClassName()和getElementsByName()

2、childNodes

3、children

4、firstChild和lastChild

5、parentNode，previousSibling和nextSibling

6、特殊入口

四、HTML DOM 操作

1、创建新元素（节点）

2、元素操作

a、更改元素内容

b、新增元素(appendChild和insertBefore)

c、移除元素removeChild

d、替换元素replaceChild

e、一个综合demo

3、特性操作

4、样式操作

5、事件操作

五、资源链接

相关推荐

Enterprise Library 2.0 — Logging Application Block (上)「建议收藏」

LoadRunner压力测试：测试报告结果分析

idea 2021.12激活-激活码分享

现代数字图像处理作业———对lena图像进行简单处理[通俗易懂]

spring cloud eurake server「建议收藏」

oracle创建表空间的SQL语句

发表回复