DOM常用节点类型汇总

合集下载

dom结构类型 -回复

dom结构类型-回复DOM结构类型简介及应用领域[DOM结构类型]是指文档对象模型（Document Object Model）中的三种基本节点类型：元素节点、文本节点和属性节点。

DOM是一种用于表示和处理网页文档的API，它将整个页面以一棵树的形式进行组织和访问，开发人员可以通过DOM接口来操作和修改页面的内容和样式。

DOM结构类型的应用非常广泛，以下将逐步介绍并深入讨论这三种节点类型的具体特点和应用领域。

第一步：元素节点元素节点是DOM树中的核心节点类型，代表HTML或XML文档中的各个标签。

每个网页都是由一个或多个元素节点组成的。

元素节点具有以下特点：1. 标签名：元素节点的名称由HTML或XML中的标签名决定，例如`<div>`、`<p>`、`<img>`等。

2. 属性：元素节点可以拥有零到多个属性，属性用于定义元素的额外信息，例如`<img src="image.jpg" alt="image">`中的`src`和`alt`就是该元素节点的属性。

3. 子节点：元素节点可以包含零到多个子节点，这些子节点可以是元素节点、文本节点或其他类型的节点。

元素节点广泛应用于网页开发中，通过操作元素节点，可以实现许多功能，例如：- 动态添加、删除或修改网页的各个元素，改变页面的结构和布局。

- 获取元素节点的属性值，例如修改或获取表单元素的值。

- 通过元素节点进行事件绑定，实现交互效果，例如点击一个按钮时触发某个事件。

第二步：文本节点文本节点是DOM树中的叶子节点，代表HTML或XML文档中的文本内容。

文本节点具有以下特点：1. 文本内容：文本节点的内容就是HTML或XML文档中的文本信息，例如`<p>Hello World</p>`中的`Hello World`就是该文本节点的内容。

2. 父节点：文本节点总是作为元素节点的子节点存在，没有直接包含其他节点。

jQueryDOM节点操作-父节点、子节点、兄弟节点

jQueryDOM节点操作-⽗节点、⼦节点、兄弟节点 -------------------------------------------------------------------⼦(/孙)节点: .children([selector]). 获得匹配元素集合中每个元素的所有直接⼦元素（选择器可选）。

实例:<div><a href="#"><span>welcome to </span>zhenheinfo</a><p id="p1">欢迎来到臻和信息</p><p id="p2">欢迎来到臻和信息</p></div>操作: $("div").children();结果: 得到<a></a>和<p></p>总共3个节点. 操作: $("div").children("#p1");结果: 得到<p id="p1"></p>节点. .find(selector). 获得当前匹配元素集合中每个元素的后代（选择器必须）。

实例:<div> <a href="#"><span>welcome to </span>zhenheinfo</a> <p id="p1">欢迎来到<span>臻和信息</span></p> <p id="p2">欢迎来到臻和信息</p> </div> 操作: $("div"). find ("span");结果: 得到2个<span></span>节点.兄弟节点:　.siblings([selector]). 获得匹配元素集合中所有元素的同辈元素（选择器可选）。

DOM笔记

DOM笔记一、节点信息1、nodeName此属性可返回节点的名称，根据其类型。

语法：currentNode.nodeName元素节点的nodeName是标签名称，属性节点的nodeName是属性名称，文本节点的nodeName永远是#text。

2、nodeType此属性可返回节点的节点类型。

语法：currentNode.nodeType元素节点的nodeType为1，属性节点的nodeType为2，文本节点的nodeType 为3。

3、nodeValue此属性可设置或返回某节点的值，根据其类型。

语法：currentNode.nodeValue对于文本节点，nodeValue属性包含文本，对于属性节点，nodeValue属性包含属性值，nodeValue属性对于元素节点是不可用的。

二、节点获取：1、通过顶层document节点(1)getElementById()此方法可返回对拥有指定 ID 的第一个对象的引用。

语法：document.getElementById(id)(2)getElementsByName()此方法可返回带有指定名称的对象的集合。

语法：document.getElementsByName(name)因为一个文档中的name属性可能不唯一，getElementsByName()方法返回的是元素的数组，而不是一个元素。

(3)dgetElementsByTagName()此方法可返回带有指定标签名的对象的集合。

语法：document.getElementsByTagName(tagname)如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

2、通过引用父子节点：(1)parentNode此属性可返回指定节点的父节点。

语法：currentNode.parentNode(2)childNodes此属性可返回指定节点的子节点的节点列表。

