如何更加优雅的从HTML中获取DOM元素
程序员文章站
2022-04-04 12:26:28
...
JS
中的DOM
是JavaScript
学习中的重要组成部分,传统的获取DOM
元素的方式实在是太麻烦了,如何能够更优雅地从HTML
中获取元素呢,本文就带大家一起看看。
1.利用querySelectorAll()方法
返回文档中匹配指定 CSS 选择器的所有元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="list"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> </ul> <script> const items=document.querySelectorAll(".list .item"); console.log(items); </script> </body> </html>
2.利用querySelector()方法
返回文档中匹配指定的CSS选择器的第一元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="list"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> </ul> <script> firstItem = document.querySelector('.list .item'); firstItem.style.background ="yellow"; </script> </body> </html>
推荐:《2021年js面试题及答案(大汇总)》
以上就是如何更加优雅的从HTML中获取DOM元素的详细内容,更多请关注其它相关文章!
上一篇: Redis获取某个前缀的key脚本实例
下一篇: 在mysql中如何进行子查询?