[JS] Tag, Class, id로 원하는 요소 찾기

 

 

 

 

2021.08.12 - [개발/JavaScript] - [JS] 자바스크립트 부모, 형제, 자식 노드 찾기

 

앞선 포스팅과 비슷하게 DOM 작업을 할 때 Tag, Class, id로 원하는 요소를 찾는 방법이다. 

 

 

1. getElementsByTagName

getElementsByTagName는 해당 태그가 적용된 엘리먼트를 찾는다.

//p태그를 가진 i번째 요소를 선택
var findByTag = document.getElementsByTagName( 'p' )[i];

//p태그를 가진 i번째 요소안의 strong 태그를 가진 요소를 선택
var findByTag2 = findByTag.getElementsByTagName( 'strong' );

 

);

2. getElementsByClassName

getElementsByClassName은 해당 클래스가 적용된 엘리먼트를 찾는다.

var findByName = document.getElementsByClassName("name");

for( var i = 0; i < findByName.length; i++ ){
    var section1 = findByName.item(i);
    name.style.border = "1px solid #0000ff";
}

;

 

}

3. getElementById

getElementById는 해당 id 값의 엘리먼트를 찾는다.

<button onclick="findById()">클릭</button>
<p id="target"></p>

<script>
function findById() {
  var node = document.getElementsByTagName("P").item(0).innerHTML;
  document.getElementById("target").innerHTML = node;
}
</script>