JS HTML DOM
Js可以建立動态的HTML
1:能夠改變頁面中的所有 HTML 元素
2:能夠改變頁面中的所有 HTML 屬性
3:能夠對頁面中的所有事件做出反應
一：使用JacaScript可以操作HTML元素，但是要做到這個事情需要先找到該元素，有3種方法：
1：使用ID找到HTML元素 document.getElementById(ID)//獲得指定ID值的對象
例子：
<!DOCTYPE html>
<html>
<body>
<p id=”a”>Hello World!</p>
<script>
x=document.getElementById("a");
document.write(x.innerHTML);
</script>
</body>
</html>
2：使用标簽嗎找到HTML元素 document.createElement(Tag) //建立一個html标簽對象
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例示範 <b>getElementsByTagName</b> 方法。</p>
</div>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 為 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
3：通過類名查找HTML元素 document.getElementsByName(Name)//獲得指定Name值的對象
二 document.write()
注意：内容的文法是innerHTML
不要使用在文檔加載之後使用 document.write()。這會覆寫該文檔
例如document.write() 可以改變HTML内容
<p id=”a”>aaaaa</p>
document.getElementByid(“a”).innerHTML=”bbbbb”
上面P标簽的内容會變成bbbbb
三 HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
改變樣式的文法
dcunmen.getElemenByID(ID).style.property=new style
例子
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
<p>上面的段落已被一段腳本修改。</p>
四：節點的添加和删除
添加節點
<div id=”div1”>
<p id=”p2”>這是第二句話</p>
Var para=document.createElement(“p”); //建立一個新元素
Var node=document.createTextNode(“這是新的一句話”)；//如需向 <p> 元素添加文本，您必須首先建立文本節點。這段代碼建立了一個文本節點：
Para.appendChild(node); //在p元素後面追加上面的文本節點；
Var element=document.getElmentById(“div1”); //找到這個元素
Element.appendChild(“para”); //向上面的元素追加新元素，也就是p元素
删除節點
想要删除HTML元素必須獲得該元素的父元素
<p id=”p1”>這是第一句話</p>
上面的例子中 div元素中有2個p元素，div是p元素的父元素
是以：
先找父元素var fu=document.getElementById(“div1”);
在找子元素 var zi=document.getElementById(“p1”);
從父元素中删除子元素 fu.removeChild(child);
還一種方法是使用parentNode的屬性來找到父元素進行删除
找到子元素 var zi=document.getElementById(“p1”);
然後删除 child.parentNode.removeChild(zi);
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)