获取DOM对象的常用方法有如下几种:
getElementById() 通过元素的ID属性获取DOM对象,获取的是一个DOM对象。
getElementsByTagName() 通过元素的标签名获取DOM对象,获取的是一组DOM对象。
getElementsByClassName() 通过元素的class属性获取DOM对象,获取的是一组DOM对象。
getElementsByName() 通过元素的name属性获取DOM对象,获取的是一组DOM对象。
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="one">这是一个p标签</p> <p class="first">这是一个p标签</p> <p class="first" id="two">这是一个p标签</p> <p name="username">这是一个p标签</p> <p name="username">这是一个p标签</p> <script> let oneObj = document.getElementById('one'); // 通过Id获取 oneObj.style.color = 'red'; //只有第一个p标签字体变红色 let twoObj = document.getElementById('two'); // 通过Id获取 twoObj.style.color = 'blue'; //id为two的p标签字体变蓝色 twoObj.style.background = 'gray'; //id为two的p标签背景颜色变为灰色 let pArr = document.getElementsByTagName('p'); // 通过元素的标签名获取 console.log("p标签的个数:"+pArr.length); //获取所有p标签对象,是数组,长度为5 let firstArr = document.getElementsByClassName('first'); // 通过class获取 console.log("class为first的对象个数:"+firstArr.length); //获取所有class为first的对象,是数组,长度为2 let userArr = document.getElementsByName('user'); console.log("name属性为user的对象个数:"+userArr.length); //获取所有name属性为user的对象,是数组,长度为0 let userArr1 = document.getElementsByName('username'); console.log("name属性为username的对象个数:"+userArr1.length); //获取所有name属性为username的对象,是数组,长度为2 </script> </body> </html>
讲解都写到了注释里↑
效果截图: