DOM可以做什么（三）

DOM节点信息

每个DOM节点都保存了关于该节点的一些信息，我们来看看如何访问这些信息。

nodeName、nodeValue和nodeType

同样，按照字面意思：nodeName表示节点名称，nodeValue表示节点值，nodeType则为节点类型。每个DOM节点都包含这些信息，我们可以很方便地通过JavaScript来访问这些属性。下面我们就来看一个使用这些属性的一个例子。

应用实例

HTML代码：

<div>
  <p id="test">test文字</p>
</div>

JavaScript代码

<script type="text/javascript">
function getName(){
        var x =document.getElementById("test");
        alert(x.nodeName);
}
function getValue(){
        var x =document.getElementById("test");
        alert(x.nodeValue);
}
function getType(){
        var x =document.getElementById("test");
        alert(x.nodeType);
}
</script>

实际效果：

test文字

getName()
getValue()
getType()

从例子中可以发现：一个p标签的nodeName是P，尽管在XHMTL中我们把段落写作小些的p，该属性仍然为大写字母。它的nodeValue是null，而并不是它所包含的文本，这是因为文本本身也是一个节点，而文本节点的nodeValue才是文字。

最后，nodeType是“1”。它的意思是元素节点（我们知道，p是一个HTML元素）。其它重要的DOM节点类型：

• 2 —— 属性节点
• 3 —— 文本节点
• 8 —— 注释节点

======================================================================================================

DOM信息nodeType的应用

本文介绍了使用DOM节点的nodeType属性来过滤出特定类型节点的方法。并且举了一个统计文档内所有元素节点的实例。

使用DOM时一个很奇怪（也很恼人）的情况就是连代码中的换行都可能会被视为节点。以下面的HTML代码为例。

HTML代码

代码如下，我们可以清楚地看到div节点内只有一个段落。

<div id="test">
        <p>我是测试段落</p>
</div>
<div id="result">&nbsp;</div>

JavaScript代码

之后我们使用下面的JavaScript代码来显示id为test的div的子节点。首先，我们使用getElementById获得id为test的节点。之后使用childNodes获得它的子结点。最后在id为result的节点中显示这些子结点的节点名称和节点类型。

<script type="text/javascript">
function test(){
        var str = "";
        var nodes =document.getElementById("test").childNodes;
        for( var i = 0;i <nodes.length; i++){
               str += nodes[i].nodeName;
               str += ":";
               str += nodes[i].nodeType;
               str += "<br/>";
        }
        document.getElementById("result").innerHTML= str;
}
</script>

nodeType的应用

点击下面的按钮就可以看到您所使用的浏览器认为这个div有几个子结点。

test()

我是测试段落

 

在FireFox下，得到如下的结果：

#text:3

P:1

#text:3

在IE下，得到如下结果：

P:1

可见，在FireFox中，代码中的换行也被认为是一个类型为1，名字为#text的节点。但是通常我们对代码中的换行并不感兴趣。这时我们就可以使用nodeType来过滤掉这类不需要的元素。使用下面的JS代码就可以实现了。

for( var i = 0;i < nodes.length; i++){
        if(nodes[i].nodeType == 1){

        //代码，只有在节点为元素节点的时候才执行

        }
}

遍历文档所有的元素节点

下面我们在来看一段使用nodeType的JS代码。它的功能是遍历文档中所有的元素节点，并且统计元素节点的总数。当然我们以可以修改代码来对这些元素节点做任何操作。JavaScript代码如下：

<script type="text/javascript">
function countElements(node){
        var total = 0;
        if(node.nodeType == 1){ total +=1;}
        var children = node.childNodes;
        for(var i = 0;i <children.length; i++){
               total +=countElements(children[i]);
        }
        return total;
}
function test2(){
        var elementsCount =countElements(document);
        alert(elementsCount);
}
</script>

test2()

点击上面的按钮就可以看到这个网页的总元素节点数了

======================================================================================================

修改DOM——innerHTML

本节介绍使用innerHTML来访问以及修改HTML DOM的方法。