DOM节点的属性和方法

DOM节点的属性和⽅法DOMDOM 是 JavaScript 操作⽹页的接⼝，全称为“⽂档对象模型”（Document Object Model）。

它的作⽤是将⽹页转为⼀个 JavaScript 对象，从⽽可以⽤脚本进⾏各种操作（⽐如增删内容）。

它只是⼀个接⼝规范，可以⽤各种语⾔实现。

所以严格地说，DOM 不是 JavaScript 语法的⼀部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就⽆法控制⽹页。

另⼀⽅⾯，JavaScript 也是最常⽤于 DOM 操作的语⾔。

节点DOM 的最⼩组成单位叫做节点（node）。

⽂档的树形结构（DOM 树），就是由各种不同类型的节点组成。

每个节点可以看作是⽂档树的⼀⽚叶⼦。

节点的类型有七种。

Document：整个⽂档树的顶层节点DocumentType：doctype标签（⽐如<!DOCTYPE html>）Element：⽹页的各种HTML标签（⽐如<body>、<a>等）Attribute：⽹页元素的属性（⽐如class="right"）Text：标签之间或标签包含的⽂本Comment：注释DocumentFragment：⽂档的⽚段浏览器提供⼀个原⽣的节点对象Node，上⾯这七种节点都继承了Node，因此具有⼀些共同的属性和⽅法。

节点树所有的节点就好像组成了⼀棵树，⽽document节点就代表整个树也就是整个⽂档。

⽂档的第⼀层有两个节点，第⼀个是⽂档类型节点（<!doctype html>），第⼆个是 HTML ⽹页的顶层容器标签<html>。

后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。

除了根节点，其他节点都有三种层级关系。

⽗节点关系（parentNode）：直接的那个上级节点⼦节点关系（childNodes）：直接的下级节点同级节点关系（sibling）：拥有同⼀个⽗节点的节点DOM 提供操作接⼝，⽤来获取这三种关系的节点。

dom模型节点[整理版]

DOM 模型DOM 模型框架DOM 模型中的节点使用DOM innerHTMLDOM 模型框架文档对象模型(Document Object Model)定义了用户操作文档对象的接口，可以说DOM是自HTML 将网上相关文档连接起来后最伟大的创新，它使得用户对HTML 有了空前的访问能力。

<html><head><title>DOM Page</title></head> <body> <h2><a href=”#isaac ”>标题1</a></h2><p>段落1</p><ul id=”myUL ”><li>JavaScript</li> <li>DOM</li><li>CSS</li></ul></body></html>使用DOM 对其抽象。

