其实在原生的也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
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“javascript针对DOM的应用分析(二)”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。