JS를 사용하여 HTML DOM 요소를 얻는 방법에 대한 자세한 튜토리얼

이 글에서는 주로 JS에서 HTML DOM 요소를 얻는 8가지 방법을 자세히 소개하고 있습니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라가서

HTML DOM이란 무엇인지

Document Object Model(Document Object Model)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다. 간단히 이해하면 HTML DOM은 HTML 요소를 획득, 수정, 추가 또는 삭제하는 방법에 대한 표준이라는 것입니다. JavaScript를 사용하여 웹 페이지에서 수행하는 모든 작업은 DOM을 통해 수행됩니다.

이 글에서는 심층적인 연구를 진행하지 않고 다양한 사용법과 함정만 요약합니다.

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

1. ID로 가져오기(getElementById)

2. 이름 속성으로(getElementsByName)

3. 태그 이름으로(getElementsBy 태그이름 )

4. 클래스 이름을 통해 html 가져오기(getElementsByClassName)

5. (document.documentElement)

6. 본문 가져오기(document.body)

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

8. 받기 선택기를 통한 요소 집합(querySelectorAll)
   

하나씩 설명을 시작하겠습니다.

1. ID로 가져오기(getElementById)

document.getElementById('id')

사용법:

1.

2. 매개변수는 문자열 유형이며 요소의 ID를 얻는 데 사용됩니다.

3. 반환 값은 하나의 요소만 가져오고 요소를 찾을 수 없으면 null을 반환합니다.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1. ID가 여러 개인 경우 첫 번째 ID, 즉 먼저 나타나는 ID만 가져옵니다. 일반적으로 동일한 ID는 페이지에 두 번 표시되지 않습니다.

2. IE6 및 7에서는 양식 요소의 이름을 ID 값으로 가져옵니다. 따라서 이를 정의할 때 모든 사람이 주의를 기울여야 합니다.

3. IE6 및 7에서는 대소문자를 구분하지 않습니다.

4. 요소의 ID를 직접 사용하여 이 요소를 나타낼 수 있습니다. (프로젝트에서는 권장하지 않음)

5. ID를 통해 얻은 요소의 컨텍스트는 문서만 가능합니다. 컨텍스트가 문서여야 하는 이유는 getElementById 메소드가 Document 클래스의 프로토타입에 있기 때문입니다. 아마도 이해하지 못할 수도 있으니 계속 읽어보세요.

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

document.getElementsByName('name')

사용법:

1.

2. 매개변수가 전달되어야 하며 매개변수는 요소의 이름 속성을 가져옵니다.

3. 반환 값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1 얻은 결과는 배열이 아닌 배열과 같습니다.

2. IE 브라우저에서는 양식 요소만 얻을 수 있습니다. 물론 일반적으로 양식 요소를 얻는 데만 사용됩니다.

3. getElementById와 같은 이유로 컨텍스트는 문서만 가능합니다.

3. 태그 이름별(getElementsByTagName)

document.getElementsByTagName('p');
var op = document.getElementById('pId');
op.getElementsByTagName('p');

사용법:

1. 이 요소는 반드시 존재해야 합니다.

2. 매개변수는 요소의 태그 이름 속성을 가져오는 것이며 대소문자를 구분하지 않습니다.

3. 반환 값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1. 얻은 결과는 배열과 같습니다.

2. getElementsByTagName 메소드가 Document 클래스의 프로토타입뿐만 아니라 Element 클래스의 프로토타입에도 있으므로 컨텍스트가 문서일 필요는 없으므로 문서와 요소 모두 이를 사용할 수 있습니다. 방법. 그래도 이해가 안 되시면 글 마지막에 설명하겠습니다.

4. 클래스 이름별(getElementsByClassName)

사용법(getElementsByTagName과 유사):

1. 컨텍스트는 문서일 수 있습니다.

2. 매개변수는 요소의 클래스 이름입니다.

3. 반환 값은 배열과 유사하며, 찾을 수 없으면 빈 배열이 반환됩니다.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1. 얻은 결과는 배열과 같습니다.

2.IE8 및 이전 버전은 호환되지 않습니다. 이런 유용한 방법이 호환되지 않는 것은 유감입니다.

5. html(document.documentElement)을 얻는 방법

document.documentElement는 html 태그를 얻는 데 특별히 사용됩니다.

6. body를 가져오는 방법(document.body)

document.body는 body 태그를 가져오는 데 특별히 사용됩니다.

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

사용법:

1. 컨텍스트는 문서일 수 있습니다.

2 매개변수는 "p .className"과 같은 선택기입니다.

3. 반환 값은 하나의 요소만 얻습니다.

켁~~켕켕~켕켕~켕켕~:

이 방법은 IE7 및 이전 버전에서는 호환되지 않으며, IE7과 호환되는 업체는 더 이상 고려하지 않는 것 같습니다.

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

사용법은 querySelector와 유사합니다.

1.컨텍스트는 문서일 수 있습니다.

2 매개변수는 "p .className"과 같은 선택기입니다.

3. 반환 값은 배열과 유사합니다.

Keng~~Kengkeng~Kengkeng~Kengkeng~:

querySelector와 동일하며 IE7과 호환되지 않습니다.

이제 네이티브 JS를 사용하여 DOM 요소를 얻는 8가지 방법에 대해 이야기했고, 일부 방법은 문서에서만 사용할 수 있는 이유에 대해 이야기해 보겠습니다.

p를 예로 들어 보겠습니다. p는 HTMLpElement 클래스의 인스턴스이고 document는 HTMLDocument의 인스턴스입니다.

상속 관계:

HTMLpElement > HTMLElement > Node > EventTarget

HTMLDocument > Node > EventTarget

상위 클래스의 속성 및 메서드를 사용할 수 있습니다.

동일한 상속 관계는 Node와 EventTarget입니다. 즉, 모두 Node와 EventTarget의 메서드를 사용할 수 있습니다.

예: Node에서는 nodeName, parentNode 등, EventTarget에서는 addEventListener 등

getElementById는 Document 클래스의 프로토타입에만 있습니다. HTMLpElement는 Document 클래스를 상속하지 않으므로 p는 getElementById 메서드를 사용할 수 없습니다.
getElementsByTagName은 Document 클래스의 프로토타입과 Element 클래스의 프로토타입에 있으므로 p와 document 모두 getElementsByTagName 메서드를 사용할 수 있습니다.

다른 것도 마찬가지예요.

위 내용은 JS를 사용하여 HTML DOM 요소를 얻는 방법에 대한 자세한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!