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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Python中文件操作简明介绍
2015/04/13 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python 网络编程常用代码段
2016/08/28 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
乡镇务虚会发言材料
2014/10/20 职场文书
南京导游词
2015/02/03 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
pytorch中的model.eval()和BN层的使用
2021/05/22 Python