JS基础DOM篇之二：ＤＯＭ级别与节点层次？

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

通过上一篇我们大致了解了什么是ＤＯＭ，今天我们继续深入了解。

１.ＤＯＭ级别

在大家阅读DOM标准的时候，可能会看到DOM（０/１/２/３）级的字眼，这就是ＤＯＭ级别。但实际上，DOM0级标准是不存在的；所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体说来，DOM0级指的是Internet
Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。那下面就介绍一下这存在的三个级别。

DOM1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心（DOM
Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM
HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。总的来说DOM1级的主要目标是映射文档的结构，并提供查询的接口。

DOM2级在原来DOM的基础上又扩充了（DHTML一直都支持的）鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（Cascading
Style Sheets，层叠样式表）的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义。

DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；
DOM事件（DOM Events）：定义了事件和事件处理的接口；
DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；
DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法——在DOM加载和保存（DOM Load and
Save）模块中定义；新增了验证文档的方法——在DOM验证（DOM
Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML
Base。

２.节点层次

我们知道ＤＯＭ可以将任何ＨＴＭＬ或Ｘｍｌ文档描绘成一个由多层节点构成的以特定节点为根节点的树形结构。这些节点分为不同类型，每种类型分别表示文档中不同的信息。每个节点都拥有各自的特点、数据、方法，切合其他节点也存在关系。他们之间的关系就构成了节点层次。

3.节点类型

DOM1级定义了Node接口，该接口由DOM中的所有节点类型实现。这个接口在JavaScript中是作为Node类型实现的。除了ＩＥ，在其他所有浏览器都可以访问这个类型。JavaScript中所有的节点类型都继承Node类型，所有的类型都共享着相同的基本属性和方法。每个节点都有ｎｏｄｅＴｙｐｅ属性，表示节点类型。节点类型由在ｎｏｄｅ类型中定义的１２个数值常量来表示。

Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE (4)
Node.ENTITY_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)
Node.NOTATION_NODE (12)

通过将noseType属性与数字之比较很容易确定节点类型。

if(somenode.nodeType==1){
alert("Node is an element")
}

但是要注意比不是所有节点类型都受到ｗｅｂ浏览器的支持。我们最常用的就是元素和文本节点。具体的节点类型介绍就不一一展开，有兴趣的可以参看“小红书”第十章自行了解。接下来看一下我认为比较常用的节点类型。

Document类型

我们大家需要知道JavaScript是通过Document类型来表示HTML页面或者其他基于XML文档。还有就是在浏览器中，document对象是HTMLDocument（它继承自Document类型）的一个实例，用来表示整个HTML页面。而且document对象是window对象的一个属性，因此可以将它做为全局对象来访问，通过这个文档对象不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

文档信息

document对象有一些标准的Document对象所没有的属性，提供了 document对象所表现的网页的一些信息。

//取得文档标题 var title = document.title;
//设置文档标题 document.title = "New page title";
//取得完整的URL var url = document.URl;
//取得域名 var domain = document.domain;
//页面上边距 document.body.leftMargin
//页面左边距 document.body.rightMargin
//页面右边距 document.body.bottomMargin
//页面下边距 document.body.background //背景图片

查找元素

Document类型提供两个查找元素的方法:

getElementById(),如果找到相应的元素则返回该元素，如果不存在带有相应ID的元素，则返回null。
getElementByTagName(),返回包含零或多个元素的NodeList，在HTMl文档中，这个方法会返回一个HTMLCollection对象，与NodeList非常类似。其中THMLCollection对象有一个方法namedItem()
getElementsByName(),会返回带有给定name特性的所有元素。

文档写入

document.write()方法可以用在两个方面：

页面载入过程中用实时脚本创建页面内容
用延时脚本创建本窗口或新窗口的内容

只有当页面被加载的时候document.write()函数才会被执行

doucment.writeln()与上述类似，区别在于换行。
open()和close()分别用于打开和关闭网页的输出流，如果在页面加载期间使用write()，则不需要用这两个方法。

Element类型

除了Document类型之外，Element类型基本上要算是web变成中最常用的类型了。Element类型用于表现XML或者HTML元素，提供了对元素标签名、子节点及特性的访问。

元素标签名访问

要访问元素的标签名，可以用 nodeName 属性，也可以用 tagName 属性；这两个属性会返回相同的值。在 HTML 中，标签名始终都以全部大写表示，而在 XML(有时候也包括 XHTML）中，标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行，最好还是在比较之前将标签名转换成相同的大小写形式：

var myDiv = document.querySelector('div');
console.log(myDiv.tagName); // DIV
console.log(myDiv.nodeName); // DIVif (myDiv.tagName.toLowerCase() === 'div') { // 这样最好，适用于任何文档
// ...
}

子节点访问

<ul id='myUl'>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul><script>
var myUl = document.getElementById('myUl');
console.log(myUl.childNodes.length); // IE: 3 其他浏览器: 7
</script>

以上代码，如果是 IE 来解析，那么 <ul> 元素会有 3 个子节点，分别是 3 个 <li> 元素；而如果是其他浏览器解析，则会有 7 个子节点，包括 3 个 <li> 元素和 4 个文本节点。

如果像下面这样将元素之间的空白符删除，那么所有浏览器都会返回相同数目的子节点：

<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul><script>
var myUl = document.getElementById('myUl');
console.log(myUl.childNodes.length); // 所有浏览器： 3
</script>

特性的访问

每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是 getAttribute() setAttribute() removeAttribute()。

注意，传递给 getAttribute() 的特性名与实际的特性名相同，因此要想得到 class 特性值，应该传入 class 而不是 className，后者只有在通过对象属性（property）访问特性时才用。如果给定名称的特性不存在，getAttribute() 返回 null。

<div id='myDiv' title='hanzichi'> </div>
<script>
var myDiv = document.querySelector('div'); // attribute
console.log(myDiv.getAttribute('id')); // myDiv
console.log(myDiv.getAttribute('class')); // null
console.log(myDiv.getAttribute('title')); // hanzichi
console.log(myDiv.getAttribute('lang')); // null
console.log(myDiv.getAttribute('dir')); // null // property
console.log(myDiv.id); // myDiv
console.log(myDiv.className); // ''
console.log(myDiv.title); // hanzichi
console.log(myDiv.lang); // ''
console.log(myDiv.dir); // ''
</script>

通过 getAttribute() 方法也可以取得自定义特性。

在实际开发中，开发人员不常用 getAttribute()，而是只使用对象的属性（property）。只有在取得自定义特性值的情况下，才使用 getAttribute() 方法。为什么呢？比如说 style，在通过 getAttribute() 访问时，返回的 style 特性值包含的是 css 文本，而通过属性来访问会返回一个对象。再比如 onclick 这样的事件处理程序，当在元素上使用时，onclick 特性包含的是 Javascript 代码，如果通过 getAttribute() 访问，将会返回相应代码的字符串，而在访问 onclick 属性时，则会返回 Javascript 函数。

与 getAttribute() 对应的是 setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute() 会以指定的值替换现有的值；如果特性不存在，setAttribute() 则创建该属性并设置相应的值。

而 removeAttitude() 方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

div.setAttribute('id', 'someOtherId');
div.setAttribute('title', 'some other text');div.removeAttribute('class')

唉，原本打算将DOM系列洋洋洒洒来几篇，越写越发现自己肚里没东西。据说要想写出个100字左右的博文，你得有1000字左右的知识储备。看来我现在继续充电完善自己，等感觉自己能继续驾驭这个题目时再来继续这个系......