1. 什么是DOM?
针对HTML和XML文档的一个API（应用程序接口），描述了一个层次化的节点数，允许开发人员对页面进行修改添加删除等操作。DOM操作往往是JS程序中开销最大的部分。
2. 节点层次：
DOM可以将HTML或XML文档描绘成一个由多层节点构成的结构，最外层为document元素（文档元素）。
2.1 Node类型
A. 节点类型:
一共有12种：可以用数字表示
1元素节点 2属性节点 3文本节点。。。
判断节点类型：//使用于所有的浏览器
if(someNode.nodeType==1){
console.log("Node is an element");
}
B. nodeName和nodeValue属性：
获取节点的名称与值。
C. 节点关系：
Paste_Image.png
每个节点都有childNodes属性，包含着该节点所有的子节点信息。可以使用数组形式访问或者item访问。
var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item(1);
var count=someNode.childNodes.length;
每个节点都有parentNodes属性，该属性指向其父节点。
同胞元素可以使用previousSibling与nextSibing属性获取其前面的元素或者后面的元素的信息（第一个元素的previousSibling为null，最后一个元素的nextSibling为null）
D. 操作节点：
a. appendChild()方法：作用：添加新元素或者转移已有元素
如果appendChild()的元素为刚刚创建的元素，则会在其父元素中添加该子元素，且为lastChild.
如果是已经在DOM树中存在的元素，则会将元素转移到新位置。
b. insertBefore()方法：作用：插入元素。
两个参数（待插入的元素，参照元素）
someNode.insertBefore(newNode,someNode.firstChild);//在某元素的第一个子节点插入新元素
c. replaceChild()方法：作用：替换节点
两个参数（要插入的节点，需要替换的节点），被替换的节点仍然存在，只是没有位置。
someNode.replaceChild(newNode,someNode.firstChild);//替换掉节点的第一个子节点
d. removeChild()方法：作用：移除元素。
someNode.removeChild(someNode.firstChild);//删除第一个子节点
e. cloneNode()方法：作用：克隆节点。
参数：true：深复制，会复制该节点以及其子节点。
false: 浅复制，只复制该节点。
someNode.cloneNode(true);
2.2 Document类型（文档类型）
document对象是HTMLDocument的一个实例，也是window对象的一个属性。
A. 文档子节点：
a. documentElement属性
documentElement始终指向html元素。
var html=document.getElementsByTagName("html")[0];
var htmldoc=document.documentElement;
console.log(html==htmldoc);//true
b.body属性：
指向body元素。
c. doctype属性：
可以获得<!DOCTYPE>标签
console.log(document.doctype);//<!DOCTYPE html>
B. 文档信息
a. title属性
document.title="new page";//设置标题栏
b. URL属性、domain属性、referrer属性
与网页请求有关，分别返回网页的完整URL，域名，来源页面的URL，这些信息存在于HTTP头部，可以通过这些属性在JS中访问。
通过将来自不同子域的页面设置相同的domain，可以互相进行访问。（跨域安全限制）
域名的修改只能往松散方向改，在将页面域名改为"wrox.com"后，就不能改为"p2p.wrox.com"
C. 查找元素
documentById()
documentByTagName()
documentByName()
D. 特殊集合
这些集合都是HTMLCollection元素
document.anchors：包含文档中带name特性的<a>元素
document.forms:所有的<form>元素
document.images:所有的<img>元素
document.links:所有带href的<a>元素
E. DOM一致性检测：
作用：检测DOM的级别，以确定浏览器实现了DOM的哪些部分。
implementation属性：为此提供相应的信息和功能。
该属性的方法：hasFeature(),两个参数：要检测的DOM功能名称，以及版本号，返回布尔值。
document.implementation.hasFeature("CSS","1.0")//true
F. 文档写入
将输出流写入到网页中：
a. write()和writeln()接收字符串参数。
document.write("<p>加入</p>");
b. open()和close()：打开和关闭网页的输出流。
2.3 Element类型
A. HTML元素
每个HTML元素都存在下列特性：
id , title（鼠标移动到该元素显示的信息） , lang （元素内容的语言代码）, dir（语言的方向） , className
B. 特性操作
有关操作特性的三个方法：
a. getAttribute()：获取属性的值
b. setAttribute()：设置属性以及其值，如果属性存在，则替换
c. removerAttribute()：删除该属性
C. attributes属性
保存元素的所有属性。
<div title="mine" class="ceshi"><p>ul</p></div>
var div=document.getElementsByTagName("div")[0];
console.log(div.attributes)
Paste_Image.png
NamedNodeMap对象有以下方法：
a. getNamedItem(name): 返回nodeName属性等于name的节点；
console.log(div.attributes.getNamedItem("title"));//title="mine"
b. removeNamedItem(name): 移除nodeName为name的节点
div.attributes.removeNamedItem("title")
c.setNamedItem(node):
div.setNamedItem(newAttr);
d. item(pos)：返回位置处于pos的节点
console.log(div.attributes.item(1)) //class="ceshi"
D. 创建元素
document.creteElement()
添加元素使用appendChild() insertBefore() replaceChild()
E. 元素的子节点：
childNodes属性
<ul>
<li></li>
<li></li>
<li></li>
</ul>
var ul=document.getElementsByTagName("ul")[0];
console.log(ul.childNodes.length);//ie为3，其他浏览器为7，因为他们把li之间的空格算作了文本节点。
因此在利用childNodes属性时，需要检查节点类型。
2.4 Text类型
A. 获取文本值：nodeValue 或者 data
<p>iii</p>
var p=document.getElementsByTagName("p")[0];
var text=p.firstChild;
var textValue=text.nodeValue;
console.log(textValue, text.data) //iii,iii
B. 创建文本节点：document.createTextNode()
可以包含多个文本节点：
<div></div>
var div=document.getElementsByTagName("div")[0];
var text1=document.createTextNode("text1");
var text2=document.createTextNode("text2");
div.appendChild(text1);
div.appendChild(text2);
Paste_Image.png
C. 规范化文本节点：normalize()
将多个同胞的文本节点拼接为一个，在文本节点的父元素上调用
var div=document.getElementsByTagName("div")[0];
var text1=document.createTextNode("text1");
var text2=document.createTextNode("text2");
div.appendChild(text1);
div.appendChild(text2);
div.normalize();
Paste_Image.png
D. 分割文本节点：splitText()
与normalize()相反，将文本进行分割
var div=document.getElementsByTagName("div")[0];
var text=document.createTextNode("hello world");
div.appendChild(text);
div.firstChild.splitText(5);
Paste_Image.png
2.5 Comment类型
表示注释，其nodeValue和data表示注释的内容。
访问方法：通过父节点进行访问。
创建方法：document.createComment()
3. DOM操作技术
3.1 动态脚本：
动态加载JS
方法一：加载外部JS
function loadJS() {
var script=document.createElement("script");
script.type="text/javascript";
script.src="jsgaocheng.js";
document.body.appendChild(script);
}
方法二：内联方式
function loadJS(code) {
var script=document.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode(code));//非IE
}
catch (ex){
script.text=code; //IE浏览器，IE中的<script>标签不允许访问子节点
}
document.body.appendChild(script);
}
var code="console.log(1)";//js代码
loadJS(code);
3.2 动态样式
动态加载CSS
方法一：link方法加载外部CSS
function loadCSS() {
var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href=url;
var head=document.getElementsByTagName("head")[0];
head.appendChild(link);
}
方法二：<style>方法
function loadCSS(code) {
var style=document.createElement("link");
style.type="text/css";
try{
style.appendChild(document.createTextNode(code)); //非IE方法
}
catch (ex){
style.cssText=code; //IE方法，IE中的<style>标签不允许访问子节点
}
var head=document.getElementsByTagName("head")[0];
head.appendChild(style);
}
3.3 操作表格
动态创建表格有很多属性和方法可以简化操作。
3.4使用NodeList
NodeList对象是动态的，每次访问NodeList对象，都会进行一次查询。
网友评论