目录：

1、节点类型之Document类型

2、节点类型之Element类型

3、节点类型之Text类型

4、综合小示例 -- 动态添加外部样式文件

5、查找元素的扩展方法

接上篇，我们先来看常用的三种节点类型。

Document 类型

js通过Document类型表示文档。

在浏览器中，document对象是HTMLDocument(继承自Document类型) 的一个实例，表示整个HTML页面。

而且，document对象是window对象的一个属性，可以将其作为全局对象来访问。

1、访问子节点

有两个内置的访问其子节点的快捷方式，documentElement和childNodes

例子：

<html>

<head>

    <title>Sample Page</title>

</head>

<body>

    <p>Hello world!</p>

</body>

</html>

这个页面经过浏览器解析后，其文档只包含一个子节点，即<html>元素。

        // 访问文档子节点 documentElement 和 childNodes

        var html = document.documentElement;    // 取得对 <html>的引用

        alert(html === document.childNodes[0]); // true

        alert(html === document.firstChild);    // true

另外还有个 body 属性，直接指向 <body>元素

        var body=document.body;

2、访问文档信息

作为HTMLDocument的一个实例，document对象还有一些标准的Document对象没有的属性。这些属性提供了document对象所表现的网页的一些信息：title, URL, domain, referrer

        // 文档信息： title, URL, domain, referrer

        var originalTitle = document.title;

        var url = document.URL;

        var domain = document.domain;

        var referrer = document.referrer;

3、查找元素

Document类型提供了两个方法 getElementById() 和 getElementByTagName()

根据Id取得元素 ： getElementById(ID)

假设有div片段

<div id="myDiv">Some text</div>

可以用如下代码取得这个元素

var div = document.getElementById("myDiv"); // 取得 <div> 元素的引用

注意:

1、上面的参数大小写必须严格匹配。

2、如果页面中多个元素的ID值相同，getElementById()只返回文档中第一次出现的元素。

根据标签名取得元素 getElementsByTagName(标签名)

返回值：包含0或多个元素的NodeList，在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，该对象与NodeList非常类似。

示例：取得页面中所有的<img>元素

        // 取得页面中所有的 <img> 元素

        var images = document.getElementsByTagName("img");

        alert(images.length);  //输出图像数量

        alert(images[0].src);  //输出第一个图像的 src 特性

        alert(images.item(0).src);  //输出第一个图像的 src 特性

Element 类型

这是我们最常接触的类型，HTML主体结构中所有标签都是这个类型。

要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。例子：

    <div id="myDiv">Some text</div>

可以像下面这样取得这个元素及其标签名：

        alert(div.tagName); //"DIV"

        alert(div.tagName == div.nodeName); //true

div.tagName输出的是 DIV 而非 div , 在HTML中，标签名始终以全部大写表示。

1、HTML元素

所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。

HTMLElement类型直接继承自Element并添加了一些属性。

每个HTML元素都存在着下列标准特性。

id，元素在文档中的唯一标识符

title, 有关元素的附加说明信息，一般通过工具提示条显示出来

lang, 元素内容的语言代码，很少使用

dir, 语言的方向，值为 ltr 或 rtl （ l:left, t:to, r:right ）,  很少使用

className, 与元素的class特性对应，即为元素指定的CSS类

例子：

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr">Some text</div>

示例：通过js 取得标准特性值

        var div = document.getElementById("myDiv");

        alert(div.id);  //"myDiv"

        alert(div.className);  //"bd"

其他title, lang, dir取得方法类似

2、取得特性值

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。

操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。

接上面例子，获取特性值。

        alert(div.getAttribute("id")); //"myDiv"

        alert(div.getAttribute("class")); //"bd"

通过getAttribute()方法也可以取得自定义特性

    <div id="myDiv" data-geo="China">Hello world!</div>

取得自定义值：

    var geo = div.getAttribute("data-geo");

