javascript针对DOM的应用分析(二)


Posted in Javascript onApril 15, 2012

其实在原生的也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元素。

Javascript 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
详解vue 组件注册
Nov 20 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
javascript针对DOM的应用实例(一)
Apr 15 #Javascript
JavaScript中的null和undefined解析
Apr 14 #Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 #Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 #Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 #Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 #Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 #Javascript
You might like
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python正则中最短匹配实现代码
2018/01/16 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
英文自荐信常用句子
2014/03/26 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
生活委员竞选稿
2015/11/21 职场文书