基本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 相关文章推荐
js history对象简单实现返回和前进
Oct 30 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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 获取客户端的真实ip
2009/11/30 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
简述Python中的面向对象编程的概念
2015/04/27 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
使用django实现一个代码发布系统
2019/07/18 Python
python3获取当前目录的实现方法
2019/07/29 Python
用python写测试数据文件过程解析
2019/09/25 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
心理健康课教学反思
2014/02/13 职场文书
校企合作协议书
2014/04/16 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
皇城相府导游词
2015/02/06 职场文书