javascript针对DOM的应用分析（二）
更新时间：2012年04月15日 22:21:45 作者：
今天第二章，继续讲获取页面中DOM元素。大家都知道在JQ中想获取一个元素的兄弟元素，父级元素，子元素等等是非常方便的
其实在原生的也JS也有这些属性。和JQ几乎相同但是比JQ少一些。但是用起来却比JQ麻烦一点。主要因为FF浏览器，因为FF会把你的换行也当做一个DOM元素。比如说
<div id = "dom">
<div></div>
<div></div>
</div>
我用原生的JS获取ID为dom的元素下的子元素。用我第一章说的方法就是var a = document.getElementById("dom").getElementsByTagName("div");这个没问题。可以alert(a.length)提示会是2，但是我们现在换一种方法获取就是我上章提到的var b = document.getElementById("dom").childNodes;如果这样alert(b.length)IE浏览器上没问题还是2，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的
function del_space(elem){
var elem_child = elem.childNodes;
for(var i=0;i<elem_child.length;i++){
if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}
我解释一下这个函数
var elem_child = elem.childNodes;
把传进来的elem元素的子元素都扔给elem_child;
for(var i=0;i<elem_child.length;i++){
if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}
遍历这些子元素。如果这些元素里面有节点类型是文本并且这个文本类型节点的节点值是空的。就把它删除
(nodeName是JS里的一个属性，得到这个节点的节点类型，/\S/这个是非空字符在JS里的正规表达式。前面加一个感叹号就表示是空字符。test是JS的一个方法，就是把它里面的东西和外面的东西对比一下。nodeValue表示得到这个节点里的值removeChild也是个方法就删除外面这个元素的某个子元素)
这样只需要在调用这些属性之前调用这个函数把空格清理一下就能放心用了比如
<div id = "dom">
<div></div>
<div></div>
</div>
<script>
function dom(){
var a = document.getElementById("dom");
del_space(a);调用清理空格的函数
var b = a.childNodes;获取a的全部子节点；
var c = a.parentNode;获取a的父节点；
var d = a.nextSbiling;获取a的下一个兄弟节点
var e = a.previousSbiling;获取a的上一个兄弟节点
var f = a.firstChild;获取a的第一个子节点
var g = a.lastChild;获取a的最后一个子节点
}
</script>
(另外说下。var b = a.childNodes;获取的也是一个数组；所以比如我要用第一个节点就是childNodes[0];我要用第二个节点就是childNodes[1];以此类推)
到这里获取DOM方面就算是结束了。下章就教大家如何操作DOM元素。
复制代码 代码如下:
<div id = "dom">
<div></div>
<div></div>
</div>
我用原生的JS获取ID为dom的元素下的子元素。用我第一章说的方法就是var a = document.getElementById("dom").getElementsByTagName("div");这个没问题。可以alert(a.length)提示会是2，但是我们现在换一种方法获取就是我上章提到的var b = document.getElementById("dom").childNodes;如果这样alert(b.length)IE浏览器上没问题还是2，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的
复制代码 代码如下:
function del_space(elem){
var elem_child = elem.childNodes;
for(var i=0;i<elem_child.length;i++){
if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}
我解释一下这个函数
var elem_child = elem.childNodes;
把传进来的elem元素的子元素都扔给elem_child;
复制代码 代码如下:
for(var i=0;i<elem_child.length;i++){
if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}
遍历这些子元素。如果这些元素里面有节点类型是文本并且这个文本类型节点的节点值是空的。就把它删除
(nodeName是JS里的一个属性，得到这个节点的节点类型，/\S/这个是非空字符在JS里的正规表达式。前面加一个感叹号就表示是空字符。test是JS的一个方法，就是把它里面的东西和外面的东西对比一下。nodeValue表示得到这个节点里的值removeChild也是个方法就删除外面这个元素的某个子元素)
这样只需要在调用这些属性之前调用这个函数把空格清理一下就能放心用了比如
复制代码 代码如下:
<div id = "dom">
<div></div>
<div></div>
</div>
<script>
function dom(){
var a = document.getElementById("dom");
del_space(a);调用清理空格的函数
var b = a.childNodes;获取a的全部子节点；
var c = a.parentNode;获取a的父节点；
var d = a.nextSbiling;获取a的下一个兄弟节点
var e = a.previousSbiling;获取a的上一个兄弟节点
var f = a.firstChild;获取a的第一个子节点
var g = a.lastChild;获取a的最后一个子节点
}
</script>
(另外说下。var b = a.childNodes;获取的也是一个数组；所以比如我要用第一个节点就是childNodes[0];我要用第二个节点就是childNodes[1];以此类推)
到这里获取DOM方面就算是结束了。下章就教大家如何操作DOM元素。
相关文章
Dom并非一种编程语言，Dom只是提供了一系列的接口，利用Dom的这些接口可以很方便的读取，修改，删除Html和XML文件中的标签元素和文本内容．在这里我们侧重于讲解Dom对Html文件的操作．2010-08-08
在使用Dom操作HTML和XML时．我们时常会遇到空格问题．或许你还没有遇到过．2011-09-09
从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡，用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多2012-04-04
无论是在HTML里或XML文件里．都存在着子元素与兄弟元素的概念．那么我们如何使用Dom正确的操作这些元素．2010-10-10
有关DOM元素与事件的3个谜题，学习与使用dom操作的朋友可以参考下。2010-11-11
HTML Dom与Css的关系，大家都知道Css是用来美化网页．更改网页中元素的外观．2010-10-10
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
这篇文章主要介绍了KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了前端单元测试之UI测试及功能性代码测试教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再详细解释一下2012-09-09
根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现2012-01-01
最新评论