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. Zookeeper配置说明

    转载自:https://my.oschina.net/u/2338362/blog/399361 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进 ...

  2. 【AWS】AWS云计算赋能数字化转型专题研讨会

    点我查看详情 欢迎莅临

  3. LeetCode:寻找数组的中心索引【668】

    LeetCode:寻找数组的中心索引[668] 题目描述 给定一个整数类型的数组 nums,请编写一个能够返回数组“中心索引”的方法. 我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和 ...

  4. linux中环境变量的用法

    Linux操作系统下三种配置环境变量的方法[转] 在linux下做开发首先就是需要配置环境变量,下面以配置java环境变量为例介绍三种配置环境变量的方法. 1.修改/etc/profile文件 如果你 ...

  5. Python学习进程(4)运算符

        本节主要介绍Python的运算符.     (1)Python语言支持的运算符类型: .算术运算符 .比较(关系)运算符 .赋值运算符 .逻辑运算符 .位运算符 .成员运算符 .身份运算符 . ...

  6. Sourse Insight使用过程中的常使用功能简介

    1.查找定义: 在编辑区内,选中任意一个变量.函数.宏等,点击右键->Jump Definition,或者直接Ctrl+左击 2.编辑区切换

  7. linux中安装软件的集中方法

    一.rpm包安装方式步骤: 引用:1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录:2.打开一个终端,su -成root用户:3.cd soft.version.rpm所 ...

  8. window.name跨域

    window.name? 每一个页面都有一个自己的window,而window.name是window的名字. window.name跨域原理 window对象有个name属性,该属性有个特征:即在一 ...

  9. Python编程-数据库

    1.MySQL 程序: socket客户端 根据IP和端口进行连接 发送指令: xxx 接收结果 socket服务端 运行起来 获取指令(recv) xxx 解析命令 文件夹操作: ... 文件操作: ...

  10. HA 脑裂原理

    HA 脑裂原理 “裂脑”,乃一个形象的术语,系HA系统危机情景. 引子:“裂脑”是治疗“癫痫”病的一种手术.医生们认为癫痫病发作是由于大脑“异常放电”所至.为了阻止“异常放电”波及整个大脑(左.右半脑 ...