JavaScript_javascript 기술에서 요소를 얻는 일반적인 방법 요약

요소를 얻는 일반적인 방법에는 요소 ID, 태그 이름, 클래스 이름 등 세 가지가 있습니다.

getElementById

DOM은 id 속성에 해당하는 노드 객체를 반환하는 getElementById라는 메서드를 제공합니다. 사용시 대소문자 구분에 주의하시기 바랍니다.

문서 객체 고유의 함수로, 이 메소드를 통해서만 호출할 수 있습니다. 사용방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

document.getElementById('demo') //demo는 요소에 해당하는 ID입니다

이 방법은 IE6를 비롯한 주류 브라우저에서도 호환되며 과감하게 사용할 수 있습니다.

getElementsByTagName

이 메서드는 개체 배열(정확히 말하면 HTMLCollection, 진정한 의미의 배열이 아님)을 반환하며, 각 개체는 문서에서 지정된 태그가 있는 요소에 해당합니다. getElementById와 유사하게 이 메소드는 하나의 매개변수만 제공하며 해당 매개변수는 지정된 태그의 이름입니다.

코드 복사 코드는 다음과 같습니다.

document.getElementsByTagname('li') //li는 태그의 이름입니다

이 메소드는 문서 객체에 의해 호출되는 것 외에도 일반 요소에 의해 호출될 수도 있다는 점에 유의해야 합니다. 예시는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var 데모 = document.getElementById('demo');
var lis = 데모.getElementsByTagname('li')

마찬가지로 이 방법은 IE6를 비롯한 주류 브라우저에서도 호환되며 과감하게 사용할 수 있습니다.

getElementsByClassName

태그를 지정하여 요소를 얻는 것 외에도 DOM은 지정된 클래스 이름을 가진 요소를 얻는 getElementsByClassName 메서드도 제공합니다. 그러나 이 방법은 비교적 새로운 방법이기 때문에 IE6과 같은 이전 브라우저에서는 아직 지원하지 않습니다. 그러나 해킹을 사용하여 기존 브라우저의 단점을 보완할 수 있습니다. 메소드는 다음과 같이 호출됩니다.

코드 복사 코드는 다음과 같습니다.

document.getElementsByClassName('demo') //demo는 요소에 지정된 클래스 이름입니다

getElementsByTagname과 마찬가지로 이 메소드는 문서 객체 외에 일반 요소에서도 호출할 수 있습니다.

IE6 및 7과 같은 이전 브라우저의 경우 다음 해킹을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 getElementsByClassName(노드,클래스 이름){
If(node.getElementsByClassName) {
                return node.getElementsByClassName(클래스 이름);
         }그밖에 {
          var 결과 = [];
              var elems = node.getElementsByTagName("*");
for(var i = 0; i < elems.length; i ){
If(elems[i].className.indexOf(클래스 이름) != -1){
결과[결과.길이] = 요소[i];
                }
            }
             결과 반환
}
}  

확장

위의 요소 선택 방법에 만족할 뿐만 아니라 JQuery와 같은 선택기를 통해 요소를 가져오고 싶다면 구현 방법은 위의 getElementsByClassName과 유사합니다. 관심이 있다면 직접 선택기 세트를 구현할 수 있습니다. . 하지만, 결국 이 세 가지 방법을 이벤트 버블링과 결합하면 충분하다고 생각합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다.