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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
js中document.write的那点事
Dec 12 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
Move.js入门
Feb 08 Javascript
vue实现单选和多选功能
Aug 11 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 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版(4)
2006/10/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
20个常用Python运维库和模块
2018/02/12 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
跟单文员岗位职责
2014/01/03 职场文书
普通员工辞职信
2014/01/17 职场文书
大一新生检讨书
2014/10/29 职场文书
医院见习报告范文
2014/11/03 职场文书
创建文明城市倡议书
2015/04/28 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android