基本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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
Vue 数据绑定的原理分析
Nov 16 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语法速查表
2007/01/02 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
use jscript List Installed Software
2007/06/11 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
Javascript继承机制详解
2017/05/30 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
python发腾讯微博代码分享
2014/01/10 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python列表解析配合if else的方法
2018/06/23 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
商场促销活动总结
2014/07/10 职场文书
作风建设剖析材料
2014/10/06 职场文书
刑事上诉状范文
2015/05/22 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS