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"> </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方法添加一个段落节点的思路如下:
- 创建一个p节点
- 穿件一个文本节点,并且添加到p节点中
- 将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节点里。