DOM查询
API
API（Application Programming Interface 应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组历程的能力，又无需访问源码，或是理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具，以便可以更轻松的实现想要完成的功能；
比如说手机的充电口：如果想实现充电这个功能
我们无需关心手机变压器，以及手机内部怎么储存电量
也不关心这个充电器如何制作
我们只需要知道拿着充电线插进充电接口就可以充电。
这个充电接口就是一个API
Web API
web API 是浏览器提供的一套操作浏览器功能和页面功能的API（BOM和DOM）
API 是为程序员提供的接口，帮我们实现某种，会使用就可以，不要纠结是如何实现的。
Web API 主要针对浏览器提供的接口，针对浏览器做交互效果。
DOM的简介
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。
DOM是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容，结构和样式。对网页进行增删改查的操作。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树
节点的属性
JS获取DOM元素的方法（8种）
- 通过ID获取（getElementById）
- 通过name属性（getElementsByName）
- 通过标签名（getElementsByTagName）
- 通过类名（getElementsByClassName）
- 通过选择器获取一个元素（querySelector）
- 通过选择器获取一组元素（querySelectorAll）
- 获取html的方法（document.documentElement）
- 获取body的方法（document.body）document.body是专门获取body这个标签的
第一
通过id属性精确的查找一个元素对象通过ID获取（getElementById）
注意：
1，这个方法效率非常高，但是这个方法只能用在document上，用于精确查找一个元素时使用这种方法，但是不是所有元素都有 id
第二
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集，document.getElementsByTagName('标签名')可以获取整个页面中的标签。
注意:
1，返回的是获取过来元素对象的集合，以伪数组的形式存储的；
2，如果想要依次打印里面的元素对象可以采取遍历的方式；
也可以使用parent.getElementsByTagName('标签名')
注意：
1，可以在任意父元素上面
2，不仅可以查直接子节点，而且可以查所有子代节点
3，返回一个动态集合即使只找到一个元素，也可以返回集合必须使用[0]，来取出唯一元素
第三
通过name属性查找（主要用于获取表单对象）document.getElementsByName('name属性值')
注意：
1，返回DOM树中所有指定name属性值的所有子元素集合。（主要用于获取表单对象）
第四
获取包含 "example" 和 "color" 类名的所有元素:document.getElementsByClassName("example color");
注意：
1，你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
2，getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
实例点击按钮修改第一个类为 "example" 的 div 元素的背景颜色：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { border: 1px solid black; margin: 5px; } </style> </head> <body> <div class="example"> <p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p> </div> <div class="example color"> <p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p> </div> <div class="example color"> <p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p> </div> <p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p> <button onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <script> function myFunction() { var x = document.getElementsByClassName("example color"); x[0].style.backgroundColor = "red"; } </script> </body> </html>
页面效果：
getElementsByClassName 可以在任何元素上调用，不仅仅是document。调用这个方法的元素将作为本次查找的根元素。
注意：
1，element.getElementsByClassName() 方法返回一个及时更新的HTML集合。这个集合包含了所有指定class的子元素。
2，当再document对象上调用此方法时，会检索整个文档包括根元素。返回拥有指定class名称的document根节点的后代元素。
下面是element.getElementsByClassName()实例！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul class="example"> <li class="child">Coffee</li> <li class="child">Tea</li> </ul> <p>点击按钮修改第一个列表项的文本信息 (索引值为 0)。</p> <button onclick="myFunction()">点我</button> <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p> <script> function myFunction() { var list = document.getElementsByClassName("example")[0]; list.getElementsByClassName("child")[0].innerHTML = "Milk"; } </script> </body> </html>
页面效果图：
第五：
query.selector() 返回指定选择器的第一个元素对象
第六：
兼容到IE8
querySelectorAll（） 返回制定选择器的所有元素对象
语法：
var element = parent.querySelectorAll(‘selector’)
这个会返回所有body里面的p后代元素
var matches = document.body.querySelectorAll('p');
Element.querySelectorAll(selectors);
注意：
1，selector 任意CSS选择器，selector支持一切CSS中的选择器；
2，parent 要查找的父类
这个例子会返回id为test的元素的所欲class属性是node的所有div后代元素的p子元素
var el = document.querySelector('#test')
var matches = el.querySelectorAll('div.node > p')
返回el元素的的后代元素中所有拥有data-src属相的iframe元素
var matches = el.querySelectorAll('iframe[data-src]');
第七：
document.documentElement() 返回一个 <html> 元素
对于任何非空 HTML 文档，调用document.documentElement总是会返回一个 <html> 元素，且它一定是该文档的根元素。
<script>
var htmlEle = document.documentElement;
console.log(htmlEle);
console.dir(htmlEle);
</script>
第八：
document.body(); 返回当前文档中的<body>元素或者 <frameset> 元素
document.body 是包含当前页面内容的元素，对于拥有<body>元素的文档来说，返回的是<body>元素。
对于一个拥有<frameset>元素的文档来说。返回的是最外层的<frameset>元素。
该属性是可写的，且为该属性赋的值必须是一个<body>元素
<script>
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
</script>
第九：
获取元素的子节点
通过具体的元素节点调用
getElementByTagName()
方法：返回当前节点的指定标签名后代节点
childNodes
属性：表示当前节点的所有子节点，会获取包括文本节点在内的所有子节点。
根据DOM标签间的空白也会当成文本节点。
注意：在IE8及以下的浏览器中，不会讲空白节点当成子节点，所以该属性在IE8中会返回正常个数的子元素。
firstChild
属性：表示当前节点的第一个子节点
lastChild
属性：表示当前节点的最后一个子节点
parentNode
属性，表示当前节点的父节点
previousSibling
属性，表示当前节点的前一个兄弟节点
nexSibling
属性，表示当前节点的后一个兄弟节点