原生的元素特性，可以通过DOM元素本身的属性来访问, 例如 div.id ，

自定义的只能通过getAttribute()来访问。

一般使用对象的属性，只有取得自定义特性的情况下才用getAttribute()方法。

3、设置特性值

通过 setAttribute() 方法既可以操作HTML特性也可以操作自定义特性。

通过这个方法设置的特性名会统一转成小写。

如果特性不存在会创建该属性并设置相应的值。

        div.setAttribute("id", "someOtherId");

        div.setAttribute("class", "someOtherClass");

        div.setAttribute("data-date", "2019-9-1");

原生的特性也可以通过属性赋值的方法设置。

div.align = "left";

使用removeAttribute()方法彻底删除元素的特性，如

div.removeAttribute("class");

综合示例：创建元素

使用document.createElement()方法可以创建新元素，例子：

        //1、创建一个 <div> 元素

        var div = document.createElement("div");

        // 2、添加特性

        div.id = "myNewDiv";

        div.className = "box";

        // 3、加到文档树中

        document.body.appendChild(div);

Text 类型

这个类型比较简单，介绍一个创建文本节点的方法， createTextNode()，例子

        var element = document.createElement("div");

        element.className = "message";

        var textNode = document.createTextNode("Hello world!");

        element.appendChild(textNode)

        var anotherTextNode = document.createTextNode("Yippee!");

        element.appendChild(anotherTextNode);

        document.body.appendChild(element);

DOM操作综合例子 – 添加外部样式文件

以引入样式文件为例

<link rel="stylesheet" type="text/css" href="styles.css" />

使用js构建这个引用

        var link = document.createElement("link");

        link.rel = "stylesheet";

        link.type = "text/css";

        link.href = "style.css";

        var head = document.getElementsByTagName("head")[0];

        head.appendChild(link);

用函数来封装一下

        function loadStyles(url) {

            var link = document.createElement("link");

            link.rel = "stylesheet";

            link.type = "text/css";

            link.href = url;

            var head = document.getElementsByTagName("head")[0];

            head.appendChild(link);

        }

调用该函数：

loadStyles("styles.css");

常用的动态加载js文件，也可采用类似做法。

查找元素的扩展方法

选择符 API

Document类型中我们介绍了通过 getElementById()和getElementsByTagName()来查找元素，不过这两种方法对一些更加个性化的查询就有点力不从心了。

Selectors API可以让浏览器原生支持CSS查询。

通过DOM扩展方法可以通过CSS选择符来查询，核心的两个方法：querySelector()和querySelectorAll()

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有，返回null

示例：

获取文档中第一个 <p> 元素：

document.querySelector("p");

获取文档中 class="example" 的第一个元素:

document.querySelector(".example");

获取文档中 class="example" 的第一个 <p> 元素:

document.querySelector("p.example");

获取文档中有 "target" 属性的第一个 <a> 元素：

document.querySelector("a[target]");

querySelectorAll()返回的是一个NodeList的实例。

只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素。如果没找到匹配的元素，NodeList就是空的。

// 获取文档中所有的 <p> 元素

var x = document.querySelectorAll("p");

// 设置第一个 <p> 元素的背景颜色

x[0].style.backgroundColor = "red";

插入标记技术innerHTML和outHTML

获取修改html时，直接使用插入标记技术更加方便。

innerHTML和outHTML这两个DOM扩展已经纳入了HTML5规范。

1、innerHTML属性

<div id="content">

<p>

Hello world!

</p>

</div>

对应上面的<div>元素来说，它的 innerHTML属性会返回如下字符串

<p>

Hello world!

</p>

2、outHTML属性

<div id="content">

<p>

Hello world!

</p>

</div>

对应上面的<div>元素来说，它的 outerHTML属性会返回与上面相同的代码，包括<div>本身。

同样也可以设置值，如

var div = document.getElementById("content");

div.outerHTML = '<p>remove div</p>';

