JavaScript DOM节点操作方法总结


Posted in Javascript onAugust 23, 2016

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

JavaScript DOM节点操作方法总结

而对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节点操作方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
EasyUI创建对话框的两种方式
Aug 23 #Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 #Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 #Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 #Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 #Javascript
深入浅出 jQuery中的事件机制
Aug 23 #Javascript
javascript实现简单的on事件绑定
Aug 23 #Javascript
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
深入理解Django的中间件middleware
2018/03/14 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
自我鉴定书范文
2013/10/02 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
班主任2015新年寄语
2014/12/08 职场文书
商务邀请函
2015/01/30 职场文书
社区宣传标语口号
2015/12/26 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python