原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API。
DOM节点树:在文档中出现的空格、回车、标签、注释、文本、doctype、标签等都属于DOM节点。
操作DOM节点的方式无非就是:创建、添加(插入)、移除、替换、查找(获取)、克隆DOM节点。
创建文本节点:var newText = document.createTextNode('文本节点');
创建标签节点:var newNode = document.createElement('div');
添加(插入)子节点至末尾:父节点.appendChild(子节点);
添加(插入)子节点至某节点前:父节点.insertBefore(子节点, 某节点);
移除子节点:父节点.removeChild(子节点);
替换节点:父节点.replaceChild(替换后的节点, 替换前的节点);
查找(获取)节点:
查找(获取)所有子节点:父节点.childNodes
查找(获取)所有是标签类型的子节点:父节点.children
查找(获取)下一个兄弟节点:某节点.nextSibling
查找(获取)上一个兄弟节点:某节点.previousSibling
查找(获取)父节点:子节点.parentNode
查找(获取)第一个子节点:父节点.firstChild
查找(获取)最后一个子节点:父节点.lastChild
也可以使用document.get…的方法来获取,详细请看:JS获取标签方法及兼容处理
原生JS的DOM节点操作的更多相关文章
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- JS对DOM节点操作整理
获取节点: //按照ID获取 document.getElementById('element'); //按照节点名称获取,返回类数组对象 document.getElementsByTagName( ...
- js的DOM节点操作:创建 ,插入,删除,复制,查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- 原生JS中DOM节点相关API合集
节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...
- js中DOM 节点的一些操作方法
什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
随机推荐
- 【高德地图API】从头德国高中生JS API(三)覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖
覆盖物,是一张地图的灵魂.有覆盖物的地图.才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具).最重要最必不可少的就是覆盖物了.覆盖物有多种.包含.标注.折线.多 ...
- 项目构建之maven篇:3.m2eclipse使用
m2eclipse的安装 略 设置maven文件夹 设置用户个性化的maven配置 导入mavenproject 源码下载 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...
- C#
抽象类其中创建一个静态方法
</pre><pre name="code" class="csharp"><span style="font-size ...
- Oracle中关于处理小数点位数的几个函数,取小数位数,Oracle查询函数
Oracle中关于处理小数点位数的几个函数,取小数位数,Oracle查询函数 关于处理小数点位数的几个oracle函数()1. 取四舍五入的几位小数select round(1.2345, 3) fr ...
- 5.非关系数据库(Nosql)它mongodb:创建一个集合,导出和导入备份, 数据恢复,进出口
1 固定集合 固定集合值得是事先创建并且大小固定的集合 2 固定集合的特征:固定集合非常像环形队列.假设空间不足,最早文档就会被删除,为新的文档腾出空间.一般来说.固定集合适用于不论什么想要自己 ...
- HDU 3037 Saving Beans (Lucas法则)
主题链接:pid=3037">http://acm.hdu.edu.cn/showproblem.php?pid=3037 推出公式为C(n + m, m) % p. 用Lucas定理 ...
- JavaScript省市联动菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- about greenplum collection tool
three collection tool for greenplum:pstack.strace.gcore. ...
- Google I/O 2014? No,Android I/O 2014
"你当然能够不相信理想,可是你也应该相信.有一些人相信理想" google I/O今日公布了很多新品,罗列为: Android Wear,Android Auto.Android ...