基本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 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
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可变函数的经典用法
2013/06/20 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
小程序click-scroll组件设计
2019/06/18 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
python uuid模块使用实例
2015/04/08 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python列表切片用法示例
2017/04/19 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python 以16进制打印输出的方法
2018/07/09 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
方正Java笔试题
2014/07/03 面试题
党支部公开承诺书
2014/03/28 职场文书
村安全生产责任书
2014/08/25 职场文书
大学生学习计划书
2014/09/15 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
maven依赖的version声明控制方式
2022/01/18 Java/Android