可以通过一个节点遍历所有节点DOM 模型中的节点元素节点文本节点属性节点htmlhead bodyh2 p ulli li lia<a href=””>搜狐</a>元素节点ahref=””搜狐属性节点文本节点介绍DOM相关知识，如何使用DOM使用DOM<script>function searchDOM(){var oLi = document.getElementsByTagName("li");//输出长度、标签名称以及某项的文本节点值alert(oLi.length+" "+oLi[0].tagName+" "+oLi[3].childNodes[0].nodeV alue);var oUl = document.getElementsByTagName("ul");var oLi2 = oUl[1].getElementsByTagName("li");alert(oLi2.length+" "+oLi2[0].tagName+oLi2[1].childNodes[0].nodeV alue);}</script></head><body onLoad="searchDOM()">客户端语言<ul><li>HTML</li><li>JavaScript</li><li>CSS</li></ul>服务器端语言<ul><li></li><li>JSP</li><li>PHP</li></ul></body>父子节点访问元素后，知道某一个元素，通过父子关系，遍历所有元素<script>function myDOMInspector(){//获取<ul>标记var oUl = document.getElementById("myList");var DOMString = "";//判断是否有子节点if(oUl.hasChildNodes()){var oCh = oUl.childNodes;for(var i=0;i<oCh.length;i++){//依次查找DOMString += oCh[i].childNodes[0].nodeV alue + "\n";}}alert(DOMString);}</script></head><body onLoad="myDOMInspector()"><ul id="myList"><li>糖醋排骨</li><li>圆笼粉蒸肉</li><li>泡菜鱼</li><li>板栗烧鸡</li><li>麻婆豆腐</li></ul></body>访问节点getElementsByTagNamegetElementById节点的属性<script>function myDOMInspector(){//获取超链接var myLink = document.getElementsByTagName("a")[0];//获取超链接的href属性alert(myLink.getAttribute("href"));}</script></head><body onLoad="myDOMInspector()"><a href="">搜狐</a></body>除了对已有的节点进行访问，还可以创建新节点创建新节点<script>function createP(){var oP = document.createElement("p");var oText = document.createTextNode("这是一段感人的故事");oP.appendChild(oText);document.body.appendChild(oP);}</script></head><body onLoad="createP()"><p>事先写一行文字在这里，测试appendChild()方法的添加位置</p></body>innerHTMLinnerHTML这个属性由于使用方便，也得到了目前主流浏览器的支持该属性表示某个标记之间的所有内容，包括代码本身。

dom结构类型 -回复

dom结构类型-回复DOM结构类型是一种描述网页文档结构的标准。

它定义了一种方式来操作HTML或XML文档，使得开发者可以通过JavaScript等编程语言来访问和操作网页中的元素。

在本文中，我们将一步一步地回答有关DOM结构类型的问题，并深入探讨其在Web开发中的重要性和用途。

DOM结构类型指的是HTML或XML文档的层次结构。

它由不同类型的节点组成，这些节点之间有层级关系，并且可以通过DOM API进行访问和操作。

DOM结构类型主要分为以下几种：1. 文档节点（document）：文档节点是DOM树的根节点，在一个文档中只会有一个文档节点。

所有其他节点都是文档节点的子节点。

2. 元素节点（element）：元素节点是指HTML或XML文档中的标签元素，如<div>、<p>等。

元素节点可以包含其他节点作为子节点，并且可以设置属性和样式。

3. 文本节点（text）：文本节点是指元素节点中的文本内容，如<p>这是一个段落</p>中的“这是一个段落”。

文本节点没有子节点，但它可以是其他节点的子节点。

4. 属性节点（attribute）：属性节点是指元素节点中的属性，如<imgsrc="image.jpg">中的“src”属性。

属性节点是元素节点的一部分，其值可以通过DOM API进行读取和更改。

5. 注释节点（comment）：注释节点是指文档中的注释内容，如<! 这是一个注释>。

DOM结构类型的重要性和用途在于开发者可以使用DOM API来访问和操作网页的结构和内容。

通过使用DOM API，开发者可以执行各种操作，例如：- 动态添加、修改和删除网页的元素和属性：开发者可以使用DOM API 创建新的元素节点，设置元素属性，或通过修改DOM结构来改变网页的外观和行为。

- 获得和修改网页中的文本内容：开发者可以使用DOM API获取元素节点中的文本内容，并在需要时对其进行修改。

深入理解DOM节点类型第一篇——12种DOM节点类型概述

深⼊理解DOM节点类型第⼀篇——12种DOM节点类型概述前⾯的话 DOM是javascript操作⽹页的接⼝，全称为⽂档对象模型(Document Object Model)。

它的作⽤是将⽹页转为⼀个javascript对象，从⽽可以使⽤javascript对⽹页进⾏各种操作(⽐如增删内容)。

浏览器会根据DOM模型，将HTML⽂档解析成⼀系列的节点，再由这些节点组成⼀个树状结构。

DOM的最⼩组成单位叫做节点(node)，⽂档的树形结构(DOM树)由12种类型的节点组成。

本⽂将主要说明DOM节点类型总括⼀般地，节点⾄少拥有nodeType、nodeName和nodeValue这三个基本属性。

节点类型不同，这三个属性的值也不相同nodeType nodeType属性返回节点类型的常数值。

不同的类型对应不同的常数值，12种类型分别对应1到12的常数值元素节点 Node.ELEMENT_NODE(1)属性节点 Node.ATTRIBUTE_NODE(2)⽂本节点 Node.TEXT_NODE(3)CDATA节点 Node.CDATA_SECTION_NODE(4)实体引⽤名称节点 Node.ENTRY_REFERENCE_NODE(5)实体名称节点 Node.ENTITY_NODE(6)处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)注释节点 MENT_NODE(8)⽂档节点 Node.DOCUMENT_NODE(9)⽂档类型节点 Node.DOCUMENT_TYPE_NODE(10)⽂档⽚段节点 Node.DOCUMENT_FRAGMENT_NODE(11)DTD声明节点 Node.NOTATION_NODE(12) DOM定义了⼀个Node接⼝，这个接⼝在javascript中是作为Node类型实现的，⽽在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。

12种节点类型

12种节点类型DOM（文档对象模型）的12种节点类型包括：元素节点（ElementType）：元素节点对应网页的HTML标签元素，元素节点的节点类型值是1，节点名称值是大写的标签名。

