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

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

  

时间: 2024-08-04 04:02:01

js操作节点,ID,name,calssname,tag,style的相关文章

js操作节点小结

节点对象代表文档树中的一个单独的节点. 下面节点的API可以当词典使用哦!! 属性:(绝大部分都是只读的) 1 Attributes 存储节点的属性列表(只读) 2 childNodes 存储节点的子节点列表(只读) 3 dataType 返回此节点的数据类型 4 Definition 以DTD或XML模式给出的节点的定义(只读) 5 Doctype 指定文档类型节点(只读) 6 documentElement 返回文档的根元素(可读写) 7 firstChild 返回当前节点的第一个子节点(只

JS获取(id、class、tag、style、attr)兼容所有

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <a id='qwe' class='asd' href='http://222sdfad.com'></a> <script> function getClass

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

js获取节点的DOM操作

一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法. 除IE外其他浏览器都可以访问到这个类型. 每个节点都有一个NodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个常数值来表示,任何节点类型必居其一. 根据这些常量值可以很容易的判断节点类型. if(someNode

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu

原生js操作DOM基础-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e0669e4a017e54a31fb39c&source=41#wechat_redirect 使用原生js为了提高效率,纯js操作dom一 查询DOMdocument.querySelector()参数是任意css选择器格式,只会返回第一个匹配到值document.querySelectorAll(

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

js操作

JS基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通表达式 // 0.undefined.null."".NaN为假,其他均为真 if 复杂语法 // 1.双分支 if (表达式1) { 代码块1; } else { 代码块2; } // 2.多分支 if (表达式1) { } else if (表达式2) { } ... else if (表达式2) {

js操作bom和dom

Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心. BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象 窗口高度 var  a  = window.innerheight 窗口宽度 var a = window.innerwidth 打开一个新的页面 open