码迷,mamicode.com
首页 > Web开发 > 详细

js操作节点,ID,name,calssname,tag,style

时间:2017-05-15 10:05:19      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:let   提取   classname   asc   clone   split   node   als   ssi   

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:得到已知节点的父节点

  

js操作节点,ID,name,calssname,tag,style

标签:let   提取   classname   asc   clone   split   node   als   ssi   

原文地址:http://www.cnblogs.com/980081922q/p/6854821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!