属性节点（AttributeType）：属性节点表示元素的属性，节点类型值为2，节点名称值是属性的名称，nodeValue的值是属性对应的值。

文本节点（TextType）：文本节点表示元素的内容，节点类型值为3，节点名称值是null，nodeValue的值是文本内容。

注释节点（CommentType）：注释节点表示注释内容，节点类型值为8，节点名称值是null，nodeValue的值是注释内容。

文档节点（DocumentType）：文档节点表示HTML文档，也称为根节点，指向document对象。

文档片段节点（DocumentFragmentType）：文档片段节点表示文档片段，节点类型值为15，节点名称值是null，nodeValue的值是片段内容。

域节点（DomainType）：域节点表示域，节点类型值为16，节点名称值是域的名称，nodeValue的值是域的值。

属性节点（ProprietaryType）：属性节点表示专有属性，节点类型值为17，节点名称值是属性的名称，nodeValue的值是属性对应的值。

命名空间节点（NamespaceType）：命名空间节点表示命名空间，节点类型值为18，节点名称值是命名空间的名称，nodeValue的值是命名空间的URL。

CDATA节点（CharacterDataType）：CDATA节点表示字符数据，节点类型值为4，节点名称值是null，nodeValue的值是数据内容。

程序代码节点（ProcessingInstructionType）：程序代码节点表示处理指令，节点类型值为7，节点名称值是处理指令的名称，nodeValue 的值是处理指令的内容。

这种节点类型主要用于XML文档中，表示特定的程序指令。

DOM简介属性及操作

DOM的官方定义DOM Document Object Model 文档对象模型。

DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。

DOM只是一个标准，就是操作网页的标准。

而这个标准(模型)在浏览器中，以“对象”的方式实现。

DOM的分类●核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。

●HTMLDOM：针对HTML文档，提供的专有的属性和方法。

●XMLDOM：针对XML文档，提供的专有的属性和方法。

●EventDOM：事件DOM，提供了很多的常用事件。

●CSSDOM：提供了操作CSS的一个接口。

HTML节点树DOM中节点的类型：●document文档节点：代表整个网页，document文档节点不对应标记。

是访问文档中各元素的起点。

●element元素节点：元素节点对应于网页中的各标记。

●attribute属性节点：每个元素都有若干个属性。

●text文本节点：文本节点是最底层节点。

核心DOM公共属性和方法●nodeName：节点名称。

●nodeV alue：节点的值。

●firstChild：第一个子节点。

●lastChild：最后一个子节点。

●parentNode：父节点。

●childNodes：子节点列表，是一个数组。

节点访问为什么，document.firstChild找到的不是HTML节点呢？DOM是针对HTML4.01开发的。

我们现在是XHTML1.0。

所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。

为什么，node_body.firstChild找不到table节点？在Firefox下，会把空格或换行，当成一个文本节点。

因此，所有标记之间的空格和换行，都去掉。

查找html节点的方法●document.firstChild●document.documentElement(兼容性较好)查找body节点的方法●stChild●document.body(推荐使用)节点属性1、getAttribute()——获取属性的值●描述：获取节点属性的值。

深入理解DOM节点关系

深⼊理解DOM节点关系前⾯的话 DOM可以将任何HTML描绘成⼀个由多层节点构成的结构。

节点分为12种不同，每种类型分别表⽰⽂档中不同的信息及标记。

每个节点都拥有各⾃的特点、数据和⽅法，也与其他节点存在某种关系。

节点之间的关系构成了层次，⽽所有页⾯标记则表现为⼀个以特定节点为根节点的树形结构。

本⽂将详细描述DOM间的节点关系节点中的各种关系可以⽤传统的家族关系来描述，相当于把⽂档树⽐喻成家谱。

接下来，将把DOM节点关系分为属性和⽅法两部分进⾏详细说明属性⽗级属性parentNode 每个节点都有⼀个parentNode属性，该属性指向⽂档树中的⽗节点。

对于⼀个节点来说，它的⽗节点只可能是三种类型：element节点、document节点和documentfragment节点。

