반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
NodeList (dom이 아니다)
버튼을 통해서 값을 가져오는 것
-->
<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'); //모든 p태그를 배열로 저장
alert(nodelist.length); // p태그의 갯수
nodelist[3].innerHTML = "나는 문제 없어!!"; //4번째 p태그의 값을 변경!
/*
i can do int = nodelist[3] -> 나는 문제 없어!!
*/
for (i = 0; i < nodelist.length; i++){
nodelist[i].style.backgroundColor = '#ff0000'; //모든 ptag의 backgroundColor을 red로 셋팅
}
}
</script>
</body>
</html>document.getElementsByTagName('p')를 통해서 모든 p태그를 배열로 반환을 받아서 배열의 길이만큼 반복하여 모든 p태그의 배경색을 변경해보는 예제이다.
hello
world
i can do it
Never change my mind
반응형
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript XML Parsing ( new XMLHttpRequest() ) (0) | 2021.06.08 |
|---|---|
| [JavaScript] 문자열을 XML파일로 변환하기 (String / XML parsing) (0) | 2021.06.08 |
| [JavaScript] DOM이란? JavaScript로 html 태그 추가(JavaScript를 사용해 DOM에 새로운 노드 추가, childNodes) (0) | 2021.06.08 |
| [JavaScript]이벤트 리스너(event listener) (0) | 2021.06.07 |
| [JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 ) (0) | 2021.06.07 |