基本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 相关文章推荐
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
vue组件横向树实现代码
Aug 02 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
多文件上传的例子
2006/10/09 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
js中apply方法的使用详细解析
2013/11/04 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
日语系毕业生推荐信
2013/11/11 职场文书
《木笛》教学反思
2014/03/01 职场文书
成立公司计划书
2014/05/07 职场文书
路政管理求职信
2014/06/18 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
重温入党誓词主持词
2015/06/29 职场文书
新学期开学寄语2016
2015/12/04 职场文书
入团申请书格式
2019/06/20 职场文书
创业计划书之服装
2019/10/07 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android