Dom节点操作常用方法

转载 2017年03月23日 15:29:22


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,referenceNode);  //在某个节点前插入节点

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

4.复制节点

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

5.删除节点

parentNode.removeChild(node);  //删除某个节点的子节点 node是要删除的节点

注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。

nodeType 属性可返回节点的类型.最重要的节点类型是:

元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

 

 

 

 

 

 

 

 

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.获取相邻的节点

curtNode.previousSibling;  //获取已知节点的相邻的上一个节点

curtNode.nextSlbling;    // 获取已知节点的下一个节点

10.获取父节点

childNode.parentNode;  //得到已知节点的父节点

11.替换节点

replace(newNode,oldNode);

DOM节点操作:创建,增加,克隆

http://blog.sina.com.cn/s/blog_6b9930a301015yqu.html 创建新的元素节点 createElement_x_x() 方法创建新的元素节点: ...
  • zxygww
  • zxygww
  • 2015年07月28日 15:01
  • 939

JS操作dom节点及兼容性

父节点 parentNode 获取到的是自己的亲父亲(直属关系) // 点击孩子隐藏父亲 window.onload = function(){ var child = do...
  • kumayato
  • kumayato
  • 2017年05月11日 13:09
  • 348

06 JS-DOM之--节点操作(4种)附案例源码

节点的操作一共四种: 创建节点(3种) 添加节点(2种) 删除节点(1种) 复制节点...
  • luyu13141314
  • luyu13141314
  • 2016年11月29日 18:44
  • 241

DOM创建并添加节点

operate node div{ border:#00ccff 1px solid; width:200px; padding:30px; margin:10px; } #d...
  • z83986976
  • z83986976
  • 2014年08月27日 21:58
  • 1555

03 JS-DOM之--节点属性操作方法(2种)附案例源码

属性操作两种方法: 1、 dom对象.属性 == dom对象[属性] ; 2、 dom对象.get/set/removeAttribute() 获取属性:dom对...
  • luyu13141314
  • luyu13141314
  • 2016年11月29日 18:26
  • 476

DOM节点的基本属性(一)

Node类型每个节点类型都共享着相同的基本属性和方法。基本属性有: nodeType: 用于表明节点的类型。 nodeName: 对于元素节点,则保存标签名 nodeValue: 对于元素节点...
  • weixin_38393037
  • weixin_38393037
  • 2017年08月23日 00:07
  • 85

jQuery 中的 DOM 操作-查找节点

•DOM(Document Object Model—文档对象模型):一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 •DOM 操作的分类: –DOMCore: ...
  • fanpengfei0
  • fanpengfei0
  • 2017年01月09日 00:36
  • 758

jsDOM节点操作

1.访问节点 document.getElementById(id); 返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); 返回带有...
  • Ag_wenbi
  • Ag_wenbi
  • 2016年11月16日 09:21
  • 2473

Dom对象的常用方法

Dom对象的常用方法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1、  查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。       ...
  • u011225629
  • u011225629
  • 2016年03月18日 10:51
  • 2716

DOM节点操作

最近发现DOMDocument对象很重要,还有XMLHTTP也很重要  注意大小写一定不能弄错.  属性:  1Attributes 存储节点的属性列表(只读)  2childNo...
  • ft2166826
  • ft2166826
  • 2013年12月13日 14:54
  • 295
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dom节点操作常用方法
举报原因:
原因补充:

(最多只允许输入30个字)