注册登录

【DOM】javascript针对DOM的应用分析（二）

时间:2016-02-12 13:21 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【javascript针对DOM的应用分析（二）】，下面是详细的讲解！

javascript针对DOM的应用分析（二）

其实在原生的也JS也有这些属性。和JQ几乎相同但是比JQ少一些。但是用起来却比JQ麻烦一点。主要因为FF浏览器，因为FF会把你的换行也当做一个DOM元素。比如说

复制代码代码如下:

我用原生的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元素。

关于javascript针对DOM的应用分析（二）的用户互动如下：

　　相关问题：请问谁有完整版的 JavaScript DOM编程艺术第二版 ...

　　答：已经上传，希望能帮到你！ >>详细

　　相关问题：对JavaScript的认识和经验

　　答：1:学习无重点，js应该从实践中去学，例如常用到表单验证，这里就涉及到事件，正则等内容，还有就是常用的动画特效，当做网页需要实现某些功能时，再考虑js的实现，网上资料很多，很容易就能看懂的，想要一次性全部学懂了再去做网站，就没必要了... >>详细

　　相关问题：JAVASCRIPT DOM编程艺术第2版怎么样

　　答：很不错的书,可是我调试其中一些程序时总是不能成功,去图灵下载该书的源码却不能下载.如果谁有希望能提供一下.不胜感激. >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【DOM】javascript针对DOM的应用分析（二）

javascript针对DOM的应用分析（二）

关于javascript针对DOM的应用分析（二）的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）