요소를 얻는 세 가지 일반적인 방법, 즉 요소 ID를 통한 이름, 태그를 통한 이름 및 클래스를 통해 이름을 얻는 세 가지 일반적인 방법이 있습니다.
getElementById
DOM은 getElementByid라는 메소드를 제공하며 해당 ID 속성으로 노드 객체를 반환합니다. 그것을 사용할 때 사례에 민감하도록주의하십시오.
문서 개체에 고유 한 기능이며이를 통해서만 호출 할 수 있습니다. 사용 된 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
document.getElementById ( 'demo') // 데모는 요소에 해당하는 ID입니다
이 방법은 IE6+를 포함하여 주류 브라우저와 호환되며 대담하게 사용할 수 있습니다.
getElementsByTagName
이 메소드는 객체 배열을 반환합니다 (정확하고 htmlcollection collection, 실제 배열이 아닙니다) 각 객체는 문서에 주어진 태그가있는 요소에 해당합니다. getElementById와 유사 하게이 방법은 하나의 매개 변수 만 제공하며 매개 변수는 지정된 태그의 이름입니다. 예제 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
document.getElementsByTagName ( 'li') // li는 태그의 이름입니다
문서 개체에 의해 호출되는 것 외에도이 방법은 일반 요소로 호출 할 수 있습니다. 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var demo = document.getElementById ( 'demo');
var lis = demo.getElementsByTagName ( 'li');
마찬가지로,이 방법은 IE6+를 포함하여 주류 브라우저와 호환되며 대담하게 사용할 수 있습니다.
getElementsByClassName
태그를 지정하여 요소를 얻는 것 외에도 DOM은 GetElementsByClassName 메소드를 제공하여 지정된 클래스 이름으로 요소를 얻습니다. 그러나이 방법은 비교적 새롭기 때문에 이전 브라우저는 IE6과 같은 지원하지 않습니다. 그러나 해킹을 통해 오래된 브라우저의 단점을 보충 할 수 있습니다. 이 방법은 다음과 같이 불립니다.
코드 사본은 다음과 같습니다.
document.getElementsByClassName ( 'demo') // 데모에 지정된 클래스 이름은입니다
getElementsByTagName과 마찬가지로이 방법은 문서 개체에 의해 호출되는 것 외에도 일반 요소로 호출 할 수 있습니다.
IE6 및 7과 같은 이전 브라우저의 경우 다음 해킹을 통해이를 구현할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 getElementsByClassName (노드, 클래스 이름) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}또 다른 {
var results = [];
var elems = node.getElementsByTagName ( "*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! = -1) {
결과 [results.length] = elems [i];
}
}
반환 결과;
}
}
확장하다
위의 요소 선택 방법에 만족할뿐만 아니라 jQuery와 같은 선택기를 통해 요소를 얻으려고합니다. 구현 방법은 위의 getElementsByClassName과 유사합니다. 관심이 있으시면 선택기 세트를 구현할 수 있습니다. 그러나 이벤트 버블과 결합 된 위의 세 가지 방법 만으로도이 세 가지 공연이 우수하다고 생각합니다.
위의 내용은이 기사에 관한 것입니다. 모든 사람에게 도움이되기를 바랍니다.