总结

我们介绍了DOM1级常用的操作，DOM1 级主要定义的是HTML和XML文档的底层结构。

DOM2和DOM3级则是在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性，一个常用的功能就是用来设置样式：

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性，我们可以通过这个属性设置样式，如

var div = document.getElementById("content");

div.style.backgroundColor = "red";

div.style.border = "1px solid black";

也可以使用cssText, 一次设置多个样式属性，推荐使用。

div.style.cssText = "background-color:green; border:3px solid red;";

理解DOM的关键，就是理解DOM对性能的影响。

DOM操作往往是js中开销最大的部分，应尽量减少DOM操作。

（通过合并操作减小操作的次数）

祝编程开心 ：）

JS核心之DOM操作 下的更多相关文章

  1. JS核心之DOM操作 上

    JS一个重要功能就是操作DOM, 改变页面显示. 目录: 1.基本概念 2.节点类型 3.节点关系 4.节点操作 基本概念 DOM全称为Document Object Model ,即文档对象模型,是 ...

  2. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  3. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  4. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  5. js练习【DOM操作】

    完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en" ...

  6. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

  7. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  8. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  9. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

随机推荐

  1. 搭建python环境

    参考文章:https://blog.csdn.net/qq_33855133/article/details/73106176 对于配置环境变量,懂些技术的人来说,都是很简单. 变量是在操作系统中一个 ...

  2. （读论文）推荐系统之ctr预估-NFM模型解析

    本系列的第六篇,一起读论文~ 本人才疏学浅,不足之处欢迎大家指出和交流. 今天要分享的是另一个Deep模型NFM(串行结构).NFM也是用FM+DNN来对问题建模的,相比于之前提到的Wide& ...

  3. git远程服务器回滚

    1.git log查找commit hash 2.git reset --hard hash 回滚本地git库 3.git push -f origin(git仓库的url) branch名 强制提交

  4. .net持续集成测试篇之Nunit参数化测试

    系列目录 在进行单元测试的时候,很多时候,很多时候我们都是在单元测试方法内部提供特定的值,但是这样测试往往造成样本数不足从而导致覆盖的结果不够全面,很多时候我们更想提供来自外部的,满足条件的一组值来进 ...

  5. js 双向绑定数据

    let aaa = []; let bbb = [1,2,3]; let ccc = [0,9,8]; aaa = bbb; //此时aaa与bbb被绑定(aaa指向bbb的指向) ,若使用push则 ...

  6. 从原理层面掌握@RequestAttribute、@SessionAttribute的使用【一起学Spring MVC】

    每篇一句 改我们就改得:取其精华,去其糟粕.否则木有意义 前言 如果说知道@SessionAttributes这个注解的人已经很少了,那么不需要统计我就可以确定的说:知道@RequestAttribu ...

  7. 5、数组的复制（test2.java、test3.java）

    对于数组的复制,在最开始的时候最容易犯的一个错误,那就是自己认为的申请一个数组,然后将已存在的数组赋值到新申请数组名上,这样是错误的,这样仅仅是将数组的地址复制了过去,并不是,将数组内的元素拷贝过去, ...

  8. java并发编程（九）----(JUC)CyclicBarrier

    上一篇我们介绍了CountDownlatch,我们知道CountDownlatch是"在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待",即CountDownL ...

  9. Starling 环形进度条实现

    项目初期想实现这个效果来着,查了很多资料(包括式神的<神奇的滤镜>),也没找到完美的实现方法,,当时时间紧迫,就找了传统的进度条来代替实现. 最近偶然心血来潮,查了各方面资料,终于找到实现 ...

  10. 用python实现银行家算法

    编制模拟银行家算法的程序,并以下面给出的例子验证所编写的程序的正确性. 进程 已占资源 最大需求数 资源种类 A B C D A B C D P0 0 0 1 2 0 0 1 2 P1 1 0 0 0 ...