JS核心之DOM操作 下
目录：
1、节点类型之Document类型
2、节点类型之Element类型
3、节点类型之Text类型
4、综合小示例 -- 动态添加外部样式文件
5、查找元素的扩展方法
接上篇，我们先来看常用的三种节点类型。
Document 类型
js通过Document类型表示文档。
在浏览器中，document对象是HTMLDocument(继承自Document类型) 的一个实例，表示整个HTML页面。
而且，document对象是window对象的一个属性，可以将其作为全局对象来访问。
1、访问子节点
有两个内置的访问其子节点的快捷方式，documentElement和childNodes
例子：
复制代码
Sample Page
Hello world!
复制代码 这个页面经过浏览器解析后，其文档只包含一个子节点，即元素。 复制代码 // 访问文档子节点 documentElement 和 childNodes var html = document.documentElement; // 取得对 的引用 alert(html === document.childNodes[0]); // true alert(html === document.firstChild); // true 复制代码 另外还有个 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片段Some text
可以用如下代码取得这个元素
var div = document.getElementById("myDiv"); // 取得 元素的引用
注意:
1、上面的参数大小写必须严格匹配。
2、如果页面中多个元素的ID值相同，getElementById()只返回文档中第一次出现的元素。
根据标签名取得元素 getElementsByTagName(标签名)
返回值：包含0或多个元素的NodeList，在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，该对象与NodeList非常类似。
示例：取得页面中所有的![]()
元素
复制代码
// 取得页面中所有的 ![]()
元素
var images = document.getElementsByTagName("img");
alert(images.length); //输出图像数量
alert(images[0].src); //输出第一个图像的 src 特性
alert(images.item(0).src); //输出第一个图像的 src 特性
复制代码
Element 类型
这是我们最常接触的类型，HTML主体结构中所有标签都是这个类型。
要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。例子：
Some text
可以像下面这样取得这个元素及其标签名：
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类
例子：
Some text
示例：通过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()方法也可以取得自定义特性
Hello world!
取得自定义值：
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、创建一个 元素
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操作综合例子 – 添加外部样式文件
以引入样式文件为例
使用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
示例：
获取文档中第一个
元素： document.querySelector("p"); 获取文档中 class="example" 的第一个元素: document.querySelector(".example"); 获取文档中 class="example" 的第一个