基本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 相关文章推荐
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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中实现图片的锐化
2006/10/09 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php魔术变量用法实例详解
2014/11/13 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
js jquery数组介绍
2012/07/15 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
Python contextlib模块使用示例
2015/02/18 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
python匿名函数用法实例分析
2019/08/03 Python
python多进程并发demo实例解析
2019/12/13 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
环境工程专业自荐信
2014/03/03 职场文书
《老山界》教学反思
2014/04/08 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python