如果不存在，则返回null<div id="myDiv"></div><script>console.log(myDiv.parentNode);//bodyconsole.log(document.body.parentNode);//htmlconsole.log(document.documentElement.parentNode);//documentconsole.log(document.parentNode);//null</script><div id="myDiv"></div><script>var myDiv = document.getElementById('myDiv');console.log(myDiv.parentNode);//bodyvar fragment = document.createDocumentFragment();fragment.appendChild(myDiv);console.log(myDiv.parentNode);//document-fragment</script>parentElement 与parentNode属性不同的是，parentElement返回的是⽗元素节点<div id="myDiv"></div><script>console.log(myDiv.parentElement);//bodyconsole.log(document.body.parentElement);//htmlconsole.log(document.documentElement.parentElement);//nullconsole.log(document.parentElement);//null</script> [注意]在IE浏览器中，只有才有该属性，其他浏览器则是所有类型的节点都有该属性<div id="test">123</div><script>//IE浏览器返回undefined，其他浏览器返回<div id="test">123</div>console.log(test.firstChild.parentElement);//所有浏览器都返回<body>console.log(test.parentElement);</script>⼦级属性childNodes childNodes是⼀个只读的类数组对象，它保存着该节点的第⼀层⼦节点<ul id="myUl"><li><div></div></li></ul><script>var myUl = document.getElementById('myUl');//结果是只包含⼀个li元素的类数组对象[li]console.log(myUl.childNodes);</script>children children是⼀个只读的类数组对象，但它保存的是该节点的第⼀层元素⼦节点<div id="myDiv">123</div><script>var myDiv = document.getElementById('myDiv');//childNodes包含所有类型的节点，所以输出[text]console.log(myDiv.childNodes);//children只包含元素节点，所以输出[]console.log(myDiv.children);</script>childElementCount 返回⼦元素节点的个数，相当于children.length [注意]IE8-浏览器不⽀持<ul id="myUl"><li></li><li></li></ul><script>var myUl = document.getElementById('myUl');console.log(myUl.childNodes.length);//5，IE8-浏览器返回2，因为不包括空⽂本节点console.log(myUl.children.length);//2console.log(myUl.childElementCount);//2，IE8-浏览器返回undefined</script>firstChild 第⼀个⼦节点lastChild 最后⼀个⼦节点firstElementChild 第⼀个元素⼦节点lastElementChild 最后⼀个元素⼦节点　上⾯四个属性，IE8-浏览器和标准浏览器的表现并不⼀致。

DOM里常见的三种节点类型

DOM⾥常见的三种节点类型1.nodeName⽐tagName注意⼆者返回的是⼤写!⼤写!⼤写!从DOM层次来看，nodeName是接⼝上的property，⽽tagName是接⼝上的property，所有的节点（元素节点，属性节点，⽂本节点等12种）都继承了node 接⼝，⽽只有元素节点才继承了element节点，因此nodeName⽐tagName具有更⼤的使⽤范围。

⼀般地，节点⾄少拥有nodeType、nodeName和nodeValue这三个基本属性。

总结：tagName只能⽤在元素节点上，⽽nodeName可以⽤在任何节点上，可以说nodeName涵盖了tagName，并且具有更多的功能，因此建议总是使⽤nodeName。

nodeTypenodeType属性返回节点类型的常数值。

不同的类型对应不同的常数值，12种类型分别对应1到12的常数值元素节点 Node.ELEMENT_NODE(1)属性节点 Node.ATTRIBUTE_NODE(2)⽂本节点 Node.TEXT_NODE(3)CDATA节点 Node.CDATA_SECTION_NODE(4)实体引⽤名称节点 Node.ENTRY_REFERENCE_NODE(5)实体名称节点 Node.ENTITY_NODE(6)处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)注释节点 MENT_NODE(8)⽂档节点 Node.DOCUMENT_NODE(9)⽂档类型节点 Node.DOCUMENT_TYPE_NODE(10)⽂档⽚段节点 Node.DOCUMENT_FRAGMENT_NODE(11)DTD声明节点 Node.NOTATION_NODE(12)2.获得元素属性的集合：document.getElementsByTagName("BUTTON")[0].attributes;。

dom结构类型

dom结构类型DOM（文档对象模型）是一种用于表示和操作文档的树状结构的编程接口。

DOM 不是一种具体的编程语言，而是一种描述文档结构的标准。

它提供了一种将文档表示为树形结构的方式，其中每个节点都代表文档中的一个部分，如元素、属性、文本等。

在 DOM 结构中，常见的节点类型包括：1. 元素节点（Element Node）：表示 HTML 或 XML 文档中的元素，如 <div>、<p>、<a> 等。

元素节点可以有子节点，如其他元素、文本或属性。

2. 文本节点（Text Node）：表示元素中的文本内容。

