基本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中 声明时用"var"与不用"var"的区别
Apr 15 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
学习jQuey中的return false
Dec 18 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
js实现模糊匹配功能
Feb 15 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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教程孙仲岳主讲
2008/01/07 PHP
关于尾递归的使用详解
2013/05/02 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Python实现控制台进度条功能
2016/01/04 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python图书管理系统
2020/04/05 Python
python实现超市扫码仪计费
2018/05/30 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python小项目之五子棋游戏
2019/12/26 Python
python3注册全局热键的实现
2020/03/22 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
公安机关正风肃纪剖析材料
2014/10/10 职场文书
感谢信格式范文
2015/01/22 职场文书
车辆管理制度范本
2015/08/05 职场文书
商业计划书范文
2019/04/24 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers