Javascript與HTML DOM
阿新 • • 發佈:2019-01-12
首先來說一說HTML DOM:
HTML DOM(文件物件模型)Document Object Model For HTML
HTML DOM中定義了用於HTML的一系列標準的物件,以及訪問和處理HTML文件的標準方法。
通過DOM,可以訪問所有的HTML的元素(應該就是標籤),連同它們所包含的文字和屬性。可以對其中的內容進行增刪改查的操作。
總的來說,HTML DOM 獨立於平臺和程式語言。它可以被Javascript,java等使用。
Javascript可以通過操作HTML DOM來建立動態的HTML。
- Javascript可以改變頁面中的所有HTML的元素和其屬性
- Javascript可以改變頁面中的所有CSS樣式
- Javascript可以對頁面中的所有時間做出反應
Javascript要改變某一個元素就應該先找到這個元素,主要通過三種方式:
- 通過id查詢
- 通過標籤名查詢
- 通過類名查詢
通過id查詢:(通過類名查詢同理,只不過將id換成class)
<p id="info"> bbbbbbbbeautiful!</p>
<script>
x=document.getElementById("info");<!-- 通過id查詢到-->
document. write("<p>I am <br>",x.innerHTML,"</p>");<!--以p標籤的形式輸出(只是中間多了個換行)-->
</script>
通過標籤名查詢:(得到的是一個集合)
<p> bbbbbbbbeautiful!</p>
<p>hhhhhhandsome!</p>
<script>
x=document.getElementByTagName("p");<!-- 通過id查詢到-->
document.write('第一個p標籤:',x[ 0].innerHTML);<!--以p標籤的形式輸出(只是中間多了個換行)-->
</script>