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节点操作常用方法的更多相关文章

  1. Dom节点操作常用方法

    1.访问/获取节点 document.getElementById(id); //返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); //返回带 ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  4. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  5. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  6. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  7. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  8. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  9. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

随机推荐

  1. uC/OS-II 函数之任务相关函数

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 对于有热心的小伙伴在微博上私信我,说我的uC/OS-II 一些函数简介篇幅有些过于长应该分开介绍.应小伙伴的要求,特此将文章分开进行讲解.上文主要 ...

  2. UDF-java获取名字中的姓

    1.使用方法 在hive中加载jar包,调用udf函数 #从名字中获取姓 add jar ${scriptDir}/GetLastNameUDF.jar; create temporary funct ...

  3. leetcode-819-Most Common Word(词频统计)

    题目描述: Given a paragraph and a list of banned words, return the most frequent word that is not in the ...

  4. 如何实现java的四则运算

    很多语言底层对四则运算都有内部封装, 我们还是要重复造下轮子,不为别的, 就是为了面试可以多装一分 b, 假设你已经了解了什么是二进制, 什么是异或, 什么是移位运算, 什么是与, 这些不懂就别硬上( ...

  5. Comparable比较器和Comparator比较器

    1.Comparable比较器 在Arrays类中存在sort()排序方法,此方法可以直接对对象数组进行排序. public static void sort(Object[] a 根据元素的自然顺序 ...

  6. 基础篇:6.2)形位公差-符号 Symbol

    本章目的:了解定义形位公差的符号. 1.公差特征项目的符号(GM新标准) //形位公差共:5类14个,4,2,3,3,2. 2.附加符号(GM新标准) //①基本尺寸(理论尺寸)没有公差,无需检验(不 ...

  7. Angular material mat-icon 资源参考_Hardware

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  8. 洛谷 P4234 最小差值生成树(LCT)

    题面 luogu 题解 LCT 动态树Link-cut tree(LCT)总结 考虑先按边权排序,从小到大加边 如果构成一颗树了,就更新答案 当加入一条边,会形成环. 贪心地想,我们要最大边权-最小边 ...

  9. dubbo核心流程一览

    整体设计 图中从下至上分为十层,各层均为单向依赖,右边的黑色箭头代表层之间的依赖关系,每一层都可以剥离上层被复用,其中,Service 和 Config 层为 API,其它各层均为 SPI. Serv ...

  10. 一篇在一个Excel表中创建多个sheet的代码

    package projectUtil; import org.apache.commons.lang3.StringUtils; import org.apache.poi.hssf.usermod ...