实际前端开发工作中，我们经常会遇到要获取某些元素，以达到更新该元素的样式、内容等目的。而文档对象模型 (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 id="myDiv"> <p class="myP">hello world</p> <p class="myP">hello dolby</p> <p class="myP">hello dot</p> <p class="myP">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 id="myDiv"> <p class="myP">hello world</p> <p class="myP">hello dolby</p> <p class="myP">hello dot</p> <p class="myP">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 id="para1">Some text here</p> <button onclick="changeColor('blue');">blue</button> <button onclick="changeColor('red');">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!
新闻热点
疑难解答
图片精选
