javascript学习笔记:DOM节点概述

　　

0 x01:

　　

DOM是javascript操作网页的接口,全称为文档对象模型(文档对象模型)。它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(节点),文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型。
HTML DOM定义了访问和操作HTML文档的标准方法,将HTML DOM文档表达为树结构。(此时应该放上W3C的经典图)
<强>按照个人的理解,css对应的标签,js对应的元素,DOM对应的节点,三个名称其实表示同一个内容,只是在不同的技术名称不同。
javascript学习笔记:DOM节点概述

　　

一般地,节点至少拥有nodeType,节点名和nodeValue这三个基本属性。节点类型不同,这三个属性的值也不相同

　　

0 x02: 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)
　　注释节点Node.COMMENT_NODE (8)
　　文档节点Node.DOCUMENT_NODE (9)
　　文档类型节点Node.DOCUMENT_TYPE_NODE (10)
　　文档片段节点Node.DOCUMENT_FRAGMENT_NODE (11)
　　DTD声明节点Node.NOTATION_NODE(12)
　　

DOM定义了一个节点接口,这个接口在javascript中是作为节点类型实现的,而在IE8——浏览器中的所有DOM对象都是以COM对象的形式实现的,所以,IE8——浏览器并不支持节点对象的写法

　　
 <代码>//在标准浏览器下返回1,而在IE8——浏览器中报错,提示节点未定义
　　console.log (Node.ELEMENT_NODE);//1
　　

节点名 　　

节点名属性返回节点的名称

　　nodeValue

　　

nodeValue属性返回或设置当前节点的值,格式为字符串

　　

接下来,将按照节点类型的常数值对应顺序,从1到12进行详细说明

　　
 <代码> # 0 x02:元素节点
　　元素节点元素对应网页的HTML标签元素。元素节点的节点类型nodeType值是1,节点名称nodeName值是大写的标签名,nodeValue值是null
　　

以身体元素为例

　　
 <代码>//1“身体”为空
　　console.log (document.body.nodeType document.body.nodeName document.body.nodeValue)
　　console.log(节点。ELEMENT_NODE===1);//真正的
　　

<>强特性节点
元素特性节点属性对应网页中HTML标签的属性,它只存在于元素的属性属性中,并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2节点名称nodeName值是属性名,nodeValue值是属性值

　　

现在,div元素有id=皌est"的属性

　　
 <代码> & lt; div id=安馐浴弊４? lt;/div>
　　& lt; script>
　　var attr=test.attributes.id;//2“id”“测试”
　　console.log (attr.nodeType attr.nodeName attr.nodeValue)
　　console.log(节点。ATTRIBUTE_NODE===2);//真实的
　　& lt;/script>
　　

<>强文本节点
文本节点文本代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3节点名称nodeName值是“#文本”,nodeValue值是标签内容值

　　

现在,div元素内容为“测试”

　　
 <代码> & lt; div id=安馐浴钡脑诓馐? lt;/div>
　　& lt; script>
　　var txt=test.firstChild;//3 #文本“测试的
　　console.log (txt.nodeType txt.nodeName txt.nodeValue)
　　console.log(节点。TEXT_NODE===3);//真实的
　　& lt;/script>
　　

<强> CDATA节点
CDATASection类型只针对基于XML的文档,只出现在XML文档中,表示的是CDATA区域,格式一般为

　　

& lt; ! [CDATA [
]]在
该类型节点的节点类型nodeType的值为4节点名称节点名的值为“# CDATA区域”,nodevalue的值是CDATA区域中的内容
<>强实体引用名称节点
实体是一个声明,指定了在XML中取代内容或标记而使用的名称。实体包含两个部分,首先,必须使用实体声明将名称绑定到替换内容。实体声明是使用& lt; !实体名称“value"比;语法在文档类型定义(DTD)或XML架构中创建的。其次,在实体声明中定义的名称随后将在XML中使用。在XML中使用时,该名称称为实体引用。

javascript学习笔记:DOM节点概述