1.节点类型

DOM1层定义了一个Node接口，它由DOM中的所有节点类型实现。每个节点都有一个节点类型属性，用于指示节点的类型。有以下节点类型：

节点。ELEMENT _ NODE(1)；元素节点。ATTRIBUTE _ NODE(2)；属性节点节点。TEXT _ NODE(3)；文本节点节点。DOCUMENT _ NODE(9)；文档节点

其实有很多种，但那些不是很常用，所以我们可以理解其中的四种。让我们首先看看节点类型，比如下面的代码：

HTML代码如下：

div id=' test ' p aaaaa/p p bbbbbbbb/p p cccccc/p/div js如下：

var test=document . getelementbyid(' test ')；If(测试。nodetype===节点。element _ node) {alert (1)}上述代码在IE8及更低版本下将不起作用，并将报告如下错误：

因为IE没有公开Node类型的构造函数，所以IE8-下会有错误，但是我们可以用数值来比较。例如，如果我们想要比较上面的元素节点，我们可以使用1来比较它们。同样，属性节点为2，文本节点为3；以下代码：

var test=document . getelementbyid(' test ')；//下面的所有浏览器都支持if(test.nodeType==1) {alert(1)}来理解nodeName和nodeValue

NodeName保存元素的标记名，而nodeValue一般为null；我们可以看看下面的代码，没有特别说明，HTML代码都在上面，所以这里没有贴代码；以下JS代码测试：

var test=document . getelementbyid(' test ')；if(test . nodetype==1){ console . log(test . nodename)；//打印DIV console . log(test . node value)；//打印空值}了解节点关系

！doctype html html lang=' en ' head meta charset=' utf-8 ' title document/title/head body/body/html如上所述，我们可以将head和body视为html的子元素，html也是它们的父元素。那么头部和身体就是兄弟元素，那么头部和身体就是子元素。我们需要理解，每个节点都有一个childNodes属性，它存储类似Arrays的元素，它还有一个length属性，但它不是array array的实例。例如，我们可以查看以下测试代码：

div id=' test ' p aaaaa/p p bbbbbbbb/p p cccccc/p/div js代码如下：

var test=document . getelementbyid(' test ')；if(test . nodetype==1){ console . log(test . childnodes)；console . log(test . childnodes . length)；}使用上述代码，标准浏览器和IE9下的第一行打印如下：

[text，p，text，p，text，p，text，item:函数]

第二行打印7的长度是7，因为它们包含了文本节点的空间，但是在IE8及以下版本中，长度是3，它们不包含文本空间的节点，所以如果我们想要统一，我们可以编写HTML代码来删除这个空间，如下所示：

div id=' test ' paaaaaaa/ppbbbbbb/ppcccccc/p/div

这个问题以后再仔细考虑。现在让我们看看如何获得子元素。我们可以用两种方法，第一种是用括号[index]索引，第二种是用item[index]索引，如下：

console . log(test . child nodes[1])；//pbbbbbb/pconsole . log(test . child nodes . item(1))；//pbbbbbb/p

但是它们不是数组，所以我们可以测试代码，如下所示：

console . log(object . prototype . tostring . call(test . childnodes)=='[object Array]')；//false但是我们将其转换为数组，如下所示：

//在IE8和早期版本中无效var arrayOfNodes=Array.pro