原生JS獲取含有自定義屬性的元素節點
阿新 • • 發佈:2019-02-19
jQuery有data()方法可以獲取到自定義的元素節點,而原生JS獲取則要用到querySelector以及querySelectorAll這兩個方法。
用程式碼寫一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>js獲取自定義屬性的元素</title> </head> <body> <div data-id='123'>123</div> <div data-id='123'>456</div> <div data-id='123'>789</div> <div data-id='123'>1000</div> </body> </html> <script type="text/javascript"> //querySelector只能獲取到第一個匹配的元素 let ele=document.querySelector('[data-id="123"]'); console.log(ele.length); console.log(ele.innerHTML); //querySelectorAll可以獲取到多個匹配的值,如果只有一個,可以通過下標[0]來取值 let elelist = document.querySelectorAll('[data-id="123"]'); console.log(elelist.length); console.log(elelist[0].innerHTML); console.log(elelist[1].innerHTML); console.log(elelist[2].innerHTML); console.log(elelist[3].innerHTML); </script>