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

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

배열의 연산

 

예제

<h3>배열의 연산</h3>
<table>
<col width="50"><col width="80"><col width="80"><col width="100">
<thead>
	<tr>
		<th>첨자</th><th>a</th><th>b</th><th>a x b</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th>0</th><td>5</td><td>33</td>
		<td>
			<button type="button" onclick="multi(0)">계산결과</button>
	</tr>
	<tr>
		<th>1</th><td>12</td><td>14</td>
		<td>
			<button type="button" onclick="multi(1)">계산결과</button>
	</tr>
	<tr>
		<th>2</th><td>18</td><td>65</td>
		<td>
			<button type="button" onclick="multi(2)">계산결과</button>
	</tr>
</tbody>
</table>
<script type="text/javascript">

let nodeNum = document.getElementsByTagName("td");

let a = new Array(3); // index 0, 3, 6이 필요
let b = new Array(3); // index 1, 4, 7이 필요

for(i=0; a.length; i++){
	a[i] = nodeNum[0 + (3*i)].innerHTML;
	b[i] = nodeNum[1 + (3*i)].innerHTML;
}
function multi(index) {
	let result = a[index] * b[index];
	alert("계산결과는"+result+"입니다");
}
</script>

 

설명

 버튼 클릭시 계산결과가 나온다.

 table의 값과 관계없이 index번호로 접근하여 계산하는 예제이다.

 

let nodeNum = document.getElementsByTagName("td");

getElementsByTagName("태그명") : 해당 태그들의 인덱스 번호를 가져온다. 

위 코드의 td태그는 9개, nodeNum의 값은 8이 된다. (index 0부터 시작)

연산할 index값을 for문을 통해 배열에 넣어준다.