DOM
Document Object Model，文檔對(duì)象模型灯荧。是HTML和XML文檔的編程接口驶兜。
DOM將HTML和XML文檔作為一個(gè)樹形結(jié)構(gòu)聂儒，而樹葉被定義為節(jié)點(diǎn)灼擂。
HTML DOM
HTML DOM是關(guān)于如何獲取嫉入、修改焰盗、添加或刪除HTML元素的標(biāo)準(zhǔn)。
樹形結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<h1 style="color:pink">今天的你也很可愛呢</h1>
<p>Yeah, I'm pretty!</p>
</body>
</html>
整個(gè)HTML文檔的內(nèi)容都是節(jié)點(diǎn)咒林，HTML文檔為文檔節(jié)點(diǎn)熬拒，HTML元素為元素節(jié)點(diǎn)，元素內(nèi)的文本是文本節(jié)點(diǎn)垫竞，HTML屬性是屬性節(jié)點(diǎn)澎粟，連注釋也是注釋節(jié)點(diǎn)。
在這個(gè)示例中欢瞪，元素<head>是元素<html>的首個(gè)子節(jié)點(diǎn)活烙，元素<body>是元素<html>的最后一個(gè)子節(jié)點(diǎn)。
對(duì)象
方法
在節(jié)點(diǎn)（HTML元素）上執(zhí)行的動(dòng)作引有。
getElementById(id)獲取帶有指定id的節(jié)點(diǎn)/元素;
appendChild(node)插入新的子節(jié)點(diǎn)/元素;
removeChild(node)刪除子節(jié)點(diǎn)/元素;
createAttribute(node)創(chuàng)建屬性節(jié)點(diǎn);
createElement(node)創(chuàng)建元素節(jié)點(diǎn);
createTextNode(node)創(chuàng)建文本節(jié)點(diǎn);
getAttribute(node)返回指定節(jié)點(diǎn)的屬性值;
createAttribute(node)修改指定屬性的值;
屬性
在節(jié)點(diǎn)（HTML元素）上設(shè)置和修改的值瓣颅。
innerHTML獲取或改變?nèi)我夤?jié)點(diǎn)/元素的文本值;
parentNode節(jié)點(diǎn)/元素的父節(jié)點(diǎn);
childNodes節(jié)點(diǎn)/元素的子節(jié)點(diǎn);
attributes節(jié)點(diǎn)/元素的屬性節(jié)點(diǎn);
nodeName規(guī)定節(jié)點(diǎn)名稱;
nodeVaue規(guī)定節(jié)點(diǎn)的值;
nodeType返回節(jié)點(diǎn)的類型，只讀譬正；
nodeName
只讀宫补；
元素節(jié)點(diǎn)的nodeName與標(biāo)簽名相同；
屬性節(jié)點(diǎn)的nodeName與屬性名相同曾我；
文本節(jié)點(diǎn)的nodeName始終是#text粉怕；
文檔節(jié)點(diǎn)的nodeName始終是#document；
nodeValue
元素節(jié)點(diǎn)的nodeValue是undefine或null;
文本節(jié)點(diǎn)的nodeValue是文本本身;
屬性節(jié)點(diǎn)的nodeValue是屬性值抒巢；
example：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對(duì)象</title>
</head>
<body>
<p id="demo1">You are pretty!</p>
<p id="demo2">FlexibleCat</p>
<script type="text/javascript">
var x = document.getElementById('demo1').innerHTML;
document.write(x);
document.write('<br>');
var y = document.getElementById('demo2');
document.write(y.firstChild.nodeValue); //獲取元素的值
</script>
</body>
</html>
操作元素
創(chuàng)建新的HTML元素
方法：createElement()
過程：
- 創(chuàng)建一個(gè)新的元素：
var para=document.createElement("h1"); - 假設(shè)要向這個(gè)元素添加文本贫贝，則要?jiǎng)?chuàng)建文本節(jié)點(diǎn)：
var node=document.createTextNode("這是一個(gè)大標(biāo)題"); - 要把這個(gè)新的元素和文本節(jié)點(diǎn)連起來，不能讓它們孤零零地各自在一邊：
para.appendChild(node); -
必須要向已有的元素追加這個(gè)新的元素，所以先查找已有代碼段中存在的元素：
var element=document.getElementById("1"); - 向已有的元素追加新的元素：
element.appendChild(para);
example：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>創(chuàng)建HTML元素</title>
</head>
<body id="1">
<p id="2">這是已有的標(biāo)簽</p>
<script type="text/javascript">
var para=document.createElement("h1");
var node=document.createTextNode("這是一個(gè)大標(biāo)題");
para.appendChild(node);
var element=document.getElementById("1");
element.appendChild(para);
</script>
</body>
</html>
把創(chuàng)建的新HTML元素插入到某個(gè)元素前
方法：insertBefore()
- 完成創(chuàng)建新的HTML元素的第四步之后稚晚，選擇想要安排在哪個(gè)元素前面：
var child=document.getElementById("1"); - 使用相應(yīng)方法把新建的HTML元素放在該元素之前：
element.insertBefore(para, child);
example：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>創(chuàng)建HTML元素并選擇位置插入</title>
</head>
<body id="1">
<p id="2">這是已有的標(biāo)簽</p>
<script type="text/javascript">
var para=document.createElement("h1");
var node=document.createTextNode("這是一個(gè)大標(biāo)題");
para.appendChild(node);
var element=document.getElementById("1");
var child=document.getElementById("2");
element.insertBefore(para,child);
</script>
</body>
</html>
刪除已有的HTML元素
在刪除已有的HTML元素時(shí)崇堵，必須清楚該元素的父元素。從父元素中刪除要?jiǎng)h除的子元素客燕。
- 找到父元素：
var parent=document.getElementById("1"); - 找到要?jiǎng)h除的子元素：
var child=document.getElementById("2"); - 刪除：
parent.removeChild(child);
如果不想費(fèi)腦子自己去找父元素的話鸳劳，可以使用parentNode屬性來查找。將第三部修改成
child.parentNode.removeChild(child);就可以省去第一步找父元素也搓。
example：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>刪除已有的HTML元素</title>
</head>
<body id="1">
<p id="2">這是一個(gè)優(yōu)秀的段落</p>
<p id="3">這個(gè)段落不太優(yōu)秀</p>
<p id="4">這個(gè)段落既優(yōu)秀又可愛呢</p>
<script type="text/javascript">
var parent=document.getElementById("1");
var child=document.getElementById("3");
parent.removeChild(child);
var child1=document.getElementById("2");
child1.parentNode.removeChild(child1);
</script>
</body>
</html>
替換HTML元素
與創(chuàng)建新的HTML元素差不多赏廓，將最后的方法換成replaceChild()即可。
修改HTML DOM
包括：
- 改變HTML內(nèi)容傍妒；
- 改變CSS樣式幔摸；
- 改變HTML屬性；
- 創(chuàng)建新的HTML元素颤练；
- 刪除已有的HTML元素既忆；
- 改變事件/處理程序；
事件的使用與Java中類似嗦玖，這里不再叨叨尿贫。其他形式，下面給出一個(gè)簡(jiǎn)單的示例還不是因?yàn)椴幌雽?/del>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改HTML元素</title>
</head>
<body id="0">
<p id="1">今天的天氣有點(diǎn)冷</p>
<p id="2">今天是有點(diǎn)冷呢</p>
<script type="text/javascript">
document.getElementById("1").innerHTML="天氣被修改啦"; //修改內(nèi)容
document.getElementById("2").style.color="pink"; //改變樣式
var son=document.createElement("p");
var node=document.createTextNode('NEW');
son.appendChild(node); //創(chuàng)建新的元素
var element=document.getElementById("0");
element.appendChild(son);
</script>
</body>
</html>
XML DOM
與HTML一樣踏揣，XML的每個(gè)成分都是節(jié)點(diǎn)。
XML DOM包含了便利XML樹匾乓，訪問捞稿、插入及刪除節(jié)點(diǎn)的方法/函數(shù)。
在對(duì)XML文檔進(jìn)行操作及訪問時(shí)拼缝，該XML文檔必須加載到XML DOM對(duì)象中娱局。
XML DOM解析器
大概流程：
- 加載XML文檔到XML DOM對(duì)象中；
- 解析器讀取XML文檔咧七；
- 把XML文檔轉(zhuǎn)換為XML DOM對(duì)象衰齐，使JS可以訪問它。
補(bǔ)充：
創(chuàng)建XMLHttpRequest對(duì)象
語法：xmlhttp=new XMLHttpRequest();
IE5和IE6（舊版本的IE）中继阻，使用ActiveX對(duì)象耻涛，即：
xmlhttp=new activeXObject("Microsoft.XMLHTTP");
創(chuàng)建DOMParser對(duì)象
語法：parser=new DOMParser();`
IE瀏覽器使用loadXML()方法，即：
xmlDOc
加載XML文檔示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加載XML文檔</title>
</head>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest) {
xhttp=new XMLHttpRequest();
}else {
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
} //創(chuàng)建XMLHTTP對(duì)象
xhttp.open("open", "demo.xml",false); //打開XMLHTTP對(duì)象
xhttp.send(); //發(fā)送XML HTTP請(qǐng)求到服務(wù)器
xmlDoc=xhttp.responseXML; //設(shè)置響應(yīng)為XML DOM對(duì)象
document.write("XML文檔已被載入");
</script>
</body>
</html>
加載XML字符串實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加載字符串</title>
</head>
<body>
<script type="text/javascript">
text = "<family><person><name>Tiny Guo</name><age>25</age><profession>photographer</profession></person></family>";
if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");
}else {
//IE瀏覽器用loadXML()方法載入字符串
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false; //判斷是否異步進(jìn)行
xmlDoc.loadXML(text);
}
document.write("XML字符串已被載入");
</script>
</body>
</html>
為了使加載函數(shù)更容易維護(hù)瘟檩，可以把加載XML文檔的代碼存儲(chǔ)在函數(shù)中抹缕。
XML DOM的對(duì)象方法、屬性以及對(duì)節(jié)點(diǎn)的操作與HTML DOM中的基本相同墨辛，就不重復(fù)寫了卓研。下面寫點(diǎn)前面HTML DOM里面沒寫過的。
克隆節(jié)點(diǎn)
使用cloneNode()來復(fù)制一個(gè)節(jié)點(diǎn)，并把它追加到XML文檔的根節(jié)點(diǎn)奏赘。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clone</title>
</head>
<body>
<script type="text/javascript">
function loadXMLDoc(doc) {
if (window.XMLHttpRequest) {
xhttp=new XMLHttpRequest();
} else {
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",doc,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
//克隆person標(biāo)簽中的第一個(gè)節(jié)點(diǎn)
x = xmlDoc.getElementsByTagName('person')[0];
cloneNode = x.cloneNode(true);
xmlDoc.documentElement.appendChild(cloneNode);
//輸出name節(jié)點(diǎn)的所有文本值
y = xmlDoc.getElementsByTagName("name");
for (var i = 0; i <= y.length; i++) {
document.write(y[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>
關(guān)于對(duì)象寥闪、對(duì)象屬性和對(duì)象方法
可能初學(xué)者一開始對(duì)這三個(gè)東西沒什么大感覺，感覺好像簡(jiǎn)單的代碼也能寫磨淌，但是到后面就會(huì)稀里糊涂疲憋，啥是對(duì)象啊伦糯？啥是對(duì)象屬性肮衲场？對(duì)象方法又是啥敛纲？
這里來通俗的解釋一下這三個(gè)東西：
對(duì)象喂击，可以理解為任何一個(gè)被操作的東西；
對(duì)象屬性淤翔，反應(yīng)對(duì)象的某些特定性質(zhì)的翰绊，比如數(shù)據(jù)的字節(jié)數(shù)、圖片的大小等旁壮。表現(xiàn)形式一般為"對(duì)象名.屬性名"监嗜；
對(duì)象方法，能夠在對(duì)象上執(zhí)行的動(dòng)作抡谐。表現(xiàn)形式為函數(shù)裁奇。函數(shù)名一般開頭為setxxx()、getxxx()麦撵、removexxx()之類的刽肠。
具體的對(duì)象有需要且不清楚不知道的時(shí)候可以度娘，已經(jīng)是個(gè)大孩子了免胃，要學(xué)會(huì)自己搜索信息音五。
其他的點(diǎn)
- 在DOM解析時(shí)，不同的瀏覽器處理節(jié)點(diǎn)之間的換行羔沙、空格字符時(shí)躺涝，操作是不同的。IE瀏覽器不會(huì)把空的空白或換行作為文本節(jié)點(diǎn)扼雏，但是其他瀏覽器會(huì)坚嗜。example：
<!-- 以下代碼顯示demo.xml文檔的根元素有多少個(gè)子節(jié)點(diǎn) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clone</title>
</head>
<body>
<script type="text/javascript">
function loadXMLDoc(doc) {
if (window.XMLHttpRequest) {
xhttp=new XMLHttpRequest();
} else {
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",doc,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
x = xmlDoc.documentElement.childNodes;
document.write("Have " + x.length + " child nodes");
</script>
</body>
</html>
節(jié)點(diǎn)之間包含了換行、空白符呢蛤。
- 可以通過檢查節(jié)點(diǎn)類型來忽略元素節(jié)點(diǎn)之間的空文本字節(jié)惶傻。
