DOM之节点操作
DOM 提供了很多实用的 API，这些 API 让我们可以轻松的访问 HTML 文档。所谓 API（应用程序接口），简单来说，如果一个应用程序提供了一些 API，那么我们就可以使用这些 API 实现一些功能，而不用了解程序内部的运作过程和原理。
DOM API 可以让我们操作 DOM 节点，以后还会讲到 BOM API，它可以让我们操作浏览器的一些属性和方法，BOM API + DOM API 统称为 Web API。
前面我们已经了解了 DOM 把 HTML 文档解析为节点树，实际上 HTML 节点树只是整个 DOM 树的一个分支，另一个分支则是 XML。在详细介绍 HTML DOM 节点的操作之前，先来看一下完整的DOM 树：
网上没找到关于完整的 DOM 树的图，所以自己大致做了一个。准确说这个应该叫 DOM 继承树，因为很多我们常用的 DOM 对象的方法都绑定在 Document 和 Element 对象上。我们从 HTML 文档获取的 DOM 元素上使用的方法，其实大部分都继承自这俩。（上图 Element 的子分支写错了，应该是 HTMLElement 和 XMLElement，之前的图不见了，懒得重新做，特此说明）
这里放一段 HTML 代码供后面测试使用：
<body>
<h1 class="h1">h1</h1>
<h3 id="h3">h3</h3>
<div name="div">
<p>
<span>span</span>
</p>
</div>
</body>
一 查找节点
1， 元素(标签)查找
document 代表整个文档。
document.getElementById()：通过标签 ID 属性查找元素。绑定 在Document 上所以只能使用document调用。
document.getElementsByName()：通过标签 name 属性查找元素（所有的）。绑定在 HTMLDocument 上，只能使用document调用。
.getElementsByTagName()：通过标签名查找元素（所有的）。Document 和 Element 上均有绑定。
.getElementsByClassName()：通过标签 class 属性查找元素（所有的）。Document 和 Element 上均有绑定。
.querySelector()：通过css方式查找元素。Document 和 Element上均有绑定。
.querySelectorAll()：通过css方式查找元素（所有的）。Document 和 Element上均有绑定。
注意，最后两个虽然速度快，但它不是实时的查找元素，而是这一时刻的静态快照，如果这之后DOM结构发生改变，可能会产生预期之外的结果，所以使用的时候请务必小心。
var h3 = document.getElementById("h3"),
h1 = document.getElementsByClassName("h1")[0],
div = document.getELementsByName("div")[0],
p = document.getElementsByTagName("p")[0],
span = p.getElementsByTagName("span")[0];
除了.getElementById和.querySeletor 是获取单个元素外，其他方式都是获取一组元素，返回值都是类数组，所以访问需遵循数组访问方式。
2， 节点树遍历（包含所有类型节点）
node.parentNode：获取节点的父节点。
node.childNodes：获取节点的所有子节点。
node.firstChild：获取节点的第一个子节点。
node.lastChild：获取节点的最后一个节点。
node.nextSibling：获取节点紧邻的下一个兄弟节点。
node.previousSibling：获取节点紧邻的上一个兄弟节点。
多数情况下我们都是访问元素节点，所以这里就不举例说明了。
3， 元素节点树遍历（只包含元素）
node.parentElement：获取节点的父元素节点。
node.children：获取节点的所有子元素节点。
node.firstElementChild：获取节点的第一个元素子节点。
node.lastElementChild：获取节点的最后一个元素子节点。
node.nextElementSibling：获取节点的紧邻的下一个兄弟元素。
node.previousElementSibling：获取节点的紧邻的上一个兄弟元素。
元素节点都有一个 attributes 属性，值是该元素节点的属性集合,诸如 id，class，name 等等，也是一个类数组。
h3.parentElement;//body
p.children[0];//span
document.body.firstElementChild;//h1
document.body.lastElementChild;//div
h1.nextElementSibling;//h3
div.previousElementSibling;//h3
二 创建节点
1，创建
document.createElement()：创建元素节点。
document.createTextNode()：创建文本节点。
document.createComment()：创建注释节点。
document.createElement('button');
document.createTextNode('我是文本')；
document.createComment('我是注释');
2，插入
parentNode.appendChild()：向父元素内部的最后一个位置插入节点。
parentNode.insertBefore(a,b)：向父元素内部b节点之前插入a节点。
var strong = document.createElement("strong");
p.appendChild(strong);
console.log(p);//<p><span>span</span><strong></strong><p>
var text = document.createTextNode("some text");
div.insertBefore(text,p);
/*
<div>
some text
<p>
<span>span</span>
<strong></strong>
</p>
</div>
*/
三 删除节点
1，删除
parentNode.removeChild()：父节点删除子节点，从页面剪切出来，有返回值。
node.remove()：节点自己，直接删除，无返回值。
<div>
<p></p>
</div>
*********************************
var oDiv = document.getElementsByTagName('div')[0],
oP = document.getLEementsByTagName('p')[0];
oDiv.removeChild(oP);//父删子
//oP.remove();删自己
2，替换
parentNode.replaceChild(new,old)：用new节点替换父元素内部old节点。用的很少。
var removedH1 = document.body.removeChild(h1);
console.log(removedH1);//<h1 class="h1">h1</h1>
var removedH3 = h3.remove();
console.log(removedH3);//undefined
补充：元素节点的属性和方法
属性
element.innerHTML：获取父节点内部的HTML结构。
element.innerText/textContent：获取父节点内部的文本内容。
方法
element.setAttribute()：设置元素的属性和值。
element.getAttribute()：获取元素的属性值。
element.removeAttribute()：移除元素的属性。
div.innerHtml;//<div><span>span</span></div>
span.innerText;//"span"
h1.getAttribute("class");//"h1"
h1.setAttribute("id","idh1");//<h1 class="h1" id = "idh1"></h1>
h1.removeAttribute("id");//<div class="h1"></div>
以往，我们通过 element.[属性名] 的方式只能读取或设置元素自带的属性，例如 class，id，src 等，而上述方法不仅仅可以读取或设置自带属性，还可以为元素添加自定义属性，并做修改或移除。同时，H5 新规范还为我们提供了一个额外的属性：element.dataset，读取自定义属性集合。你可以通过该属性读取或设置自定义属性值。
var oDiv = document.getElementsByTagName('div')[0];
oDiv.setAttribute('data-index',1);//新添加自定义属性 data_index，并设置其值为1
oDiv.getAttribute('data-index');//
oDiv.dataset.index;//1
注意：H5 规定所有自定义属性都以 data- 开头。
DOM之节点操作的更多相关文章
- dom的节点操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- 第6章 DOM节点操作
一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
随机推荐
- 如何让springboot打包的项目部署在阿里云上使用https和http方式访问
前言 问题描述:怎么让springboot部署在服务器上使用https协议方式访问我们的接口或者域名,目的是某些平台请求的是https协议,而不是https 部署环境:阿里云 centos7服务器,s ...
- nginx对特定参数限流
接到一个需求, 需要对请求(GET)里面的某个参数 的特定的值, 进行限流; 因为不限流的话, 不知道什么时候这个id的请求飙一下, 服务端就被压死了... 就像这样: /index.html?id ...
- AVL-平衡二叉树的原理和实现
一.简介 本文将通过图解和代码详细讲解AVL平衡二叉树的性质及失衡和再平衡的内容.在看本文之前希望大家具备二分搜索树的相关知识.或移步<二分搜索树>了解二分搜索树. 二.平衡二叉树 前面关 ...
- POJ 3186
题意略. 思路:有一点区间dp的意思. 我令dp[ i ][ j ]表示:区间[1 , i]和区间[j , N]按某种顺序插值排好,所能获得的最大值. 状态转移方程:dp[ i ][ j ] = ma ...
- CodeForces 677D. Vanya and Treasure 枚举行列
677D. Vanya and Treasure 题意: 给定一张n*m的图,图上每个点标有1~p的值,你初始在(1,1)点,你必须按照V:1,2,3...p的顺序走图上的点,问你如何走时间最少. 思 ...
- BZOJ2038 小Z的袜子 莫队
BZOJ2038 题意:q(5000)次询问,问在区间中随意取两个值,这两个值恰好相同的概率是多少?分数表示: 感觉自己复述的题意极度抽象,还是原题意有趣(逃: 思路:设在L到R这个区间中,x这个值得 ...
- 牛客OI测试赛 C 序列 思维
链接:https://www.nowcoder.com/acm/contest/181/C来源:牛客网 题目描述 小a有n个数,他想把他们划分为连续的权值相等的k段,但他不知道这是否可行. 每个数都必 ...
- CodeForces 939E Maximize
Maximize 题意:整个程序有2种操作,操作1将一个元素放入集合S中,且保证最新插入的元素不小于上一次的元素, 操作2 找到集合S中的某个子集合, 使得 集合中最大的元素减去平均数的值最大. 题解 ...
- CodeForces 669 E Little Artem and Time Machine CDQ分治
题目传送门 题意:现在有3种操作, 1 t x 在t秒往multiset里面插入一个x 2 t x 在t秒从multiset里面删除一个x 3 t x 在t秒查询multiset里面有多少x 事情是按 ...
- CF1029C Maximal Intersection 暴力枚举
Maximal Intersection time limit per test 3 seconds memory limit per test 256 megabytes input standar ...