实际前端开发工作中，我们经常会遇到要获取某些元素，以达到更新该元素的样式、内容等目的。而文档对象模型 (DOM) 是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合，它会将web页面和脚本或程序语言连接起来。也因此，JavaScript可以通过DOM API获取元素节点，方法有如下几种：其中querySelector()和querySelectorAll()为ES5的元素选择方法
1、getElementById()：
接收一个参数：要取得的元素的ID(区分大小写，必须严格匹配)，返回一个Element对象（也可看作是动态NodeList集合，只是集合中只包含一个匹配的元素，但也会实时反映DOM节点的变化），若当前文档中拥有特定ID的元素不存在则返回nul。
语法：
element = document.getElementById(id);
示例：删除
<body> <div> <p>hello world</p> <p>hello dolby</p> <p>hello dot</p> <p>hello bean</p> </div> <script> var div = document.getElementById("myDiv"); console.log(div); //(1) var body=document.querySelector('body'); body.removeChild(div); console.log(body); //(2) </script> </body>
//(1)处打印值 <div> <p>hello world</p> <p>hello dolby</p> <p>hello dot</p> <p>hello bean</p> </div> //(2)处打印值 <body> <script> var div = document.getElementById("myDiv"); console.log(div); //(1) var body=document.querySelector('body'); body.removeChild(div); console.log(body); //(2) </script> </body>
示例：
<!DOCTYPE html> <html> <head> <title>getElementById example</title> <script> function changeColor(newColor) { var elem = document.getElementById("para1"); elem.style.color = newColor; } </script> </head> <body> <p>Some text here</p> <button>blue</button> <button>red</button> </body> </html>
getElementById()方法不会搜索不在文档中的元素。当创建一个元素且分配ID后，必须要使用insertBefore()或其他类似的方法把元素插入到文档中之后才能使用 getElementById() 获取到:
var element = document.createElement("div"); element.id = 'testqq'; var el = document.getElementById('testqq'); // el will be null!
2、getElementsByClassName()：
接收一个参数，即包含一个或多个类名的字符串（类名通过空格分隔），返回一个HTMLCollection动态集合（也可以说返回一个NodeList类数组对象），集合中包含以当前元素为根节点，所有指定 class 名的子元素。
语法：
var elements = document.getElementsByClassName(names); var elements = rootElement.getElementsByClassName(names);
getElementsByClassName 可以在任意的元素上调用，不仅仅是document。 调用这个方法的元素将作为本次查找的根元素。
示例：
获取所有 class 为 'test' 的元素:
document.getElementsByClassName('test');
获取所有 class 同时包括 'red' 和 'test' 的元素:
document.getElementsByClassName('red test');
在id 为'main'的元素的子节点中，获取所有class为'test'的元素:
document.getElementById('main').getElementsByClassName('test');
示例：删除
//html代码 <div> <p>hello world</p> <p>hello dolby</p> <p>hello dot</p> <p>hello bean</p> </div>
//js代码一 <script> var div = document.getElementsByClassName("myDiv"); console.log(div); //(3) var p = document.getElementsByClassName("myP"); for (var i = 0; i < p.length; i++) { div[0].removeChild(p[i]); } console.log(p); //(4) </script>
//(3)处打印值 [div.myDiv] //一个动态的HTMLCollection集合，长度为1，innerHTML为<p>hello dolby</p>，<p>hello bean</p>，为什么没有其他两个p元素一会儿解释。 //(4)处打印值 [p.myP,p.myP] //一个动态的HTMLCollection集合，长度为2，innerHTML分别为"hello dolby"，"hello bean"。
以上用删除节点的方法验证了getElementsByClassName方法返回的是一个HTMLCollection动态集合。
⬆️以上代码中，首先div取得了页面中类名为"myDiv"的元素组成的动态集合，p取得了页面中类名为"myP"的元素组成的动态集合，接着用一个for循环来删除"myDiv"集合中第一项（即上例中唯一的div元素）中的"myP"集合中的每一项，结果只有第一项和第三项被删除了，这是为什么呢？