常用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 ...
随机推荐
- Java-Class-@I：org.apache.ibatis.annotations.Mapper
ylbtech-Java-Class-@I:org.apache.ibatis.annotations.Mapper 1.返回顶部 2.返回顶部 1. package com.ylbtech.ed ...
- anjs 分词器初步使用
由于ik没有歧义分词的功能,打算用anjs 对前端传递过来的数据用anjs进行分词 anjs 操作文档官网地址:http://nlpchina.github.io/ansj_seg/ 刚刚开始由于ja ...
- 打包的@font-face包
在网页中使用 @font-face 规则嵌入字体,前提是可以从你的网站或第三方 Web 服务器下载到相应的字体.以这种方式提供的字体,会在使用该字体的页面第一次加载时被浏览器下载并缓存起来,以后就不用 ...
- JQuery AJAX 通过一般处理程序 取列表
由于上一篇的积累 这一个就简单了 也就是把反回了字符串 显示到table中 $("#btnSearch").click(function () { $.post("Cur ...
- 2018北京网络赛 G The Mole /// 分块暴力 点线距离
题目大意: 给定n段线段 编号为1~n 接下来m个询问 给定一点 输出离该点最近的线段的最小编号(距离相等时取编号小的) 题解 大致就是 1.坐标范围为(0,2^16-1) 将坐标系划分为2^8*2^ ...
- CSIC_716_20191104【流程控制语句】
流程控制语句 if 语法结构 if 逻辑判断为真 : xxxxxx else: xxxxx while 语法结构 (continue.break) while 逻辑判断为真: xxxxxxx con ...
- [转]springmvc+mybatis需要的jar包与详解
1.antlr-2.7.6.jar: 项目中没有添加,hibernate不会执行hql语句 2.Aopalliance.jar: 这个包是AOP联盟的API包,里面包含了针对面向切面的接口,通常Sp ...
- Altera的primary register和secondary register
在Altera的一些IP文档上,提到IP的资源使用情况时,会有primary logic register和secondary logic register这样的术语. 那么什么是primary/se ...
- xml 单例类
MD5JSON.h #pragma once #include "include/json/json.h" #include "include/md5/md5.h&quo ...
- DP杂题2
1.邦邦的大合唱站队 https://www.luogu.org/problem/show?pid=3694 XY说这是道简单的签到题,然后我大概是普及组都拿不到三等的那种了.. 插入题解.写得太好了 ...