JS核心之DOM操作 下
目录：
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操作。
（通过合并操作减小操作的次数）
祝编程开心 ：）
下一篇： canvas 绘制动态圆环进度条