让我为大家介绍一下获取DOM元素的方法吧！
1.document.getElementsByClassName(“元素类名”)[下标]
通过class类名获取元素，返回一个伪数组，不能使用数组操作方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> 我是第一个box </div> <div class="box"> 我是第二个box </div> </body> <script> // 因为我们可能有多个类名叫做box的div,使用此方法获取时添加需要获取的元素下标,0开始 // 返回一个伪数组,不能使用数组的操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 var box = document.getElementsByClassName("box")[0]//返回第一个class类名叫做box的元素 </script> </html>
2.document.getElementById(“元素id名”)
通过元素id获取元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> id名不能重复哦 </div> </body> <script> // 因为id就像人们的身份证一样,id名不能重复,所以不会像有的方法返回一个伪数组 var box = document.getElementById("box")//返回一个id名叫box的元素 </script> </html>
3.document.getElementsByTagName(“元素标签名”)[下标]
通过元素标签名获取元素，返回一个伪数组，不能使用数组操作方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>我是第一个div标签</div> <div>我是第二个div标签</div> </body> <script> // 返回一个伪数组,不能使用数组的操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 var div = document.getElementsByTagName("div")[0]//返回第一个标签名为div的元素 </script> </html>
4.document.getElementsByName(“元素name属性名”)[下标]
通过元素name属性名获取元素，返回一个伪数组，不能使用数组操作方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="inp" value="我是name1"> <input type="text" name="inp" value="我是name2"> </body> <script> // 返回一个伪数组,不能使用数组操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 var inp = document.getElementsByName("inp")[0]//返回第一个name属性叫inp的元素 </script> </html>
5.document.querySelector(“css选择器”)
通过css选择器获取元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> 我是第一个叫box的孩子 </div> <div class="box"> 我是第二个box的孩子 </div> <div id="boss"> 我是id选择器 </div> </body> <script> // 注意是第一个 // class获取 var box = document.querySelector(".box")//获取第一个class类叫box的元素 // id获取 var boss = document.querySelector("#boss")//获取id叫做boss的元素 // 标签获取 var div = document.querySelector("div")//获取第一个div标签 // 还有许多选择器方法都可以获取,但要注意是获取的第一个元素 </script> </html>
6.document.querySelectorAll(“css选择器”)[下标]
通过css选择器获取元素，返回一个伪数组，不能使用数组操作方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> 我是第一个叫box的孩子 </div> <div class="box"> 我是第二个box的孩子 </div> </body> <script> // 放回一个伪数组，不能使用数组操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 // class获取 var box = document.querySelectorAll(".box")[0]//获取第一个class类叫box的元素 // 标签获取 var div = document.querySelectorAll("div")[0]//获取第一个div标签 </script> </html>
七、document.body
获取body标签
// 获取body标签 var body = document.body console.log(body);
八、document.documentElement
获取整个html标签
// 获取html var html = document.documentElement console.log(html)
感谢各位阅读，如有什么错误的地方，可以向我指出，谢谢大家！
