常用DOM API总结
一. 获取节点
1. 获取元素节点
getElementsById
getElementsByTagName
getElementsByClassName
2. 获取属性节点
getAttribute
3. 获取子节点
childNodes属性 // 获取所有子节点, 包括换行
firstChild属性
lastChild属性
previousElementSibling属性 // 获取相邻上一个节点
nextSibling属性 // 获取相邻下一个节点
parentNode属性 // 获取父节点, 包括父节点的所有子节点
二. 获取节点类型
nodeType属性
拓展: 常见节点类型
元素 1
属性 2
文本 3
注释 8
文档, 即document对象 9
三. 创建节点
createElement
createAttribute // 创建属性节点, 之后可以使用value属性赋值
createTextNode
cloneNode // 赋值节点, true保留子节点 false不保留子节点
四. 添加节点
appendChild // 在元素节点内部的最后, 附加一个子节点(通常是元素节点, 文本节点)
insertBefore // 插入一个与当前节点同级的新节点, 位置在当前节点的前面, 说明：document.insertBefore的使用方式是错误的, 一般情况下, 无法在根节点前插入元素
五. 删除节点
1. 元素, 文本节点
removeChild // 删除子节点
remove // 删除当前节点
2. 属性节点
removeAttribute
六. 设置节点
setAttributeNode // 为当前元素节点添加一个属性节点
appendChild // 为当前元素节点添加一个子节点
replaceChild // 替换当前节点的子节点
附: 测试代码
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="box1">
<h2 id="title1">商品栏</h2>
<ul id="goods"><li class="first">商品1</li><li>商品2</li><li>商品3</li><li class="last">商品4</li></ul>
</div>
<script>
/* 获取已存在节点 */
var h2Node1_exist = document.getElementById("title1");
var liNode1_exist = document.getElementsByClassName("first")[0];
var ulNode1_exist = document.getElementById("goods");
var liNode2_exist = document.getElementsByTagName("li")[2]; /* 创建新节点 */
var liNode1 = document.createElement("li");
var txtNode1 = document.createTextNode("halo");
liNode1.appendChild(txtNode1); /* 获取节点
console.log(document.getElementById("goods"));
console.log(document.getElementsByTagName("li"));
console.log(document.getElementsByClassName("last"));*/ /* 创建节点
// 1创建元素节点
console.log(document.createElement("span")); // 2创建属性节点并赋值
var attrNode = document.createAttribute("name");
attrNode.value = "shaohsiung";
console.log(attrNode);
// 将属性节点设置到标签上
h2Node1_exist.setAttributeNode(attrNode);
console.log(h2Node1_exist); // 3创建文本节点
var txtNode = document.createTextNode("halo world");
// 将文本节点设置到标签体内
h2Node1_exist.appendChild(txtNode);*/ /* 添加节点
// 添加子节点
h2Node1_exist.appendChild(liNode1); // 某节点前插入节点
// 说明：document.insertBefore的使用方式是错误的，无法在根节点前插入元素
ulNode1_exist.insertBefore(liNode1, liNode1_exist); */ /* 复制节点
// 不包含子节点
var result1 = ulNode1_exist.cloneNode(false);
console.log(result1); // 包含子节点
var result1 = ulNode1_exist.cloneNode(true);
console.log(result1);*/ /* 删除节点
// 删除子节点
ulNode1_exist.removeChild(liNode1_exist);
// 删除标签的属性
ulNode1_exist.removeAttribute("id");
// 删除当前节点
ulNode1_exist.remove(); */ /* 获取节点类型 常见节点类型小结：
元素 1
属性 2
文本 3
注释 8
文档, 即document对象 9
*/
//console.log(document.nodeType); /* 操作属性节点
// 获取元素节点某个属性值
console.log(h2Node1_exist.getAttribute("id"));
// 为元素节点设置属性值
h2Node1_exist.setAttribute("name", "shaohsiung");
// 删除元素节点属性
h2Node1_exist.removeAttribute("name"); */ /* 查找节点
// 获取ul标签所有子节点（包括换行）
// 说明：要特别注意这里的换行
console.log(ulNode1_exist.childNodes); // 获取ul标签第一个子节点
console.log(ulNode1_exist.firstChild); // 获取ul标签最后一个子节点
console.log(ulNode1_exist.lastChild);
// 可递归调用， 这里获取到文本节点
console.log(ulNode1_exist.lastChild.lastChild); */ /* 获取相邻的节点
// 上一个
console.log(liNode2_exist.previousElementSibling);
// 下一个
console.log(liNode2_exist.nextSibling); */ // 获取父节点
// 说明：包括父节点的所有子节点
console.log(liNode2_exist.parentNode); // 替换当前节点的子节点
ulNode1_exist.replaceChild(liNode1, liNode2_exist);
</script>
</body>
</html>
常用DOM API总结的更多相关文章
- 常用DOM API
Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有 element,text,attribute,comment,documen ...
- React常用的API说明
楼主刚开始学习react,感受到了他的博大精深,看到很多莫名的用法,不知云云,找了很多没有找到参考手册,只有在中文社区和react官方看了一些,收集了一些比较常用的API,有补充的可以楼下评论补充.后 ...
- 第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...
- DOM API详解
来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...
- JavaScript DOM API初步（整理）
文档对象模型 文档对象模型(Doucment Object Model,DOM)是表示文档(如HTML文档.XML文档)和访问.操作构成文档的各种元素的应用程序接口.在DOM中,HTML文档的层次结构 ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
- web dom api中的Selection和Range
如果你做过wysiwyg这样的app,一个很让人头疼的问题是如何保证执行bold,italic等格式化操作后保持先前鼠标所在的位置.要好好的解决这个问题,就必须将Selection和Range的api ...
- 抛弃jQuery：DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- 抛弃jQuery：DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
随机推荐
- HDU3342：判断有向图中是否存在3元环-Tarjan或拓扑排序
题目大意: 给你一个关系图,判断是否合法.每个人都有师父和徒弟,可以有很多个: 若A是B的师父,B是C的师父,则A也算C的师父. 不合法: 1) . 互为师徒:(有回路) 2) .你的师父是你徒弟 ...
- LeetCode 183. Customers Who Never Order (从不订购的客户)
题目标签: 题目给了我们 Customers 和 Orders 两个表格,让我们找到 从没订购过的客户. 首先从Orders 得到 订购过的CustomerId,然后再去Customers 里找 没有 ...
- 基于Netty的RPC架构学习笔记（十一）：粘包、分包分析，如何避免socket攻击
文章目录 问题 消息如何在管道中流转 源码解析 AbstractNioSelector.java AbstractNioWorker.java NioWorker.java DefaultChanne ...
- Android Telephony分析(三) ---- RILJ详解
前言 本文主要讲解RILJ工作原理,以便更好地分析代码,分析业务的流程.这里说的RILJ指的是RIL.java (frameworks\opt\telephony\src\java\com\andro ...
- linux 下安装maven私服
1.下载最新nexus安装包 下载地址:https://www.sonatype.com/download-oss-sonatype 2.下载JDK7,nexus2版本支持JDK7:nexus1版本支 ...
- 7_API调用
0 查看 kifastcallentry 里面具体怎么调用 首先是 切换了 fs 为kpcr的选择子 然后 构造了 一个trap frame(保存3环-->0环 切换的上下文:如果0环不使用就没 ...
- Aop 简单实例
一 , 定义aop @Aspect @Component public class MyAspect { //* com 这里有个 空格 ! @Pointcut("execution(* c ...
- Linux的s、t、i、a权限(转)
原文链接:http://blog.chinaunix.net/uid-712656-id-2678715.html 文件权限除了r.w.x外还有s.t.i.a权限: s:文件属主和组设置SUID和GU ...
- ci 连接myssql
由于要将mssql 和 mysql 里面的数据进行对比,So. 配置:database.php $db['default']['hostname'] = '192.168.1.222'; $db['d ...
- 线段树区间合并+k维空间的曼哈顿距离——cf1093G好题
和去年多校的CSGO一样,用状态压缩来求Manhattan距离的最大值 然后要用线段树维护一下区间最大值 /* k维空间给定n个点,两个操作 1 i b1 b2 .. bk : 修改第i个点的坐标 2 ...