基本DOM节点操作


Posted in Javascript onJanuary 17, 2017

1、获取元素节点

getElementById():获取指定唯一id的元素。

getElementByTagName():获取指定元素标签名的元素数组。

getElementByName():获取具有指定属性name的元素数组。

2、子节点

element.childNodes:返回该元素的子节点数组。注意:换行在浏览器中作为text节点,需要进行过滤

element.firstChild:该元素的第一个子节点。

element.lastChild:该元素最后一个子节点。

3、父节点

element.parentNode

4、兄弟节点

element.previousSibling:返回相同的树层级中的前一个节点,如果没有,则为null

element.nextSibling:返回相同的树层级中的后一个节点,如果没有,则为null

5、创建节点

createElement() 按指定标签名创建节点

6、复制节点

clonedNode = Node.cloneNode(boolean) 传入布尔值,true表示复制该节点下的所有子节点

7、加入节点

parentNode.appendChild(childNode) 将新节点加入到子节点末尾

parentNode.insertBefore(newNode, targetNode) 将newNode 加入到targNode之前

8、移除目标节点

parentNode.removeChild(childNode)

9、替换目标节点

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
完善的jquery处理机制
Feb 21 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
React快速入门教程
Jan 17 #Javascript
javascript操作cookie
Jan 17 #Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 #Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 #Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 #Javascript
微信小程序实战之运维小项目
Jan 17 #Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 #Javascript
You might like
PHP中操作ini配置文件的方法
2013/04/25 PHP
stripos函数知识点实例分享
2019/02/11 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
通过源码分析Python中的切片赋值
2017/05/08 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
Solaris操作系统的线程机制
2015/07/28 面试题
个人近期表现材料
2014/02/11 职场文书
《秋游》教学反思
2014/04/24 职场文书
公司年会策划方案
2014/05/17 职场文书
群教班子对照检查材料
2014/08/26 职场文书
坎儿井导游词
2015/02/09 职场文书
党支部季度考核意见
2015/06/02 职场文书
升职自荐书
2019/05/09 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python