JavaScript에서 DOM 요소를 얻는 방법

메서드: 1. ID를 통해 가져오기 위해 getElementById 메소드를 사용합니다. 2. 이름 값을 통해 가져오기 위해 getElementsByName 메소드를 사용합니다. 4. 태그 이름을 통해 가져오기 위해 getElementsByTagName 메소드를 사용합니다. 선택기를 통해.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

DOM 요소를 가져오는 JS 메서드(8가지 방법)

• ID로 가져오기(getElementById)
• 이름 속성으로(getElementsByName)
• 태그 이름으로(getElementsByTagName)
• 클래스 이름으로(getElementsByClassName)
• 패스 선택기는 요소를 가져옵니다(querySelector)
• 선택기(querySelectorAll)를 통해 요소 집합을 가져옵니다.
• html을 가져오는 방법(document.documentElement)
• document.documentElement는 html 태그를 가져오는 데 특별히 사용됩니다.
• 방법 body 가져오기( document.body)
• document.body는 특별히 body 태그를 얻는 데 사용됩니다.

1. ID로 가져오기(getElementById)

document.getElementById('id')

• 컨텍스트는 문서여야 합니다.
• 매개변수를 전달해야 합니다. 매개변수는 문자열 유형이며 요소의 ID를 얻는 데 사용됩니다.
• 반환 값은 하나의 요소만 가져오고, 찾을 수 없으면 null을 반환합니다.

2. 이름 속성(getElementsByName)을 통해

document.getElementsByName('name')

• 컨텐츠
• 는 매개변수를 전달해야 요소의 이름 속성을 얻을 수 있습니다.
• 반환값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

[추천 학습: javascript 고급 튜토리얼]

3. 태그 이름(getElementsByTagName)을 통해

• 컨텍스트는 문서일 수도 있고 요소일 수도 있습니다.
• 매개변수는 요소의 태그 이름 속성을 가져오는 데 사용되며 대소문자를 구분하지 않습니다.
• 반환 값은 클래스 배열입니다. 찾을 수 없으면 빈 배열이 반환됩니다.

4 클래스 이름(getElementsByClassName)을 통해

var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated

• 컨텍스트는 문서 또는 요소일 수 있습니다.
• 매개변수는 요소의 클래스 이름입니다.
• 반환값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

5. 선택기(querySelector)를 통해 요소 가져오기

document.querySelector('.animated')

• 컨텍스트는 문서일 수도 있고 요소일 수도 있습니다.
• 매개변수는 "p .className"과 같은 선택기입니다.
• 반환 값은 첫 번째 요소만 가져옵니다.

6. 선택기(querySelectorAll)를 통해 요소 집합 가져오기

document.querySelector('.animated')

• 컨텍스트는 문서 또는 요소일 수 있습니다.
• 매개변수는 "p .className"과 같은 선택기입니다.
• 반환 값은 배열과 유사합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 JavaScript에서 DOM 요소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!