JS HTML DOM 使用
HTML DOM （文檔對象模型）介紹
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。HTML DOM 模型被構造爲對象的樹。
平時我們都是直接編寫html元素，如果我們想要操作已經生成的html頁面，通過可編程的對象模型，操作DOM，實現對頁面的修改也編輯。
- JavaScript 獲得了足夠的能力來創建動態的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
JavaScript獲取到元素
<!DOCTYPE html>
<html>
<body>
<p id="info">Hello World!</p>
<p>獲取元素</p>
<script>
var x=document.getElementById("info"); //通過id獲取到html元素
var y=document.getElementsByTagName("p");//通過標籤名獲取到
</script>
</body>
</html>JavaScript操作獲取的元素
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<p id="p1">Hello World!</p>
<script>
document.getElementById("image").src="landscape.jpg";//修改img標籤的src屬性
document.getElementById("p1").innerHTML="New text!";//修改p標籤的內容
document.getElementById("p1").style.color="blue";//修改了p變籤樣式中的顏色，設置爲藍色
</script>
</body>
</html>在js中操作html元素首先要通過id在dom獲取相應的元素，然後通過其屬性重新設置屬性值。
document.getElementById(“id值”).屬性（例如src）=”新的屬性值”;
document.getElementById(“id值”).style.屬性（例如color）=”屬性值”;