节点类型

节点类型主要有三种:元素节点,属性节点和文本节点。

而对DOM的主要也就是围绕元素节点和属性节点的增删改查。下面就分别从对元素节点的操作和对属性节点的操作来介绍。

元素节点

在对DOM进行增删改之前,首先要找到对应的元素。具体的查找方法如下:

 getElementByID()             // 得到单个节点
getElementsByTagName() // 得到节点数组 NodeList
getElementsByName() // 得到节点数组 NodeList

同时还可以利用元素节点的属性获取它的父子节点和文本节点:

子节点

Node.childNodes   //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点,如果用这种方式获取节点列表,需要进行过滤
Node.firstChild //返回第一个子节点
Node.lastChild //返回最后一个子节点

父节点

Node.parentNode      // 返回父节点
Node.ownerDocument //返回祖先节点(整个document)

同胞节点

Node.previousSibling       // 返回前一个节点,如果没有则返回null
Node.nextSibling // 返回后一个节点

新增节点首先要创建节点,然后将新建的节点插入DOM中,所以下面分别介绍创建节点和插入节点的方法,复制节点的方法也在创建节点中进行介绍。

创建节点

createElement()        // 按照指定的标签名创建一个新的元素节点

创建代码片段(为避免频繁刷新DOM,可以先创造代码片段,完成所有节点操作之后统一添加到DOM中)

createDocumentFragment()

复制节点

clonedNode = Node.cloneNode(boolean)  // 只有一个参数,传入一个布尔值,true表示复制该节点下的所有子节点;false表示只复制该节点

插入节点

/*插入node*/
parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前 /*插入html代码*/
node.insertAdjacentHTML('beforeBegin', html); //在该元素之前插入代码
node.insertAdjacentHTML('afterBegin', html); //在该元素的第一个子元素之前插入代码
node.insertAdjacentHTML('beforeEnd', html); //在该元素的最后一个子元素之后插入代码
node.insertAdjacentHTML('afterEnd', html); //在该元素之后插入代码

替换节点

parentNode.replace(newNode, targetNode);        //使用newNode替换targetNode

移除节点

parentNode.removeChild(childNode);   // 移除目标节点
node.parentNode.removeChild(node); //在不清楚父节点的情况下使用

属性节点

操作属性节点,就是对DOM样式进行增删改查。对于行内样式、内联样式、外部样式有不同的操作方法;各种方法获得的样式也有可读可写和只读之分。

直接获取CSS样式

node.style.color          // 可读可写

Style本身的属性和方法

node.style.cssText          //获取node行内样式字符串
node.style.length //获取行内样式个数
node.style.item(0) //获取指定位置的样式

获取和修改元素样式

HTML5为元素提供了一个新的属性:classList 来实现对元素样式表的增删改查。操作如下:

node.classList.add(value);         //为元素添加指定的类
node.classList.contains(value); // 判断元素是否含有指定的类,如果存在返回true
node.classList.remove(value); // 删除指定的类
node.classList.toggle(value); // 有就删除,没有就添加指定类

修改DOM特性的方法

Node.getAttribute('id')        // 获取
Node.setAttribute('id') // 设置
Node.removeAttribute() // 移除
Node.attributes // 获取DOM全部特性

只读方法

getComputedStyle是window的方法。它能够获取当前元素所有最终使用的CSS属性值,但是是只读的。它有两个参数,第一个为传入的节点,第二个可以传入:hover, :blur等获取其伪类样式,如果没有则传入null。

然而IE并不支持getComputedStyle方法,可以使用currentStyle来保持兼容性:

window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle

JavaScript DOM节点操作总结的更多相关文章

  1. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  2. 前端JavaScript之DOM节点操作

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

  3. 深入理解DOM节点操作

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

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

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

  5. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

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

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

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

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

  8. Dom节点操作总结

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

  9. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

随机推荐

  1. 2--OC -- 类的创建与实例化

    2.OC -- 类的创建与实例化   一.OC类的简述 1.OC类分为2个文件:.h文件用于类的声明,.m文件用于实现.h的函数: 2.类是声明使用关键字:@interface.@end : 3.类是 ...

  2. linux 命令实现原理

    我们知道有些Linux的命令涉及到一些高效率的算法,在此做出一个积累吧,不是系统的. 1.tail命令打印一个文件的最后num行 2.grep命令从文本中匹配字符串 基于正则表达式的匹配很快. it ...

  3. JavaBean-- DAO设计模式

    企业分层架构: 资源层:主要是数据库的操作层,里面可以进行各种数据存储,但是这些数据存储操作的时候肯定依靠SQL语句,如果在一个程序中出现过多的SQL语句,JSP页面非常复杂,不便于程序的可重用性 数 ...

  4. JavaBean--实例:注册验证

    通过JSP+JavaBean完成一个注册用户的验证功能: index.jsp: 注册信息填写页,同时对错误数据进行错误提示 check.jsp:将输入表单数据自动赋值给JavaBean,同时验证,失败 ...

  5. zf-启动项目报错Server 127.0.0.1 has no instance named dlx 解决办法

    由于百度出来的看不明白,于是我就在群里问,吴善如经理说:你这个问题我上次给李宽看过,用端口连,把instance去掉 然后我去掉之后 项目过程能够成功运行了,原来是这样

  6. zf-关于业务量统计柱形图(上月份的没显示出来的解决办法)

    首先要想到是存储过程里面除了问题,导致没有显示出来 因为本年度和本季度 是能显示出来的 所以后台代码是没问题的 存储过程里 有个tj_type  这个tj_type有3个值 1 代表本年度 2 代表本 ...

  7. CocoaPods安装和使用及问题----看过写的最好的

    目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaPods? 场景1:利用CocoaPods,在项目中导入AFNetworking类库 场景2:如何正确编译运行一 ...

  8. (转)C++中返回对象的情形及RVO

    http://www.cnblogs.com/xkfz007/archive/2012/07/21/2602110.html 之前有文章介绍过临时对象和返回值优化RVO方面的问题.见此处. 在C++中 ...

  9. 转:XPath路径表达式

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. XML 实例文档 我们将在下面的例子中使用这个 XML 文档. & ...

  10. 设置自己Eclipse代码风格(内部)

    经过这几次的代码提交,发现很多人的代码风格不够规范.个人认为很有必要强制性规定一下代码的规范. 整体来说,有三种代码风格,其中两种类似于这样的: public void function(){ //f ...