Javascript的DOM操作

标签: javascript dom | 发表时间:2014-06-05 08:58 | 作者:u011043843
出处:http://blog.csdn.net
1.访问节点
document.getElementById(id);
返回对拥有指定id的第一个对象进行访问

document.getElementsByName(name);
返回带有指定名称的节点集合
注意:Elements

document.getElementsByTagName(tagname);
返回带有指定标签名的对象集合
注意:Elements

document.getElementsByClassName(classname);
返回带有指定class名称的对象集合
注意:Elements

2.生成节点
document.createElement(eName);
创建一个节点

document.createAttribute(attrName);
对某个节点创建属性

document.createTextNode(text);
创建文本节点

3.添加节点
document.insertBefore(newNode,referenceChild);
在某个节点前插入节点

parentNode.appendChild(newNode);
给某个节点添加子节点

4.复制节点
cloneNode(true | false);
复制某个节点
参数:是否复制原节点的所有属性

5.删除节点
parentNode.removeChild(node)
删除某个节点的子节点
node是要删除的节点
注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题。这时候,就需要用一个函数来判断首个子结点的节点类型。
元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。

6.修改文本节点
appendData(data);
将data加到文本节点后面

deleteData(start,length);
将从start处删除length个字符

insertData(start,data)
在start处插入字符,start的开始值是0;

replaceData(start,length,data)
在start处用data替换length个字符

splitData(offset)
在offset处分割文本节点

substringData(start,length)
从start处提取length个字符

7.属性操作
getAttribute(name)
通过属性名称获取某个节点属性的值

setAttribute(name,value);
修改某个节点属性的值

removeAttribute(name)
删除某个属性

8.查找节点
parentObj.firstChild
如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用
parentObj.firstChild.firstChild.....

parentObj.lastChild
获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用
parentObj.lastChild.lastChild.....

parentObj.childNodes
获得节点的所有子节点,然后通过循环和索引找到目标节点

9.获取相邻的节点
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点

10.获取父节点
childNode.parentNode:得到已知节点的父节点

作者:u011043843 发表于2014-6-5 0:58:09 原文链接
阅读:141 评论:0 查看评论

相关 [javascript dom] 推荐:

javaScript DOM使用

- - CSDN博客互联网推荐文章
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. 1 修改HTML元素内容. document.write(Date()); //在输入流中直接写 document.getElementById(id).innerHTML=new HTML. //改变已经有的元素内容 document.getElementById("image").src="landscape.jpg";.

Javascript的DOM操作

- - CSDN博客Web前端推荐文章
返回对拥有指定id的第一个对象进行访问. 返回带有指定名称的节点集合. 返回带有指定标签名的对象集合. 返回带有指定class名称的对象集合. 参数:是否复制原节点的所有属性. 注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做. 在删除指定节点的时候不会出错,但是如果要删除最后一个子结点或者是第一个子结点的时候,就会出现问题.

javascript之XML DOM的解析

- - ITeye博客
javascript之XML DOM的解析. . 长春. 吉林市. 四平. 松原. 通化. .

JavaScript DocumentFragment:更快捷的操作DOM的途径

- - WebHek
我相信很少人知道JavaScript里还有这样一个很有用的东西:DocumentFragment. 程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点. 程序员可以不依赖可见的DOM来构造一个DOM结构,而 效率高是它真正的优势,试验表明,它比直接操作DOM快70%.

jQuery参考实例 1.2 在DOM加载完毕,页面元素完全加载之前运行jQuery/JavaScript代码

- - CSDN博客推荐文章
本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load. 主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码.

DOM详解

- - CSDN博客推荐文章
 1.XML解析方式分为两种:dom和sax.   (1)dom:(Document Object Model, 即文档对象模型) 是 W3C 组织推荐的处理 XML 的一种方式.   (2) sax:(Simple API for XML) 不是官方标准,但它是 XML 社区事实上的标准,几乎所有的 XML 解析器都支持它.

DOM优化

- - JavaScript - Web前端 - ITeye博客
1,Javascript语音与DOM操作就像孤岛. 他们之间的通行是要借助船的,而使用船是有很大成本的. 所以,要先做完一个再做另一个,最好不要交替进行. 如:添加1000个li时,先用一个字符串拼接好,最后一次追加到父节点,而不是向父节点追加1000次,一次追加一个. 如:添加1000个li时,先放到fragment,再添加到UL中.

Android DOM解析XML

- - CSDN博客移动开发推荐文章
if(personChilds.item(y).getNodeType()==Node.ELEMENT_NODE){//判断当前节点是否是元素类型节点. 作者:jaycee110905 发表于2013-2-7 21:04:29 原文链接. 阅读:78 评论:0 查看评论.

jquery和DOM比较

- - JavaScript - Web前端 - ITeye博客
1、window.onload和$(document).ready()的区别. 必须等整个网页中所有的内容加载完毕后(包括图片)才能执行. 网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完. 2、jquery对象和DOM对象的区别. Juery对象是包装DOM后的产生的对象,DOM是原生对象,是一个基本的文档结构.

DOM世界的观察者

- - 博客园_Ruby's Louvre
浏览器自带的观察者实在太多了. 经典的不用说,就是onclick, attachEvent, addEventListner,可惜它们只是监听用户的行为. 不过这当中有个特例是propertychange,当元素的属性,不管是自定义还是原生,只要发生改变,就会触发回调. 我们还可以通过它的事件对象的propertyName知道那个元素发生改变.