文本节点是元素节点的子节点，包含在开始和结束标签之间。

3. 属性节点（Attribute Node）：表示元素的属性。

属性节点包含在元素节点内，描述了元素的特性。

4. 注释节点（Comment Node）：表示注释内容。

注释节点是一种特殊的文本节点，以  结束。

5. 文档节点（Document Node）：表示整个文档。

文档节点是DOM 树的根节点，包含文档的所有内容。

6. 文档类型节点（Document Type Node）：表示文档的类型声明。

这通常出现在文档的开头，使用 <!DOCTYPE>。

在使用 JavaScript 操作 DOM 时，可以通过 DOM API 提供的方法来访问和操作这些节点。

例如，使用 getElementById 方法可以获取指定ID 的元素节点，使用createTextNode 方法可以创建文本节点，等等。

通过这些方法，你可以动态地修改文档的内容和结构。

常用的dom方法

常用的dom方法常用的DOM方法包括以下几类：元素选择、节点操作、属性操作、样式操作、事件处理以及动画效果。

一、元素选择：DOM方法可以通过各种方式选择和访问页面上的元素节点。

1. getElementById(id)：根据元素的id属性值获取元素节点。

2. getElementsByClassName(className)：根据元素的类名获取元素节点。

3. getElementsByTagName(tagName)：根据元素的标签名获取元素节点。

4. querySelector(selector)：根据CSS选择器选择第一个匹配的元素节点。

5. querySelectorAll(selector)：根据CSS选择器选择所有匹配的元素节点。

二、节点操作：DOM方法可以对元素节点进行创建、插入、删除、替换等操作。

1. createElement(tagName)：创建一个具有指定标签名的元素节点。

2. createTextNode(text)：创建一个包含指定文本内容的文本节点。

3. appendChild(node)：将指定节点添加到父节点的子节点列表的最后一个位置。

4. insertBefore(newNode, referenceNode)：在参考节点之前插入新节点。

5. removeChild(node)：从父节点移除指定的子节点。

6. replaceChild(newNode, oldNode)：用新节点替换指定的子节点。

三、属性操作：DOM方法可以获取和修改元素节点的属性值。

1. getAttribute(name)：获取元素节点指定属性名的属性值。

2. setAttribute(name, value)：设置元素节点指定属性名的属性值。

3. removeAttribute(name)：移除元素节点指定属性名的属性值。

四、样式操作：DOM方法可以获取和修改元素节点的样式。

1. className：获取或设置元素节点的class属性值。

ASP DOM节点

ASP DOM节点所谓节点(node)，表示某个网络中的一个连接点，换句话说，网络是节点和连线的集合。

在W3C DOM中，每个容器、独立的元素或文本块都被看着一个节点，节点是W3C DOM的基本构建块。

当一个容器包含另一个容器时，对应的节点之间有父子关系。

同时该节点树遵循HTML的结构化本质，如<html>元素包含<head>、<body>，前者又包含<title>，后者包含各种块元素等。

DOM中定义了HTML文档中6种相关节点类型。

所有支持W3C DOM的浏览器（IE5+，Moz1和Safari等）都实现了前3种常见的类型，其中Moz1实现了所有类型。

如表8-3所示：具体来讲，DOM节点树中的节点有元素节点、文本节点和属性节点等三种不同的类型，下面进行具体介绍。

1．元素节点(element node )在HTML文档中，各HTML元素如<body>、<p>、<ul>等构成文档结构模型的一个元素对象。

在节点树中，每个元素对象又构成了一个节点。

元素可以包含其它元素是节点树的根节点。

2．文本节点(text node)在节点树中，元素节点构成树的枝条，而文本则构成树的叶子。

如果一份文档完全由空白元素构成，它将只有一个框架，本身并不包含什么内容。

没有内容的文包含“Welcome to”、“DOM”、“World!”三个文本节点。

在HTML 中，文本节点总是包含在元素节点的内部，但并非所有的元素节点都包含或直接包含文本节点，如“学生名单”中，<ul>元素节点并不包含任何文本节点，而是包含着另外的元素节点，后者包含着文本节点，所以说，有的元素节点只是间接包含文本节点。

3．属性节点(attribute node)HTML文档中的元素或多或少都有一些属性，便于准确、具体地描述相应的元在元素标签里，所以属性节点总是包含在元素节点中。

DOM节点的类型及判定

DOM节点的类型及判定
浏览器在解析 HTML ⽂档后，会将它转化为⼀个由各种节点组成的⽂档树。

