1.JS获取DOM元素的方法(8种)
-
通过ID获取(getElementById)
document.getElementById('id'),只获取一个元素,没有返回null
-
通过name属性(getElementsByName)
document.getElementsByName('name'),返回一个类数组,没有返回空数组
-
通过标签名(getElementsByTagName)
document.getElementsByTagName('div'),获取元素标签名,不区分大小写,返回一个类数组,没有返回空数组。
-
通过类名(getElementsByClassName)
document.getElementsByClassName('current'),参数是元素类名,返回一个类数组,没有返回空数组
-
通过选择器获取一个元素(querySelector)
document.querySelector('.current'),参数是选择器(类选择器,标签选择器,id选择器等),返回匹配到的第一个元素
-
通过选择器获取一组元素(querySelectorAll)
document.querySelectorAll('.current'),参数是选择器,返回值是一个类数组。
-
获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的
-
获取body的方法(document.body)
document.body是专门获取body这个标签的。
-
例子:今天写了一个点击事件,但是一直没效果,后来才发现,getElementsByClassName获取的是数组,我以为是元素,所以没有选中元素,没有效果。
-
友友们,慎用getElementsByClassName,如果要获取某一个元素,可以用id或者querySelector,不要像我,直接用类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .one { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <h4>1.</h4> <div class="one">1111</div> <button onclick="change()">点击</button> <script> // 1.修改div元素的背景色(随意颜色) function change(){ //getElementsByClassName得到的是一个数组,所以要用div[0] var div = document.getElementsByClassName('one'); div[0].style.backgroundColor="red"; } </script> </body> </html>