JavaScript使用childNodes和children

　　childNodes用来获取一个元素的所有子元素，这个包括元素节点和文本节点。

　　children用来获取一个元素的子元素节点，注意只是元素节点

其中DOM中常见的三种节点分别如下：

　　元素节点：<body>，<p>，<a>，<div>，<head>.....等等这些标签，都是元素节点

　　属性节点：title，value，href，id，class等等这些标签的属性，都是属性节点

　　文本节点：文本节点是包含在在标签之内的内容（双标签）比如<p>this is text node</p>，中间的文字就是文本节点；注意包含在标签中间的不一定是文本节点，比如<div><p></p></div>当中的<p>是元素节点

　　所以在使用childNodes来获取到一个元素的子元素集合，这是一个数组。

　　其中最常用的是通过childNodes获得的对象数组中，第一个子元素对象（也即下标为0），这个元素是text，即文本节点，也可以使用firstChild来替代childNodes[0]，然后通过nodeValue属性来获取text的值。

　　如果在标签之中只有一个文本节点，而没有其他元素节点时，也可以使用innerHTML来获取这个节点的文本内容。

具体的用法如下：

<body><div id="test">this is test<p>this is other test</p></div>
</body>
<script>var div = document.getElementById("test");alert(div.childNodes.length);        //显示3alert(div.childNodes[0]);  //[object Text]alert(div.childNodes[0].nodeValue);   //显示this is test//等价alert(div.firstChild.nodeValue);      //显示this is testalert(div.childNodes[1]);    //[object HTMLParagraphElement]alert(div.childNodes[1].childNodes[0].nodeValue); //this is other test//等价   alert(div.childNodes[1].firstChild.nodeValue); //this is other test//p标签中无其他节点，可以使用innderHTMLalert(div.childNodes[1].innerHTML);  this is other test</script>

转载于:https://www.cnblogs.com/-beyond/p/8433576.html

JavaScript使用childNodes和children相关推荐

javascript中childNodes与children 区别以及firstChild与firstElementChild区别
1:childNodes属性: 标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属 ...
Javascript的childNodes和children
有些时候你发现调用childNodes属于没有获得你期望的值.比如: html: <a href="javascript:void(0);" οnclick="se ...
JavaScript之childNodes 和 children 区别
1.先让我们来看看childNodes的用法,以及是如何计算节点数量: 为什么输出是7而不是3呢?原来Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozi ...
javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
javascript 中 parentNode，childNodes、children 应用
"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点例: <div id="parent ...
Js-parentNode、parentElement，childNodes、children 它们有什么区别呢？
原文:http://www.it130.cn/Article/FAQ/Web-kaifa/JavaScript/2007-3-20/2007032017013900.html 所属分类:Web 开发 ...
js表单验证处理和childNodes 和children 的区别
一.对提交表单进行空值验证 html代码: 1 <form action="#"onsubmit="return validate_form(this);" ...
childNodes和children的区别
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>c ...
parentNode，childNodes、children 的使用
"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点例: <div id="parent ...

JavaScript使用childNodes和children

JavaScript使用childNodes和children相关推荐

最新文章

热门文章