基本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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
JS实现商品橱窗特效
Jan 09 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
node.js中的console用法总结
2014/12/15 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Flask框架web开发之零基础入门
2018/12/10 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python名片管理系统开发
2020/06/18 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
高校辅导员推荐信范文
2013/12/25 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
项目投资合作意向书
2014/07/29 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS
python缺失值填充方法示例代码
2022/12/24 Python