基本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 学习笔记 选择器之五
Jul 23 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
JS分页效果示例
Oct 11 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 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_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
javascript分页代码(当前页码居中)
2012/09/20 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python的Django框架安装全攻略
2015/07/15 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python实现简易版计算器
2020/06/22 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
如何基于python操作excel并获取内容
2019/12/24 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
兰兰过桥教学反思
2014/02/08 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2014年教师工作总结
2014/11/10 职场文书
火烧圆明园观后感
2015/06/03 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
Python内置的数据类型及使用方法
2022/04/13 Python