例如下⾯的 HTML ⽂档
转化的 DOM ⽂档树基本是这样的（忽略⼀些空⽩⽂本节点）：
DOM 节点都是继承⾃ Node 对象，⽽ Node 对象继承⾃ Object 对象。

基本的继承关系如下：
其中 Element，Text，Document 和 DocumentType 直接继承⾃ Node 对象，它们的 nodeType 分别为 1，3，9 和 10。

通过这个 nodeType
属性我们可以区分不同类型的节点。

如果要判定⼀个 JavaScript 对象是否 DOM 元素，最简单的⽅法是下⾯的⽅式：
但是在 IE6 和 IE7 中没有 Element 对象，所以不能这样判定。

所以只能⽤下⾯这种不太可靠的⽅式:
参考资料：
[1]
[2]
[3]
[4]
[5]。

深入理解DOM节点类型第五篇——元素节点Element

深⼊理解DOM节点类型第五篇——元素节点Element前⾯的话元素节点Element⾮常常⽤，是DOM⽂档树的主要节点；元素节点是html标签元素的DOM化结果。

元素节点主要提供了对元素标签名、⼦节点及特性的访问，本⽂将详细介绍元素节点的主要内容特征元素节点的三个node属性——nodeType、nodeName、nodeValue分别是1、元素的⼤写标签名和null，其⽗节点parentNode指向包含该元素节点的元素节点Element或⽂档节点Document [注意]要访问元素的标签名可以使⽤nodeName，也可以使⽤tagName属性，这两个属性会返回相同的值<div id="test">123</div><script>console.log(test.nodeType);//1console.log(test.nodeName);//'DIV'console.log(test.nodeValue);//nullconsole.log(test.parentNode);//<body>console.log(test.childNodes);//[text]console.log(test.tagName,test.tagName === test.nodeName);//'DIV' true</script>⼦节点元素可以有任意数⽬的⼦节点和后代节点，因为元素可以是其他元素的⼦节点。

元素的childNodes属性中包含了它的所有⼦节点，这些⼦节点可能是元素、、、处理指令节点<ul class="list" id="list"><li class="in"></li><li class="in"></li></ul><script>var oList = document.getElementById('list');//IE8-浏览器返回2,其他浏览器返回5。

DOM常见的节点类型

DOM常见的节点类型看代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="container" class="d">这是⼀个元素节点</div><script type="text/javascript">//nodeName;nodeValue实验var divNode=document.getElementById("container");//元素节点document.write("元素节点nodeName是"+divNode.nodeName);document.write("<br/>元素节点nodeValue是"+divNode.nodeValue);//属性节点var attrNode=divNode.attributes;console.log(attrNode);//⼀个类数组document.write("<br/>div的第⼀个属性节点nodeName是"+attrNode[0].nodeName);document.write("<br/>div的第⼀个属性节点nodeValue是"+attrNode[0].nodeValue);//⽂本节点var textNode=divNode.childNodes;console.log(textNode);//⼀个类数组document.write("<br/>⽂本节点nodeName是"+textNode[0].nodeName);document.write("<br/>⽂本节点nodeValue是"+textNode[0].nodeValue); //div后的空⽩没有当成⽂本节点//注释节点var commentNode=document.body.childNodes;console.log(commentNode);document.write("<br/>注释节点的nodeName是"+commentNode[1].nodeName);document.write("<br/>注释节点的nodeValue是"+commentNode[1].nodeValue); //script标签⾥的内容也是body的⼦标签 //⽂档类型节点，不需要获取，直接输出就可以document.write("<br/>⽂档节点的nodeName是"+document.doctype.nodeName);document.write("<br/>⽂档节点的nodeValue是"+document.doctype.nodeValue);document.write("<br/>⽂档节点的nodeType是"+document.doctype.nodeType);//⽂档⽚段节点var frag=document.createDocumentFragment();document.write("<br/>⽂档⽚段节点的nodeName是"+frag.nodeName);document.write("<br/>⽂档⽚段节点的nodeValue是"+frag.nodeValue);</script></body></html>。

学习JS中的DOM节点以及操作

学习JS中的DOM节点以及操作DOM操作在JS中可以说是⾮常常见了吧，很多⽹页的⼩功能的实现，⽐如⼀些元素的增删操作等都可以⽤JS来实现。

