目录：

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. 算法-一步步教你如何用c语言实现堆排序（非递归）

    看了左神的堆排序,觉得思路很清晰,比常见的递归的堆排序要更容易理解,所以自己整理了一下笔记,带大家一步步实现堆排序算法 首先介绍什么是大根堆:每一个子树的最大值都是子树的头结点,即根结点是所有结点的最 ...

  2. 研究分布式唯一ID生成，看完这篇就够

    很多大的互联网公司数据量很大,都采用分库分表,那么分库后就需要统一的唯一ID进行存储.这个ID可以是数字递增的,也可以是UUID类型的. 如果是递增的话,那么拆分了数据库后,可以按照id的hash,均 ...

  3. Apache和Spring提供的StopWatch执行时间监视器

    相关阅读 [小家java]java5新特性(简述十大新特性) 重要一跃 [小家java]java6新特性(简述十大新特性) 鸡肋升级 [小家java]java7新特性(简述八大新特性) 不温不火 [小 ...

  4. Jibx 只绑定需要的字段

    栗子:     binding.xml   <?xml version="1.0" encoding="UTF-8"?> <binding&g ...

  5. Golang高效实践之泛谈篇

    前言 我博客之前的Golang高效实践系列博客中已经系统的介绍了Golang的一些高效实践建议,例如: <Golang高效实践之interface.reflection.json实践>&l ...

  6. python整形及浮点型求余数的区别

    1.代码如下 a=7.0b=4.0c=7e=4 #整形求余print("%d/%d=%d" %(c,e,c/e)) #将浮点型强制转换为整形,余数用浮点型表示print(" ...

  7. vagrant 创建虚拟机时遇到问题

    问题1 :  ceph-node3: Warning: Authentication failure. Retrying.. 问题分析: ssh 认证失败,在向虚拟机拷贝内容时权限不足. 解决办法: ...

  8. 【kafka】一、消息队列

    在高并发的应用场景中,由于来不及同步处理请求,接收到的请求往往会发生阻塞.例如,大量的插入.更新请求同时到达数据库,这会导致行或表被锁住,最后会因为请求堆积过多而触发“连接数过多的异常” 的错误.因此 ...

  9. Unity经典游戏编程之：球球大作战

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  10. Oracle 存储过程批量插入数据

    oracle 存储过程批量插入大量数据 declare numCount number; userName varchar2(512); email varchar2(512); markCommen ...