dom js 同级_JS基础DOM篇之二：ＤＯＭ级别与节点层次？

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); // DIV

if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好，适用于任何文档

// ...

}

子节点访问

Item 1 Item 2 Item 3

varmyUl=document.getElementById('myUl');

console.log(myUl.childNodes.length);//IE: 3 其他浏览器: 7

以上代码，如果是 IE 来解析，那么

• 元素会有 3 个子节点，分别是 3 个
• 元素；而如果是其他浏览器解析，则会有 7 个子节点，包括 3 个
• 元素 和 4 个文本节点。

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

• Item 1
• Item 2
• Item 3

varmyUl=document.getElementById('myUl');

console.log(myUl.childNodes.length);//所有浏览器： 3

特性的访问

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

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