如何查找和访问 HTML 页面中的节点元素?也就是我们经常说的定位元素的一些方法。
查找 html 页面上的元素,可以用以下方法
方法 | 节点类型 |
---|---|
getElementById() | 通过 id 查找 HTML 元素 |
getElementsByClassName() | 通过标 class 属性查找 HTML 元素 |
getElementsByName() | 通过标 name 属性查找 HTML 元素 |
getElementsByTagName() | 通过标 tag 标签查找 HTML 元素 |
querySelector() | CSS 选择器查找 HTML 元素 |
querySelectorAll() | CSS 选择器查找符合条件所有 HTML 元素 |
document.forms() | 对象选择器查找 HTML 对象 |
以上方法中只有getElementById()
和querySelector()
查找到的是单个元素,其它都是查找到的元素集合(相当于一个数组)
通过 id 查找 HTML 元素 ,使用语法
document.getElementById("id属性")
示例
<body> <h1>DOM 节点</h1> <p id="demo" class="text">Hello world!</p> <script> element = document.getElementById('demo') console.log(element) // <p id="demo" class="text">Hello world!</p> </script> </body>
一般如果元素有id属性,id一般都是唯一属性,所以通过id查找是最简单的方法。
如果元素被找到,此方法会以对象返回该元素, 如果未找到元素,返回null。
如果元素只有一个class属性,如下面的class="text"
,会查找页面上所有的class属性带有text属性的元素。
<body> <h1>DOM 节点</h1> <p class="text">Hello</p> <p id="demo" class="text text-info">Hello world!</p> <script> ele1 = document.getElementsByClassName('text') console.log(ele1.length) // 2 console.log(ele1) // HTMLCollection(2) [p.text, p#demo.text.text-info, demo: p#demo.text.text-info] </script> </body>
返回的结果是HTMLCollection
对象,可以看成是一个数组,会返回一个或多个元素,如果找不到会返回空的[]。
如果class属性有多个值class="text text-info"
,那么可以拿其中的一个属性去查找
ele2 = document.getElementsByClassName('text-info') console.log(ele2.length) // 1 console.log(ele2) // HTMLCollection [p#demo.text.text-info, demo: p#demo.text.text-info]
HTMLCollection
对象有length属性,可以统计查找到元素的个数
我们也可以通过class属性查找同时满足多个条件的元素,getElementsByClassName('text text-info')
会查找class属性同时有"text"和"text-info"属性。
<body> <h1>DOM 节点</h1> <p class="text">Hello</p> <p class="text text-info">world!</p> <p id="demo" class="text text-info text-center">Hello world!</p> <script> ele1 = document.getElementsByClassName('text text-info') console.log(ele1.length) // 2 console.log(ele1) // </script> </body>
根据name属性查找所有name="username"
, 返回NodeList数组对象
<body> <h1>DOM 节点</h1> <p class="text">Hello</p> <input name="username"> <script> ele1 = document.getElementsByName('username') console.log(ele1.length) // 1 console.log(ele1) // NodeList [input] </script> </body>
通过tag标签属性查找所有的<p>
标签元素, 返回HTMLCollection 数组对象
<body> <h1>DOM 节点</h1> <p class="text">Hello</p> <script> ele1 = document.getElementsByTagName('p') console.log(ele1.length) // 1 console.log(ele1) // HTMLCollection [p.text] </script> </body>
CSS 选择器查找 HTML 元素
<body> <h1>DOM 节点</h1> <p id="demo" class="text text-info text-center">Hello world!</p> <script> ele1 = document.querySelector('#demo'); // id属性 console.log(ele1) ele2 = document.querySelector('.text-info'); // class属性 console.log(ele2) ele3 = document.querySelector('p'); // tag 标签 console.log(ele3) </script> </body>
它始终返回的是单个元素对象,如果查找不到返回null
当页面上有多个元素属性一样的时候,此时会返回第一个元素
<body> <h1>DOM 节点</h1> <p class="text-info">Hello</p> <p id="demo" class="text text-info text-center">Hello world!</p> <script> ele = document.querySelector('.text-info'); // class属性 console.log(ele) // <p class="text-info">Hello</p> </script> </body>
CSS 选择器查找符合条件所有 HTML 元素
<body> <h1>DOM 节点</h1> <p class="text-info">Hello</p> <p id="demo" class="text text-info text-center">Hello world!</p> <script> ele1 = document.querySelectorAll('#demo') console.log(ele1) // NodeList [p#demo.text.text-info.text-center] ele2 = document.querySelectorAll('.text-info') console.log(ele2) // NodeList(2) [p.text-info, p#demo.text.text-info.text-center] </script> </body>
document.forms 获取form表单对象
<body> <h1>DOM 节点</h1> <p class="text-info">Hello</p> <form id="form-user"> <label for="user">用户名</label> <input id="user" name="username" value="yoyo"> </form> <script> form = document.forms['form-user'] console.log(form) for (let i = 0; i < form.length; i++) { console.log(form.elements[i].value) // yoyo } </script> </body>
以下 HTML 对象(和对象集合)也是可访问的: