1.节点层次
当页面被加载时，浏览器会创建页面文档对象模型（Document Object Model）。
文档元素是文档最外层的元素，文档中的其他所有元素都包含在文档元素中，每个文档只有一个文档元素。
在HTML页面中，文档元素始终都是html元素。
1.1 Node类型
javascript中的所有节点类型都继承自Node类型。
-
每个节点有一个nodeType属性，用来表示节点类型。
-
nodeName和nodeValue属性
-
节点关系
1） 每个节点都有一个childNodes属性，其中保存着一个NodeList对象。
访问保存在NodeList中的节点。
2）每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
3）通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表的其他节点 -
操作节点
1）appendChild()用于向childNodes列表的末尾添加一个节点。
如果添加的节点已经是文档的一部分，将该节点从原来的位置转移到新位置。
2）insertBefore():参数要插入的节点和作为参照的节点
3）replaceChild():方法接收两个参数，要插入的节点和要替换的节点。
4）removeChild()：接收一个参数，要移除的节点
1.2 Document类型
Document类型表示文档，document对象是HTMLDocument（继承自Document）的一个实例，表示整个HTML页面。
document对象是window对象的一个属性，可作为全局对象访问。
Document节点具有如下属性：
1）文档子节点
-
documentElement属性：该属性始终指向HTML页面中的<html>元素
2）文档信息
-
title：包含<title>元素中的文本
-
URL、domain、referrer属性
URL：包含页面完整的URL
domain:只包含页面的域名
referrer:保存着链接到当前页面的那个页面的URL
3）查找元素
- getElementById()
接收一个参数：要取得的元素的ID
- getElementsByTagName()
接收一个参数：要取得元素的标签名
会返回一个HTMLCollection对象。
let images=document.getElementsByTagName（“img”）;
alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的src属性
alert(images.item(0).src); //输出第一个图像元素的src属性
HTMLCollection对象支持按名称访问
<img src="myimage.gif" name="myImage">
let images=document.getElementsByTagName（“img”）;
let myImage=images.namedItem("myImage");
let myImage=images["myImage"];
-
getElementsByName()
返回带有给定name特性的所有元素
let radios=document.getElementsByName("color");
-
特殊集合
这些集合都是HTMLCollection对象，按照如下方式访问
-
DOM一致性检测
DOM1规定了一个方法：
document.implementation.hasFeature();
接收两个参数：要检测的DOM功能名称及版本号
-
文档写入
write()、writeln()、open()、close()
写入外部资源时，要注意不能直接包含</script>,会导致解释错误，按照如下方法来实现
在文档加载结束后调用document.write()方法，会重写整个页面
1.3 Element类型
1） HTML元素
-
都由HTMLElement类型或它的子类来表示。具有如下属性
-
操作属性
每个元素都有一个或者多个属性，操作属性的方法：getAttribute()、setAtrribute()、removeAttribute。
这些方法可以针对任何属性，包括以HTMLElement类型属性定义的特性。
i） getAttribute()
只有非自定义的属性会以属性的形式添加到DOM对象中
注意：通常情况下。在通过JS操作DOM时，开发人员经常不使用getAttribute(),而是只使用对象的属性，只有在取得自定义属性时，才使用getAttribute()方法。
ii) setAttribute（）：包括两个参数，要设置的特性名和值
操作默认属性
操作自定义属性时，必须使用setAttribute（）方法，如果直接赋值，不会有作用
iii)removeAttribute()
2 )创建元素
使用document.createElement()方法可以创建新的元素。
let div=document.createElement("div");
div.id="myNewDiv";
div.className="box";
document.body.appentChild(div);
在IE中可以在参数中传入完整的元素标签
3）元素的子节点
IE解析:ul包括3个子节点,分别是3个<li>元素
其他浏览器：ul包括7个子节点，分别是3个<li>元素，和ul和li之间的空白文本节点。
在使用childNodes遍历子节点时，要先检查该元素的类型是不是元素。
通过特定的标签名取得子节点或后代节点，使用getElementsByTagName()方法
1.4 Text类型
- 获取文本节点并修改
let textNode = div.firstChild;//或者div.childNodes[0]
textNode.nodeValue="Some other message";
此时赋值的字符串会经过编码
-
创建文本节点
document.createTextNode（）
创建两个文本节点
两个文本节点是相邻的同胞节点，这两个节点中的文本会连起来显示，中间不会有空格。
-
规范化文本节点
Node类中的normalize()方法，在一个包含两个或者多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点。
-
分割文本节点
与normalize()方法相反的方法：splitText(),将一个文本节点分成两个，原节点包含从开始到指定位置之前的内容，新文本节点包含剩下的文本，方法返回新文本节点。
1.5 Comment类型（注释）
-
访问注释节点
-
创建注释节点
1.6 DocumentType类型
包含着与文档的doctype有关的信息。支持它的浏览器会把DocumentType对象保存在document.doctype中，DOM1中描述了DocumentType对象的3个属性:name、entities、notations。
1.7 DocumentFragment类型
为了避免反复渲染，可以使用DocumentFragment。
2.DOM操作技术
2.1 动态创建脚本
2.2 动态创建样式
2.3 操作表格
使用核心DOM方法创建这些元素
为了减少创建表格的复杂性，HTMLDOM为<table>、<tbody>、<tr>元素添加一些属性和方法
重写后的代码：
3.dom操作HTML
3.1 通过document对象调用
//body属性，返回body节点
document.body
//documentElement属性，返回html根节点
document.documentElement
//all属性，返回页面中所有元素
document.all
//通过id获取一个元素结点对象
document.getElementById("参数为id");
//通过标签名获取一组元素结点对象
document.getElemtsByTagName("参数为标签名")；
//通过name属性获取一组元素结点对象
document.getElementsByName("参数为name属性值");
//通过class属性获取一组元素结点对象
document.getElementsByClassName("参数为类名");
//创建元素节点对象并返回
document.createElement("参数标签名")
//创建文本节点对象并返回
document.createTextNode("文本内容");
3.2 获取元素节点的子节点，通过具体元素节点调用
1） 获取后代节点
//返回当前节点指定标签名的所有后代结点
E.getElementsByTagName();
//属性childNodes,返回当前节点的所有子节点，标签间空白会被当作文本结点（除了IE8之前的IE浏览器）
E.childNodes
//属性children，返回当前节点的的所有子元素
E.childen
//属性firstChild，返回当前节点的第一个子节点，(包括空白文本节点)
E.firstChild
//属性firstElementChild，返回当前节点的第一个子元素，不支持IE8及以下
E.firstElementChild
//属性lastChild，返回当前节点的最后一个子节点(包括空白文本节点)
E.lastChild
//属性lastElementChild，返回当前节点的最后一个子元素
E.lastElementChild
2）获取父节点和兄弟节点
//parentNode,获取当前节点的父节点
E.parentNode
//previousSibling,获取当前节点的前一个兄弟节点
E.previousSibling
//nextSibling,获取当前节点的后一个兄弟节点
E.nextSibling
3）添加替换删除节点
//父节点.appendChild(子节点)
let li=document.createElement("li");
city.appendChild(li)；
//指定的子节点前插入新的子节点，父节点.insertBefore(新节点，旧节点)
city.insertBefore(li,bj);
//指定的子节点替换已有的子节点，父节点.replaceChild(新节点，旧节点)
city.replaceChild(li,bj)；
//删除一个节点，父节点.removeChild(子节点)
city.removeChild(bj);
4.dom操作css
4.1 获取内联样式
元素.style.样式名
box.style.width
4.2 获取样式表样式
IE中使用：元素.currentStyle.样式名
其他浏览器:getComputedStyle(box1,null).样式名
/**
* obj：元素名 name:样式名
*/
function getStyle(){
//正常浏览器方法
if(window.getComputedStyle){
return getComputedStyle(box1,null)[name];
}else{
return obj.currentStyle[name];
}
}
