querySelector 메소드를 사용하는 방법-JS 튜토리얼-php.cn

querySelector 메소드를 사용하는 방법

不言

풀어 주다： 2019-02-14 15:23:15

원래의

20673명이 탐색했습니다.

querySelector() 메서드를 사용하면 지정된 CSS 선택기와 일치하는 문서의 요소를 반환할 수 있습니다. 대신 querySelectorAll() 메서드를 사용해야 합니다. querySelector 메소드 사용법.

querySelector 메소드를 사용하는 방법

querySelector()의 기본 구문을 살펴보겠습니다.

document.querySelector(CSS selectors)

로그인 후 복사

CSS 선택기 하나 이상의 일치하는 요소를 나타내는 CSS 선택기입니다. ID, 클래스, 유형, 속성, 속성 값 등을 사용하여 요소를 선택할 수 있습니다.

참고: 선택자가 여러 개인 경우 쉼표를 사용하여 구분하세요.

구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<h2 class="example">文本的标题</h2>
<p class="example"> 文本的段落。</p> 
<button onclick="myFunction()">按钮</button>
<script>
function myFunction() {
    document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다. "버튼"을 클릭하면, 텍스트 제목의 배경색이 아래와 같이 빨간색으로 변경됩니다.

querySelector 메소드를 사용하는 방법