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

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

赞 (0)

相关推荐

  • javascript针对DOM的应用实例（一）

    我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果.所以我这里只教大家最实际,最有用的javascript应用.但是前提大家最好有一些javascript或者jquery的编程的基础.好废话不多说了. 今天第一篇,就教大家如何用javascript获取页面中的dom元素.这个很重要.我会对照JQuery来讲. 如果页面中的元素是ID属性 <div id="dom"></div> JQ的方法:$("

  • 什么是DOM(Document Object Model)文档对象模型

    D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关.语言无关的API,程序或脚本通过其动态访问.修改文档的内容.样式.结构. DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓"一次编写到处运行"的目标. 文档对象模型(Document Object Model,DOM)是一种用

  • javascript 基础篇4 window对象，DOM

    javascript 基础篇4 window对象，DOM

    他的属性也很丰富,因为我很懒,我就直接复制手册里的东西了: closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. dialogHeight 设置或获取模式对话框的高度. dialogLeft 设置或获取模式对话框的左坐标. dialogTop 设置或获取模式对话框的顶坐标. dialogWidth 设置或获取模式对话框的宽度. frameElement

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • javascript针对DOM的应用分析（五）

    其实这个应该不列入JS教程的范畴.应为FF,IE6以上浏览器都支持fixed这个固定属性.唯独IE6不支持.所以我为了可恶的IE6.我这里就出一篇教程吧.而且这种效果也可以锻炼同学们的计算能力.以后很多效果都需要你的计算能力.哈哈 固定居中.或者固定在任何地方思想几乎是一样的.只你要算法清楚了.效果写起来就轻而易举了.先贴代码 body,div{padding:0px;margin:0px;} #gd{width:100px;height:100px;background:#F00;color:

  • javascript针对DOM的应用分析（四）

    下面我就写几个给大家看看 一,点击传参方法 复制代码 代码如下: <script> function tab(dom){ var list = document.getElementById("list").getElementsByTagName("li"); var con = document.getElementById("con").getElementsByTagName("div"); for(var

  • JavaScript判断DOM何时加载完毕的技巧

    处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题.浏览器的渲染和操作顺序大致如下列表: HTML解析完毕 外部脚本和样式表加载完毕 脚本在文档内解析并执行 HTML DOM完全构造起来 图片和外部内容加载 网页完成加载 在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行.如前所述,这是个至关重要的问题,因为这两处执行的脚本并不能访问还不存在的DOM.幸好,我们还有若干的补救方法. 目前,最常用的级数是完全等待整

  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    实例如下: 复制代码 代码如下: <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left;

  • javascript针对DOM的应用分析（三）

    如果这个DOM元素没有样式也就谈不上操作了.2.我们也可以直接用JS动态的向html里写入DOM元素. 今天这章我们就讲这两个应用 (一)对html里现有的DOM元素进行操作. 我上面说了,对现有的DOM元素进行操作,无非就是对样式的操作.所以我们首先就要能获取这个DOM元素的样式.在讲获取DOM元素的样式之前.先要说下DOM元素的样式链接方式.有三种. 一是直接在html文档里写入样式例如 <div style="width:300px;height:200px;background:#

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

    其实在原生的也JS也有这些属性.和JQ几乎相同但是比JQ少一些.但是用起来却比JQ麻烦一点.主要因为FF浏览器,因为FF会把你的换行也当做一个DOM元素.比如说 复制代码 代码如下: <div id = "dom"> <div></div> <div></div> </div> 我用原生的JS获取ID为dom的元素下的子元素.用我第一章说的方法就是var a = document.getElementById(&q

  • JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作.分享给大家供大家参考,具体如下: 一.DOM概念 1. "D":Docment,指的是文档 2. "O":Object,指的是对象,在javascript有三种对象:用户定义对象.内建对象(JavaScript语言对象.如Math,Array).宿主对象(浏览器对象) 3. "M":Model,值得是Model,某种事物的表现形式 二.节点 1. 元素节点 :<body> <

  • javascript将DOM节点添加到文档的方法实例分析

    javascript将DOM节点添加到文档的方法实例分析

    本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • javascript基于DOM实现权限选择实例分析

    本文实例讲述了javascript基于DOM实现权限选择的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>权限选择</title> &

  • JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

    本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>

  • JavaScript针对网页节点的增删改查用法实例

    JavaScript针对网页节点的增删改查用法实例

    本文实例讲述了JavaScript针对网页节点的增删改查用法.分享给大家供大家参考.具体分析如下: 一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗

随机推荐