choice blog

NodeList : node를 index로 가져오는 방법

DOM이 아니다.

value값을 가져올 수 있는 방법 중 하나이다.

 

사용목적 : id나 class 추가를 못할 때 수정해야 할 경우에 사용한다.

 

예시

<p>hello</p>
<p>world</p>
<p>I can do it</p>
<p>Never change my mind</p>

<button type="button" onclick="listfunc()">nodelist</button>

<script type="text/javascript">
function listfunc() {
	let nodelist = document.getElementsByTagName('p');

	nodelist[3].innerHTML = "나는 문제없어"; // 3번지 수정
	
	for (var i = 0; i < nodelist.length; i++) { 
		nodelist[i].style.backgroundColor = '#ff0000';
	}
}
</script>

 

설명

getElementsByTagName(태그) : index로 값을 넘겨받는다.

hello	world	I can do it	Never change my mind
0번지	1번지	2번지	3번지

전체 수정을 하고 싶은 경우 for문을 사용한다.

 

실행화면

hello

world

I can do it

Never change my mind

nodelist

버튼 클릭 시 수정된 걸 확인할 수 있다.