JavaScript的childNodes、nodeType、nodeValue属性

最新推荐文章于 2022-02-16 10:06:08 发布

weixin_33849942

最新推荐文章于 2022-02-16 10:06:08 发布

阅读量335

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3640519/blog/1552156

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.childNodes属性

childNodes属性可以用来获取任何一个元素的所有子元素，它是一个子元素数组。

假设需要检索出某个文档body元素的全部子元素，首先需要用getElementsByTagName获取body元素，getElementsByTagName返回的是一个数组，而一个文档只有一个body元素，所以：

var body_element = document.getElementsByTagName("body")[0];

那么，获取子元素的个数可以如下：

function countBodyChildren(){
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
}

需要让这个函数加载执行，则用：

window.onload = countBodyChildren;

2.nodeType属性

每一个元素节点都会有nodeType属性，它让我们知道自己正在和哪种节点打交道，但是美中不足的是nodeType的值并不是英文，而是数字。nodeType总共有12种可取值，但其中仅有3种有使用价值：

元素节点的nodeType属性值为1；

属性节点的nodeType属性值为2；

文本节点的nodeType属性值为3；

3.nodeValue属性

nodeValue是DOM提供的，它用来得到一个节点的值：node.nodeValue

var des = document.getElementById("description");
alert(des.childNodes[0].nodeValue);
//alert(des.firstChild.nodeValue);

可以用nodeValue刷新某段描述，如：

function showPicture(whichPicture){
    var source = whichPic.getAttribute("href");
    var placeHolder = document.getElementById("placeHolder");
    placeHolder.setAttribute("src", source)
    var text = whichPic.getAttribute("title");
    var des = document.getElementById("desc");
    des.firstChild.nodeValue = text;
}

这样，原来显示的描述，通过这个函数处理会变成所获取到的title中的描述内容。

参考：JavaScript DOM编程艺术(中文第2版)

转载于:https://my.oschina.net/u/3640519/blog/1552156