DOM是文檔對(duì)象化模型（Document Object Model）的簡(jiǎn)稱。DOM Tree是指通過DOM將HTML頁面進(jìn)行解析，并生成的HTML tree樹狀結(jié)構(gòu)和對(duì)應(yīng)訪問方法。
HTML DOM 模型被構(gòu)造為對(duì)象的樹
DOM-樹
知識(shí)體系
思維導(dǎo)圖
改變HTML內(nèi)容
document.write();可用于直接向 HTML 輸出流寫內(nèi)容。
- 絕對(duì)不要在文檔加載完成之后使用 document.write()。這會(huì)覆蓋該文檔。
document.getElementById(id).innerHTML=new HTML
- 改變 HTML 元素的內(nèi)容
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
改變HTML屬性
document.getElementById(id).attribute=new value
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
document.getElementById(id).attribute=new value
- 改變 HTML 元素的屬性
<style>
.a{
width: 200px;
height: 300px;
background-color: bisque;
}
.b{
width: 200px;
height: 300px;
background-color: black;
}
</style>
<div id="example" class="a"></div>
<input type="button" onclick="changeC()" value="改變顏色">
<script>
function changeC() {
document.getElementById("example").className = "b";
}
</script>
HTML DOM 改變 CSS
- 改變 HTML 元素的樣式
document.getElementById(id).style.property=new style
<div id="example" class="a"></div>
<script>
document.getElementById("example").style.color="blue";
</script>
