abstract：dom：HTML DOM ，文档对象模型（Document Object Model）的简称，当网页被加载时，浏览器就会创建页面的文档对象模型。通常，通过 JavaScript，我们需要操作 HTML元素。为了做到这件事情，就必须首先查找并获取到该元素。在JavaScript中中通过dom查找并获取元素对象主要有三种常见方法：1、通过 id 查找并获取到元素：getElementById()get
dom：HTML DOM ，文档对象模型（Document Object Model）的简称，当网页被加载时，浏览器就会创建页面的文档对象模型。
通常，通过 JavaScript，我们需要操作 HTML元素。为了做到这件事情，就必须首先查找并获取到该元素。在JavaScript中中通过dom查找并获取元素对象主要有三种常见方法：
1、通过 id 查找并获取到元素：getElementById()
getElementById() 方法：通过ID获得节点元素，如果页面上含有多个相同id的节点对象，那么只返回第一个节点对象。
语法：
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中的选择器很多语言都是通用的 这一点必须要好好掌握
