<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="father"> <form> <input type="text" name="test"> <input type="password" name="test"> </form> </div> <div class="father" id="box">我是div</div> <script type="text/javascript"> //通过id获取 /*
1.通过id获取指定元素
由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null
注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)
*/ let oDiv=document.getElementById('box'); console.log(oDiv); console.log(typeof oDiv); //通过类获取 /*
2.通过class名称获取
由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
*/ let oDivs=document.getElementsByClassName("father"); console.log(oDivs); //通过name获取 /*
3.通过name名称获取
由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
注意点:
getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。
*/ let oDivs1=document.getElementsByClassName("test"); console.log(oDivs1); //通过标签名称获取 /*
4.通过标签名称获取
由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
*/ let ov=document.getElementsByTagName("div"); console.log(ov); //通过选择器获取 /*
5.通过选择器获取
querySelector只会返回根据指定选择器找到的第一个元素
*/ let oo=document.querySelector("div>form"); console.log(oo); //通过选择器获取 /*
6.通过选择器获取
querySelectorAll会返回指定选择器找到的所有元素
*/ let vv=document.querySelectorAll(".father"); console.log(vv); </script> </body> </html>
dom啦2
关注
打赏
