目录：

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. ubuntu 单机配置hadoop

    前言 因为是课程要求,所以在自己电脑上安装了hadoop,由于没有使用虚拟机,所以使用单机模拟hadoop的使用,可以上传文件,下载文件. 1.安装配置JDK Ubuntu18.04是自带Java1. ...

  2. rabbitMQ_helloworld(一)

    在下图中,“P”是我们的生产者,“C”是我们的消费者.中间的框是队列 - RabbitMQ代表消费者的消息缓冲区. 本例使用maven构建项目,在pom.xml中添加一下依赖 <dependen ...

  3. idea中写servlet时报错--关于405错误

    将super方法注释掉 原因:super是调用了此类继承父类doget和dopost方法的, 如果此类中没有这个方法,就会报错The specified HTTP method is not allo ...

  4. 【iOS】Error: Error Domain=PBErrorDomain Code=7 "Cannot connect to pasteboard server

    这几天在用 Swift 开发一个简单的键盘扩展,真机调试时遇到了这个问题,详细信息如下: ***[:] Could not save pasteboard named com.apple.UIKit. ...

  5. ajax具体实现学习记录

    记录自己对ajax\的理解, 首先要明白ajax是为了解决什么问题,简单来讲就是为了局部刷新页面,而不刷新整个界面.就比如现在有一个实时热度的显示,它是不断变化的,所以你肯定要不停的从数据库当中获取热 ...

  6. 旁友数独会伐啦？python秒解数独了解下伐啦？

    前几天和隔壁邻居玩斗地主被发现了,牌被没收了,斗地主是斗不了了,但我还想和邻居玩耍.如果你还想斗斗地主,戳:趁老王不在,和隔壁邻居斗斗地主,比比大小 想破脑袋终于让我想到一个游戏,数独!什么叫数独?数 ...

  7. spark 入门教程合集

    看到一篇不错的 spark 入门教程的合集,在此记录一下 http://www.cnblogs.com/shishanyuan/p/4699644.html

  8. CentOS 7服务器安装brook和bbr加速

    一.安装Brook 执行一键部署脚本 $ wget -N --no-check-certificate wget -N --no-check-certificate https://raw.githu ...

  9. asp.net core系列 69 Amazon S3 资源文件上传示例

    一.  上传示例 Install-Package AWSSDK.S3 -Version 3.3.104.10 using Amazon; using Amazon.Runtime; using Ama ...

  10. Codeforces Round #575 (Div. 3)

    本蒟蒻已经掉到灰名了(菜到落泪),希望这次打完能重回绿名吧...... 这次赛中A了三题 下面是本蒟蒻的题解 A.Three Piles of Candies 这题没啥好说的,相加除2就完事了 #in ...