基本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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js的回调函数详解
Jan 05 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
详解JS预解析原理
Jun 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
apache php mysql开发环境安装教程
2016/07/28 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
php 可变函数使用小结
2018/06/12 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
详解js访问对象的属性和方法
2018/10/25 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
github配置使用指南
2014/11/18 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python和c语言的主要区别总结
2019/07/07 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
一封普通求职者的求职信
2013/11/20 职场文书
听课评语大全
2014/04/30 职场文书
委托培训协议书
2014/11/17 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
初一语文教学反思
2016/03/03 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang