基本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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
Vue组件之极简的地址选择器的实现
May 31 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
小程序分享链接onShareAppMessage的具体用法
May 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
PHP中的日期处理方法集锦
2007/01/02 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
javascript实现数独解法
2015/03/14 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python实现日常记账本小程序
2018/03/10 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python后端接收前端回传的文件方法
2019/01/02 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
土木工程专业推荐信
2014/02/19 职场文书
党建示范点实施方案
2014/03/12 职场文书
纠风工作实施方案
2014/03/15 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
酒店开业主持词
2015/07/02 职场文书