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() 메서드를 사용하세요. 돌아가기 document 지정된 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 요소를 더 우아하게 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!