요소를 가져오는 자바스크립트 메소드

JavaScript에서 요소를 가져오는 방법: 1. getElementById를 통해 id 속성이 있는 노드 객체를 가져옵니다. 2. getElementsByTagName을 통해 객체 배열을 가져옵니다. 3. getElementsByClassName을 통해 지정된 클래스 이름을 가진 요소를 가져옵니다.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

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

getElementById

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

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

코드는 다음과 같습니다.

document.getElementById('demo') //demo是元素对应的ID

이 방법은 IE6+를 포함한 주류 ​​브라우저와 호환되며 과감하게 사용할 수 있습니다.

getElementsByTagName

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

코드는 다음과 같습니다.

document.getElementsByTagname('li')  //li是标签的名字

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

코드는 다음과 같습니다.

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

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

getElementsByClassName

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

코드는 다음과 같습니다.

document.getElementsByClassName('demo')    //demo为元素指定的class名

getElementsByTagname과 동일하며 문서 객체에 의해 호출되는 것 외에 일반 요소에서도 이 메소드를 호출할 수 있습니다.

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

코드는 다음과 같습니다.

function getElementsByClassName(node,classname){
        if(node.getElementsByClassName) {
            return node.getElementsByClassName(classname);
        }else {
            var results = [];
            var elems = node.getElementsByTagName("*");
            for(var i = 0; i < elems.length; i++){
                if(elems[i].className.indexOf(classname) != -1){
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }

Extension

위의 요소 선택 방법에 만족할 뿐만 아니라 다음을 수행하고 싶습니다. JQuery와 동일한 작업을 수행하면 선택기를 통해 요소를 얻을 수 있습니다. 구현 방법은 위의 getElementsByClassName과 유사합니다. 관심이 있는 경우 선택기 세트를 직접 구현할 수 있습니다. 하지만 결국 이 세 가지 방법은 이벤트 버블링과 결합하면 충분하다고 생각합니다.

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

위 내용은 요소를 가져오는 자바스크립트 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!