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之节点操作的更多相关文章

  1. dom的节点操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  4. Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  5. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  6. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  7. jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  8. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  9. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

随机推荐

  1. zabbix利用自带模板-监控mysql性能

    环境: zabbix3.4.4 mariadb 5.5.56 要求:  利用zabbix 自带的模板 监控mariadb 上的 并发连接数,慢查询数量,增删改查.请求流量带宽,mysql响应流量带宽等 ...

  2. c++智能指针介绍

    C++11标准引入了boost库中的智能指针,给C++开发时的内存管理提供了极大的方便.接下来这篇文件介绍shared_ptr/weak_ptr内部实现原理及使用细节. C++不像java有内存回收机 ...

  3. git之旅,畅游git的世界

    今天小铭酱带大家探索一下git的奥秘! 1.初步探索 首先我在一个空的文件夹新建了一个名叫hello.html文件,文件内容只有一句话“hello git”.我们先引入git,看看git能为我们它能干 ...

  4. 内容协商在视图View上的应用【享学Spring MVC】

    每篇一句 人生很有意思:首先就得活得长.活得长才能够见自己,再长就可以见众生 前言 在经过 前两篇 文章了解了Spring MVC的内容协商机制之后,相信你已经能够熟练的运用Spring MVC提供的 ...

  5. Linux 用户和组 权限管理 常用命令与参数

    ========================================================================== 1.基本概念: 所有者 : 一般为文件的创建者,谁 ...

  6. 给 asp.net core 写个中间件来记录接口耗时

    给 asp.net core 写个中间件来记录接口耗时 Intro 写接口的难免会遇到别人说接口比较慢,到底慢多少,一个接口服务器处理究竟花了多长时间,如果能有具体的数字来记录每个接口耗时多少,别人再 ...

  7. HDU 1173 采矿

    采矿 题解:如果给你一条线段(左右端点设为A,B), 那么在这条线上的任意一点到A B距离之和是一个定值, 然后如果再这条线段内在任意确定一个定点C, 那么这条线段上再任意取一个点,这个点到 A B ...

  8. poj 2253 Frogger(floyd变形)

    题目链接:http://poj.org/problem?id=1797 题意:给出两只青蛙的坐标A.B,和其他的n-2个坐标,任一两个坐标点间都是双向连通的.显然从A到B存在至少一条的通路,每一条通路 ...

  9. Python---环境以及编辑器的使用的学习

    1.搭建python的环境 官网下载Python的安装程序,记住一点在安装的时候点一下下面的 Add Python 3.5 to PATH 它会自动给你把安装的python的环境加入到计算机的环境变量 ...

  10. 一次使用scrapy的问题记录

    前景描述: 需要获取某APP的全国订单量,及抢单量.由于没有全国的选项所以只能分别对每一个城市进行订单的遍历.爬虫每天运行一次,一次获取48小时内的订单,从数据库中取出昨天的数据进行对比,有订单被抢则 ...