基本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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue实现记事本功能
Jun 26 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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+DBM的同学录程序(5)
2006/10/09 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python实现控制台进度条功能
2016/01/04 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
基于python实现查询ip地址来源
2020/06/02 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
土木工程应届生自荐信
2013/09/24 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
职业规划实施方案
2014/06/10 职场文书
争先创优演讲稿
2014/09/15 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
实习推荐信格式模板
2015/03/27 职场文书
最感人的道歉情书
2015/05/12 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python