자바스크립트 태그 속성 값 가져오기 ( javaScript tagName )

- 요소의 tagName 속성에 접근하기 - 

어떤 요소의 하위 요소들 중에서
특정 태그 요소들만 받아오려고 한다.

예를 들어서 특정 div 태그 안에 있는 요소들 중에
<button> 태그 요소들만 받아오거나
<a> 태그 요소들만 받아오는 식이다.

그때 'tagName' 속성 값을 이용하면 된다.
요소 객체들은 'tagName' 이라는 속성을 갖는다.
그 요소의 태그 이름을 들고 있는 속성이다.

const ele = document.querySelector('#eleID');
const tagName = ele.tagName;
if(tagName == 'INPUT') {
	console.log('이 태그는 input 태그입니다');
    //do something
}

 

- 응용 예시 - 

예를 들어서, 아래 코드를 보자.
어떤 <tbody> 태그 안에 있는 요소들 중에
<tr> 태그만 받아 오는 코드이다.

const subList = document.querySelector('tbody#fruitInfo').childNodes;   //tbody에서 자식 노드들을 NodeList 형태로 받아온다.
subList.forEach((ele, index) => {  //forEach를 돌려서 요소를 하나씩 꺼내온다.
        if (ele.tagName == 'TR') {     //각 요소가 가지고 있는 속성들 중에 tagName이라는 속성의 값이 'TR'인 경우만 접근하다
        const chbox = ele.querySelector('.chbox'); //해당 tr 요소의 하위 요소들 중에 클래스가 chbox인 요소를 불러온다.
        if (chbox.checked) { // checkbox가 check된 상태인지 확인한다.
            const msg = ele.querySelector('.msg').innerHTML;    //tr 태그 안에 있는 요소들 중에 클래스가 msg인 요소의 html 값을 받아 온다.
            console.log(msg)    //받아온 값을 출력한다.
        }
    }
});

 

-220404