我们之前已经了解到一些查询DOM节点的函数，例如getElementById和getElementsByTagName。但是我们不仅可以访问DOM节点，更可以改变它们，甚至改变整个节点树的结构。下面我们就来看看改变DOM的最简单的方法——innerHTML。

innerHTML的意思就是“里面的HTML”，就像它的名字一样容易理解，使用它也是异常的简单。我们先来看一个例子。

访问innerHTML实例代码

<div id="test">
        <p>我是测试段落。</p>
</div>

效果如下：

我是测试段落。

test() ,点击这个按钮就可以显示出div的innerHTML，它调用的JS代码如下：

<script type="text/javascript">
function test(){
        alert(document.getElementById("test").innerHTML);
}
</script>

修改innerHTML实例代码

给元素的innerHTML赋值就可以改变元素的内容了，同样是上面的div，我们创建另外一段代码来改变它的内容：

<script type="text/javascript">
function testW(){
        var str = "<p>面目全非！￥%……&*（）</p>";
        document.getElementById("test").innerHTML= str;
}
</script>

testW() ，点击这个按钮就可以执行上面的代码，将第一个例子中div的内容改变。

 

删除DOM节点——removeChild

本节介绍了如何使用removeChild从文档中删除DOM节点，举出一个简单例子的同时还简单介绍了该函数的返回值。

上一节我们看了如何使用innerHTML来修改DOM，而使用removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。

HTML代码

<div id="test">
        <p>我是将要被删除的节点</p>
</div>

实例JavaScript代码

<script type="text/javascript">
function remove(){
        var test =document.getElementById("test");
        var children = test.childNodes;
        for(i=0;i<children.length;i++){
               test.removeChild(children[i]);
        }
}
</script>

删除节点示例

我是将要被删除的节点

remove() ，点击这个按钮就会将上面div的子结点全部删除。

从上面的JS代码可以看到，使用removeChild的格式为：

父节点.removeChild(子结点)

removeChild的返回值

removeChild删除节点后会返回被删除节点的引用，这样当我们以后再想重新将它添加到文档中，或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段：

var removed = xxx.removeChild(xxxx);

则removed就是被删除的节点，可以在后面的代码中使用。

添加DOM节点

本节介绍使用标准的DOM方法向文档中添加节点，用到了createElement、createTextNode以及appendChild等方法。

前面我们通过innerHTML来改变文档的内容，当然也可以用它来添加节点。下面我们来看另外一种想文档中添加节点的方式——使用标准的DOM方法。

使用DOM方法修改文档比使用innerHTML要麻烦一些，我们先来看一段示例HTML代码：

<div id="test" style="border:1pxsolid"></div>

使用DOM方法添加一个段落节点的思路如下：

1. 创建一个p节点
2. 穿件一个文本节点，并且添加到p节点中
3. 将p节点添加到div中

实例JavaScript代码

按照上面的思路我们得出如下的JS代码：

<script type="text/javascript">
function test(){
        var test =document.getElementById("test");
        var para = document.createElement("P");
        var text =document.createTextNode("要添加的文本");
        para.appendChild(text);
        test.appendChild(para);
}      
</script>

添加节点的效果

下面就是原来的div，由于没有内容，我们只能看到边框。

添加节点 ，点击这个按钮就可以运行上面的代码。可以看到上面的div里多出了我们创造的段落节点。

代码解释

首先，我们用到了var para =document.createElement("P");该语句创建了一个段落节点，但是它并不会马上出现在文档中。要创建其它节点，只需要吧传递给该函数的字符串参数修改一些即可，例如document.createElement("DIV")。

var text = document.createTextNode("要添加的文本");一句创建了一个文本节点。

para.appendChild(text);将text作为子结点添加到para这个段落节点上。很容易看出，appendChild的调用语法如下：父节点.appendChild.(子结点)。

最后一句test.appendChild(para);则将段落节点para添加到test这个div节点上，由于test节点原来就是文档的一部分，这一句会造成文档的更新，也就是我们会看到段落文字被添加到了div节点里。