基本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,超强推荐base.js
Dec 23 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
canvas实现钟表效果
Feb 13 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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 缓存函数代码
2008/08/27 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
Python 深入理解yield
2008/09/06 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python中添加模块导入路径的方法
2021/02/03 Python
汉语言文学毕业生求职信
2013/10/01 职场文书
优秀实习生感言
2014/03/01 职场文书
2014年技术部工作总结
2014/12/12 职场文书
先进单位事迹材料
2014/12/25 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Java设计模式之享元模式示例详解
2022/03/03 Java/Android