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;</di
v>

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节点的函数,例如getElementByIdgetElementsByTagName。但是我们不仅可以访问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节点里。









  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值