那么在DOM中我们需要知道些什么才能完成⼀些功能的实现呢？今天这篇⽂章就先简单的带⼤家⼊⼀下JS中DOM操作的门吧！！⼀、DOM树的节点1、 DOM节点分为三⼤类: 元素节点(标签节点)、属性节点和⽂本节点。

属性节点和⽂本节点都属于元素节点的⼦节点。

因此操作时，需先选中元素节点，再修改属性和⽂本。

【查看元素节点】1、使⽤getElement系列⽅法：具体的HTML代码如下图：//通过ID来查看元素属性var li = document.getElementById("first");//通过类名来查看元素属性var lis1 = document.getElementsByClassName("cls");//通过名字来查看元素属性var lis2 = document.getElementsByName("name");//通过标签名来查看元素属性var lis3 = document.getElementsByTagName("li");注意事项：① ID不能重名，如果ID重复，只能取到第⼀个。

②获取元素节点时，必须等到DOM树加载完成后才能获取。

两种处理⽅式：a.将JS写在⽂档最后；b.将代码写⼊window.onload函数中；③通过getElements系列取到的为数组格式，操作时必须取到其中的每⼀个元素，才能进⾏操作，⽽不能直接对数组进⾏操作。

document.getElementsByTagName("li")[0].click = function(){}④这⼀系列⽅法，也可以先选中⼀个DOM节点，在从选中的DOM节点中，选择需要的节点：document.getElementById("div1").getElementsByTagName("li");【通过querySelector系列⽅法】①传⼊⼀个选择器名称，返回第⼀个找到的元素。

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

深⼊理解DOM节点类型第四篇——⽂档⽚段节点DocumentFragment前⾯的话在所有节点类型中，只有⽂档⽚段节点DocumentFragment在⽂档中没有对应的标记。

DOM规定⽂档⽚段(document fragment)是⼀种“轻量级”的⽂档，可以包含和控制节点，但不会像完整的⽂档那样占⽤额外的资源特征创建⽂档⽚段，要使⽤document.createDocumentFragment()⽅法。

⽂档⽚段继承了Node的所有⽅法，通常⽤于执⾏那些针对⽂档的DOM操作⽂档⽚段节点的三个node属性——nodeType、nodeName、nodeValue分别是11、'#document-fragment'和null，⽂档⽚段节点没有⽗节点parentNodevar frag = document.createDocumentFragment();console.log(frag.nodeType);//11console.log(frag.nodeValue);//nullconsole.log(frag.nodeName);//'#document-fragment'console.log(frag.parentNode);//null作⽤我们经常使⽤javascript来操作DOM元素，⽐如使⽤appendChild()⽅法。

每次调⽤该⽅法时，浏览器都会重新渲染页⾯。

如果⼤量的更新DOM节点，则会⾮常消耗性能，影响⽤户体验 javascript提供了⼀个⽂档⽚段DocumentFragment的机制。

如果将⽂档中的节点添加到⽂档⽚段中，就会从⽂档树中移除该节点。

把所有要构造的节点都放在⽂档⽚段中执⾏，这样可以不影响⽂档树，也就不会造成页⾯渲染。

当节点都构造完成后，再将⽂档⽚段对象添加到页⾯中，这时所有的节点都会⼀次性渲染出来，这样就能减少浏览器负担，提⾼页⾯渲染速度<ul id="list1"></ul><script>var list1 = document.getElementById('list1');console.time("time");var fragment = document.createDocumentFragment();for(var i = 0; i < 500000; i++){fragment.appendChild(document.createElement('li'));}list1.appendChild(fragment);console.timeEnd('time');</script><ul id="list"></ul><script>var list = document.getElementById('list');console.time("time");for(var i = 0; i < 500000; i++){list.appendChild(document.createElement('li'));}console.timeEnd('time');</script> 循环50万次的各浏览器结果使⽤⽂档⽚段不使⽤⽂档⽚段firefox 402.04ms 469.31mschrome 429.800ms 729.634ms 循环10万次的各浏览器结果使⽤⽂档⽚段不使⽤⽂档⽚段IE11 2382.15ms 2204.47msIE10 2404.239ms 2225.721msIE9 2373ms 2255msIE8 4464ms 4210msIE7 5887ms 5394ms 由以上结果可以看出，若使⽤IE浏览器，则使⽤⽂档⽚段DocumentFragment的性能并不会更好，反⽽变差；若使⽤chrome和firefox浏览器，使⽤⽂档⽚段DocumentFragment可以提升性能最后由于⽂档⽚段的优点在IE浏览器下并不明显，反⽽可能成为多此⼀举。