웹 프로그래밍 기초/DOM 문서객체
HTML 요소 선택하기
별초롱언니
2025. 4. 11. 14:10
HTML DOM 객체
HTML Dom에서 document 객체는 웹페이지에 있는 모든 객체의 소유자라고 생각하면 된다.
즉, document 객체는 웹페이지를 의미한다.
HTML 페이지의 요소에 접근하려면 항상 document 객체에 접근해야 가능하다 .
HTML 요소 찾는 메서드 (get)
| 메서드 | 설명 |
| document.getElementById(id) | 해당 id값의 요소 찾기 |
| document.getElementByTagName(name) | 해당 name값의 요소 찾기 |
| document.getElementByClassName(name) | 해당 class값의 요소 찾기 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementsByTagName</title>
</head>
<body>
<p>Hello World!</p>
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b>method</p>
<p id="demo"></p>
<script>
let x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 'The first paragraph (index 0) : '
+ x[0].innerHTML;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부요소_getElementsByTagName</title>
</head>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b>method</p>
</div>
<p id="demo"></p>
<script>
// EventTarget - Node - Document, Element, Text, Commnet, ...
// 빵공장 - 베이스반죽 - 소금빵 반죽, 피자빵 반죽, 롤케이크빵 반죽, ...
let x = document.getElementById("main");
// HTMLElement 반환 -> getElementsByTagName();
// x = div#main;
let y0 = document.getElementsByTagName("p");
let y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = y[0].innerHTML;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="intro">Hello World!</h1>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByTagName</b>method</p>
<p id="demo"></p>
<script>
let x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = x[0].innerHTML;
</script>
</body>
</html>
HTML 요소 찾는 메서드 (querySelector)
| 메서드 | 설명 |
| document.querySelectorAll(CSS선택자) | CSS선택자에 해당하는 요소 찾기 |
| document.querySelector(CSS선택자) | CSS선택자에 해당하는 요소 찾기 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector</title>
</head>
<body>
<h1 class="intro">Hello World!</h1>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates.</p>
<p id="demo"></p>
<script>
let x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = x[0].innerHTML;
x.forEach(function(value,index) {
document.querySelector("#demo").innerHTML += value.innerHTML;
}
)
</script>
</body>
</html>
두 예제에서 class속성이 intro값을 가진 요소를 선택했으나 마지막 출력문이 다르다.
querySelectorAll()에서는 태그가 <p>인 경우에 class="tntro"만을 선택한 것이다.
HTML Object Collections
Object Collections을 form[], anchors[], layers[], images[]가 있다.
이들은 문서 내에 여러개가 존재하면 마치 배열처럼 각 객체에 접근한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="fm1">
<input type="text" name="fname" value="Donald"><br>
<input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit">
</form>
<form id="fm2">
<input type="text" name="fname" value="Donald2"><br>
<input type="text" name="lname" value="Duck2"><br>
<input type="submit" value="Submit2">
</form>
<p>form elements</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let x = document.forms[1];
let text = "";
let i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
이는 태그나 id 등에 의해 접근하지 않고 배열로 접근 가능하게 만든다.