111_js筆記13_html的dom操作
阿新 • • 發佈：2018-11-30
一，DOM
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
二，DOM的作用
通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
三，通過DOM來獲取Html元素
四，改變html內容和屬性
改變內容：獲取到該標籤後，更改此元素的內容 .innerHTML=新內容
改變屬性：獲取到該標籤後，更改此 元素的屬性.attribute=新屬性值
- 通過 id 找到 HTML 元素：getElementById
- 通過標籤名找到 HTML 元素：getElementsByTagName
- 通過類名找到 HTML 元素：getElementsByClassName
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom操作</title> </head> <body> <div id="intro1"> 你好世界! <p>子元素1</p> <p>子元素2</p> </div> <p class="intro2"> 乾杯吧朋友 </p> <script> x=document.getElementById("intro1"); document.write("1，通過id，獲取html：" + "<p>" + x.innerHTML + "</p>"); var y=x.getElementsByTagName("p"); document.write("<p>" + "2.1，通過標籤名，獲取html：" + y[0].innerHTML + "</p>"); var y1 = document.getElementsByTagName("p"); document.write("<p>" +"2.2，通過標籤名，獲取html：" + y1[2].innerHTML + "</p>"); z=document.getElementsByClassName("intro2"); document.write("<p>" +"3，通過類名，獲取html：" + z[0].innerHTML + "</p>"); </script> </body> </html>瀏覽器執行結果：
-
四，修改html標籤的內容和屬性
- 1，修改html的內容：獲取到標籤.innerHTML = 新值
- 2，修改html的屬性：獲取到標籤屬性 = 新屬性值
-
// 1，定義html <img id="image" src="smiley.gif" width="160" height="120" alt="Big Boat"> // 2，修改html的屬性 document.getElementById("image").alt="Small Boat";