javascript之DOM(一节点类型Node)
2017-08-31 19:37
537 查看
DOM(Document Object Model)是针对HTML和XML文档的一个API。DOM描述的是一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。起源于DHML,现为W3C的推荐标准。
IE中的所有DOM对象都是以COM对象的形式实现。
节点层次
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中的不同信息及标记。每个节点都有各自的属性,数据和方法,同时也与其他节点存在联系。所有页面标记表现为以一个特定节点为根节点的属性结构。
其中<html>元素为文档元素。文档元素时文档的最外层元素,文档中其他元素都包含在文档元素中,每个文档中只能有一个文档元素。HTML的文档元素一定是<html>,XML文档中没有预定义的文档元素,所以任何元素都可以成为文档元素。
HTML中元素通过元素节点来表示,属性通过属性节点表示,文档类型通过文档类型节点表示,注释则通过注释节点表示。共有12中节点类型,都继承自一个基类
1、Node类型
Node接口是由DOM的所有节点类型实现的,Node接口在javascript中是作为Node类型实现的,javascript中所有节点类型都继承自Node类型,因此所有节点类型都有相同的基本属性和方法。
Node.ELEMENT_NODE(1)//如果一个节点是元素类型,则该节点的nodeType==1
说明p节点是Element类型
Node.ATTRIBUTE_NODE(2)//节点为属性类型
通过元素节点的getAttribute获取属性节点。
Node.TEXT_NODE(3)//文本节点,空格等字符串也算是文本节点
元素节点下的第一个节点就是文本节点,所以可以用firstChild指向文本节点,然后在取节点的值。
Node.CDATA_SECTION_NODE(4)//xml文档中CDATA区域,CDATASection类型继承自Text类型
在xml文档,可以使用document.createCDATASetion()来创建CDATASetion类型
Node.COMMENT_NODE(8)//注释在DOM中是使用Comment来表示的
使用父节点可以获取到注释。
Node.DOCUMENT_NODE(10)//javascript通过Document类型表示文档,Document类型表示整个HTML页面或xml页面
nodeName和nodeValue的值取决于,节点的类型。对于元素节点,nodeName的值为标签名,nodeValue的值为null;
节点关系:
每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList对象是一个类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。NodeList对象在查询的过程中也可以修改。
输出结果为HEAD,BODY,用于输出元素节点。h.childNodes取得了子节点序列。
每个节点都有父节点parentNode属性,该属性指向文档树中的父节点。包含在childNodes列表中的节点都有相同父节点,它们的parentNode属性指向同一个节点。上面的HEAD和BODY的父节点都为HTML。同时同在childNodes列表中的节点都是同胞节点,可以通过当前节点的previousSibling属性和nextSibling属性来访问前后属性。例如body.previousSibling.nodeName===#text
父节点的firstChild和lastChild属性分别指向childNodes列表中的首尾节点。
操作节点:
当前节点的appendChild方法可以为当前节点的childNodes列表末尾添加一个节点
insertBefore方法可以将节点插入到确定位置
replaceChild()方法接收两个参数,一个是节点,一个是要替换的节点。
normalize处理节点
IE中的所有DOM对象都是以COM对象的形式实现。
节点层次
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中的不同信息及标记。每个节点都有各自的属性,数据和方法,同时也与其他节点存在联系。所有页面标记表现为以一个特定节点为根节点的属性结构。
<html> <head> <title>Test</title> </head> <body> <p>Hello,world!</p> </body> </html>
其中<html>元素为文档元素。文档元素时文档的最外层元素,文档中其他元素都包含在文档元素中,每个文档中只能有一个文档元素。HTML的文档元素一定是<html>,XML文档中没有预定义的文档元素,所以任何元素都可以成为文档元素。
HTML中元素通过元素节点来表示,属性通过属性节点表示,文档类型通过文档类型节点表示,注释则通过注释节点表示。共有12中节点类型,都继承自一个基类
1、Node类型
Node接口是由DOM的所有节点类型实现的,Node接口在javascript中是作为Node类型实现的,javascript中所有节点类型都继承自Node类型,因此所有节点类型都有相同的基本属性和方法。
Node.ELEMENT_NODE(1)//如果一个节点是元素类型,则该节点的nodeType==1
<p >Hello,world!</p> <script type="text/javascript"> alert(pd.nodeType);//1 alert(pd.nodeName);//p </script>
说明p节点是Element类型
Node.ATTRIBUTE_NODE(2)//节点为属性类型
<p name="test">Hello,world!</p> <script type="text/javascript"> alert(pd.nodeType);//1 alert(pd.nodeName);// var p=document.getElementById("pd"); alert(p.getAttribute("name"));//test
alert(p.getAttributeNode("name").nodeType);//2
</script>
通过元素节点的getAttribute获取属性节点。
Node.TEXT_NODE(3)//文本节点,空格等字符串也算是文本节点
<p name="test">Hello,world!</p> <script type="text/javascript"> var p=document.getElementById("pd"); alert(p.firstChild.nodeValue);//Hello,world! alert(p.firstChild.nodeType);//3 </script>
元素节点下的第一个节点就是文本节点,所以可以用firstChild指向文本节点,然后在取节点的值。
Node.CDATA_SECTION_NODE(4)//xml文档中CDATA区域,CDATASection类型继承自Text类型
在xml文档,可以使用document.createCDATASetion()来创建CDATASetion类型
Node.COMMENT_NODE(8)//注释在DOM中是使用Comment来表示的
<p name="test"><!--注释--></p> <script type="text/javascript"> var p=document.getElementById("pd"); alert(p.firstChild.nodeValue);//注释 alert(p.firstChild.nodeType);//8 </script>
使用父节点可以获取到注释。
Node.DOCUMENT_NODE(10)//javascript通过Document类型表示文档,Document类型表示整个HTML页面或xml页面
<p name="test"><!--注释--></p> <script type="text/javascript"> var h=document.documentElement; alert(h===document.firstChild);//true </script>
nodeName和nodeValue的值取决于,节点的类型。对于元素节点,nodeName的值为标签名,nodeValue的值为null;
节点关系:
每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList对象是一个类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。NodeList对象在查询的过程中也可以修改。
<html> <head> <title>Test</title> </head> <body> <p id="pd" name="test"><!--注释--></p> <script type="text/javascript"> var h=document.documentElement; var nodelist=h.childNodes; for(var i=0;i<nodelist.length;i++) { if (nodelist.item(i).nodeType==Node.ELEMENT_NODE) { alert(nodelist.item(i).nodeName); } } </script> </body> </html>
输出结果为HEAD,BODY,用于输出元素节点。h.childNodes取得了子节点序列。
每个节点都有父节点parentNode属性,该属性指向文档树中的父节点。包含在childNodes列表中的节点都有相同父节点,它们的parentNode属性指向同一个节点。上面的HEAD和BODY的父节点都为HTML。同时同在childNodes列表中的节点都是同胞节点,可以通过当前节点的previousSibling属性和nextSibling属性来访问前后属性。例如body.previousSibling.nodeName===#text
父节点的firstChild和lastChild属性分别指向childNodes列表中的首尾节点。
操作节点:
当前节点的appendChild方法可以为当前节点的childNodes列表末尾添加一个节点
<script type="text/javascript"> var h=document.documentElement; var end=document.createElement("end"); h.appendChild(end); alert(h.lastChild.nodeName);//输出为end </script>
insertBefore方法可以将节点插入到确定位置
<script type="text/javascript"> var h=document.documentElement; var end=document.createElement("end"); h.insertBefore(end,h.lastChild);//插入到最后一个节点的前面 alert(h.childNodes[h.childNodes.length-2].nodeName); </script>
replaceChild()方法接收两个参数,一个是节点,一个是要替换的节点。
normalize处理节点
相关文章推荐
- JavaScript高级程序设计之DOM之节点层次之Node类型第10.1.1讲
- JavaScript DOM杂知识(value/innerHTML/innerText/textContent对比、nodeType/nodeName/nodeValue区别、获取任意类型的属性)
- JavaScript学习-DOM-Node类型
- javascript 遍历dom 节点统计类型
- 第10章 文档对象模型DOM 10.1 Node节点类型
- JavaScript HTML DOM节点类型之Element类型(Element对象)
- javascript中12种DOM节点类型概述
- JavaScript之Dom节点类型、遍历节点数。
- 详解JavaScript DOM中的Node节点
- JavaScript高级程序设计之DOM之节点层次之Text类型第10.1.4讲
- JavaScript DOM节点和文档类型
- 第十章:DOM(节点层次:Node类型和Document类型)
- JavaScript高级程序设计之DOM之节点层次之DocumentFragment类型第10.1.8讲
- 【JavaScript学习】DOM:Node类型
- JavaScript高级程序设计之DOM之节点层次之Comment类型第10.1.5讲
- JavaScript高级程序设计之DOM之节点层次之CDATASection类型第10.1.6讲
- JavaScript高级程序设计之DOM之节点层次之DocumentType类型第10.1.7讲
- JavaScript高级程序设计之DOM之节点层次之Attr类型第10.1.9讲
- DOM节点层次之Node类型
- JavaScript高级程序设计之DOM之节点层次之Element类型第10.1.3讲