자바스크립트에서 요소를 얻는 세 가지 방법의 자세한 예

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

getElementById

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

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

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

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

getElementsByTagName

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

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

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

네이티브 DOM의 경우 먼저 태그 개체, ID 또는 이름 또는 기타를 가져옵니다.

예:

<p id="targetp" >2333333</p>
<script>
  var element = document.getElementById("targetp");
  var tagname = element.tagName;
  alert(tagname);
</script>

jQuery 획득

$("#content-header").get(0).tagName

이미 획득한 경우 Name

<p onclick="alert(&#39;您单击的是：&#39;+this.tagName);">中华人民共和国</p>

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;
    }
  }

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

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