DOM簡介
DOM（Document Object Model），文檔對象模型，定義了訪問和處理html文檔的標準方法。
DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。
通過ID獲取元素
html中標籤的id屬性是唯一的，通過id可以找到唯一與之對應的標籤，對標籤進行操作。
語法：
document.getElementById("id");
例：通過document.getElementById獲取id爲con的標籤，並輸出結果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("結果:"+mychar); //輸出獲取的P標籤。
</script>
</body>
</html>
innerHTML 屬性
- innerHTML 屬性用於獲取或替換 HTML 元素的內容。
語法：
Object.innerHTML
例：獲取id爲con的標籤，並輸出內容，修改內容後重新輸出
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基於對象、事件驅動的簡單腳本語言，嵌入在HTML文檔中，由瀏覽器負責解釋和執行，在網頁上產生動態的顯示效果並實現與用戶交互功能。</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標籤內容
mychar.innerHTML="Hello World!";
document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標籤內容
</script>
</body>
</html>
改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
語法：
Object.style.property=new style;
例：獲取id爲pcon的標籤對象，改變其顏色、字體大小、背景色等。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style樣式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="gray";
mychar.style.width="300";
</script>
</body>
</html>
display屬性
語法：
Object.style.display = value
value取值:
- none 元素不會被顯示，即隱藏
- block 顯示