【JavaScript32】查找HTML DOM节点
如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。
查询 HTML 节点(元素)一些方法
- 查找 html 页面上的元素，可以用以下方法
- 以上方法中只有getElementById()和querySelector()查找到的是单个元素，其它都是查找到的元素集合（相当于一个数组）
示例
- 1、getElementById()，id 查找 HTML 元素
<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>
- 2、getElementsByClassName() ，根据class属性值查找
- 返回的结果是HTMLCollection对象，可以看成是一个数组，会返回一个或多个元素，如果找不到会返回空的[]。
- 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) //HTMLCollection(2) [p.text.text-info, p#demo.text.text-info.text-center, demo: p#demo.text.text-info.text-center]
</script>
</body>
- 3、getElementsByName()，根据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>
- 4、getElementsByTagName()，通过tag标签属性查找所有的
标签元素, 返回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>
- 5、querySelector()，CSS 选择器查找 HTML 元素
- 它始终返回的是单个元素对象，如果查找不到返回null
- 当页面上有多个元素属性一样的时候，此时会返回第一个元素
<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>
- 6、querySelectorAll()，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>
- 7、对象选择器查找 HTML 对象d，ocument.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="xwl">
</form>
<script>
f = document.forms['form-user']
console.log(form)
for (let i = 0; i < f.length; i++) {
console.log(form.elements[i].value) // xwl
}
</script>
</body>
