DOM查找
JavaScript DOM基础
DOM是Document Object Model（文档对象模型）的缩写
文档对象模型（DOM）是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方法可以使从程序中对该机构进行访问，从而改变文档的结构、样式和内容
DOM查找方法 1
语法：
document.getElementById("id")
功能：
返回对拥有指定ID的第一个对象的引
返回值：
DOM对象
说明：
id为DOM元素上的id属性的值
DOM查找方法 2
语法：
document.getElementsByTagName("tag")
功能：
返回一个对所有tag标签引用的集合
返回值：
数组
说明：
tag为要获取的标签名称
选择练习
关于dom的查找方法，下列选项中说法正确的是？（选择两项）
A getElementByTagName（）方法返回带有指定标签名的所有元素，返回的是一个元素
B getElementsByTagName（）方法返回带有指定标签名的所有元素，返回的是元素的集合
C getElementById（）方法返回带有指定 ID 的元素
D getElementsById（） 方法返回带有指定 ID 的元素
正确答案：B,C
参考解析：
该题考察的是dom的查找方法，正确选项为BC；
A：getElementsByTagName（）方法返回带有指定标签名的所有元素，返回的是元素的集合，可以通过下标的方式去获取每个元素。
D：getElementById() 方法返回带有指定 ID 的元素，Element没有s。
编程练习 1
通过ID选取的方法获取到html文件中的div元素，并让它们依次的在页面中弹出！
任务
第一步：通过ID选取的方法（getElementById( )）获取到每个div，并用变量进行接收。
第二步：当打开页面时，依次弹出这几个变量
任务提示
注意，通过alert弹出的内容是对象，不是具体的值
也可以通过console.log（）输出一下
参考代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>DOM的查找方法</title></head><body><div id="div1">第一个元素</div><div id="div2">第二个元素</div><div id="div3">第三个元素</div><script>div1=document.getElementById("div1");div2=document.getElementById("div2");div3=document.getElementById("div3");alert(div1);alert(div2);alert(div3);console.log(div1);console.log(div2);console.log(div3);</script></body></html>
编程练习 2
依次弹出“前端书籍”中的每一项，并在最后弹出它的列表项总共有几项。
任务
完成以下步骤：
第一步：通过ID获取到“前端书籍”所在的列表项
第二步：再通过标签名获取所有的列表项li，注意这里得到的是一个数组
第三步：依次弹出“前端书籍”的每一项，也就是li中的每一项，弹出的每一项其实是一个dom对象，不是具体的值
第四步：最后弹出前端书籍共有多少本
任务提示
获取到的数组，下标是从0开始的，在输出是第几本书的时候，记得下标+1。
参考代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1-4</title></head><body><h3>前端书籍</h3><ul id="listWeb"><li>htmll基础</li><li>CSS基础</li><li>JavaScript基础</li><li>Jquery框架</li><li>bootStrap框架</li></ul><h3>JAVA书籍</h3><ul id="listJava"><li>JAVA语言基础</li><li>三大框架</li><li>JAVA深入浅出</li></ul><script>list=document.getElementById("listWeb").getElementsByTagName("li");for(var i=0;i<list.length;i++){alert("前端书籍第"+(i+1)+"本："+list[i]);}alert("前端书籍共计"+list.length+"本");</script></body></html>
