abstract：dom：HTML DOM ，文檔對象模型（Document Object Model）的簡稱，當網(wǎng)頁被加載時，瀏覽器就會創(chuàng)建頁面的文檔對象模型。通常，通過 JavaScript，我們需要操作 HTML元素。為了做到這件事情，就必須首先查找并獲取到該元素。在JavaScript中中通過dom查找并獲取元素對象主要有三種常見方法：1、通過 id 查找并獲取到元素：getElementById()get
dom：HTML DOM ，文檔對象模型（Document Object Model）的簡稱，當網(wǎng)頁被加載時，瀏覽器就會創(chuàng)建頁面的文檔對象模型。
通常，通過 JavaScript，我們需要操作 HTML元素。為了做到這件事情，就必須首先查找并獲取到該元素。在JavaScript中中通過dom查找并獲取元素對象主要有三種常見方法：
1、通過 id 查找并獲取到元素：getElementById()
getElementById() 方法：通過ID獲得節(jié)點元素，如果頁面上含有多個相同id的節(jié)點對象，那么只返回第一個節(jié)點對象。
語法：
document.getElementById("元素的id");
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box" onclick="getValue()">我是測試代碼</div>
<script>
function getValue(){
var x=document.getElementById("box")
alert(x.innerHTML)
}
</script>
</body>
</html>
2、通過標簽名查找并獲取到元素：getElementsByTagName() getElementsByTagName()方法：是通過元素的標簽名來查找并獲取一組元素對象（有多少就獲取多少），其返回的是帶有指定標簽名的對象集合。 語法： document.getElementsByClassName("元素的標簽名"); 示例代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id 為 "main" 的 div 中的第一段文本是：' + y[0].innerHTML); </script> </body> </html> 3、通過class（類）查找并獲取到元素：getElementsByClassName() getElementsByClassName()方法：是通過指定的class（類）屬性值來查找并獲取元素的，其返回的是帶有指定類名的元素集合，可以說它是一個對象的集合。 語法： document.getElementsByClassName("元素的class");、 示例代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="main"> <p class="a">我是測試代碼1</p> <p class="a">我是測試代碼2</p> </div> <script> var x = document.getElementById("main"); var y = x.getElementsByClassName("a"); document.write('id 為 "main" 的 div 中的第一段文本是：' + y[0].innerHTML); </script> </body> </html>
Correcting teacher：韋小寶Correction time：2019-03-02 17:46:35
Teacher's summary：寫的很不錯 css中的選擇器很多語言都是通用的 這一點必須要好好掌握