JavaScript_8강_5_문서에서 특정한 요소를 찾는 방법(getElementById();, getElementsByTagName(), getElementsByClassName(), querySelector())
JavaScript
목록 보기
33/37
문서에서 특정한 요소를 찾는 방법
1. getElementById("id이름");
==> 문서에서 특정 id를 가진 요소 찾기
2. getElementsByTagName(tag이름);
==> tag 이름과 일치하는 요소를 배열로 가져오는 함수
3. getElementsByClassName(class이름);
==> class 이름과 일치하는 요소를 배열로 가져오는 함수
4. querySelector("선택자");
==> 선택자 이름과 일치하는 요소를 배열로 가져오는 함수
1. getElementById("id이름"); 예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 1. getElementById("id이름");
let header1 = document.getElementById("header_1");
let header2 = document.getElementById("header_2");
header1.innerHTML = 'header_1 id를 가진 요소';
header2.innerHTML = "<i>방가방가</i>";
}
</script>
</head>
<body>
<h1 id = "header_1">Header_1</h1>
<h1 id = "header_2">Header_2</h1>
</body>
</html>=============================실행=============================
2. getElementsByTagName(tag이름); 예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 2. getElementsByTagName(tag이름)
let p_elements = document.getElementsByTagName("p");
alert('p태그 길이 >>> ' + p_elements.length);
p_elements[0].innerHTML = '이 름 : <b>홍길동</b>';
}
</script>
</head>
<body>
<h1>TITLE</h1>
<p>이 름 : 도레미</p>
<p>주 소 : 서울시 구로구</p>
<p>연락처 : 02)123-1234</p>
</body>
</html>=============================실행=============================
3. getElementsByClassName(class이름); 예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 3. getElementsByClassName(class이름);
let texts = document.getElementsByClassName("user");
alert("class 요소 갯수 >>> " + texts.length);
for(let i = 0; i < texts.length; i++){
texts[i].innerHTML = '<b style = "color: red;">class 요소들</b>';
}
}
</script>
</head>
<body>
<p class = "user">이 름 : 도레미</p>
<p class = "user">주 소 : 서울시 구로구</p>
<p class = "user">연락처 : 02)123-1234</p>
</body>
</html>=============================실행=============================
4. querySelector("선택자"); 예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 4. querySelector("선택자");
let head = document.querySelector("#head");
// h1 태그의 스타일을 변경해보자
head.style.width = "400px";
head.style.border = "1px solid red";
head.style.color = "#FFF";
head.style.backgroundColor = "#000";
head.style.fontFamily = "궁서체";
head.style.textAlign = "center";
head.innerHTML = "방가방가~";
}
</script>
</head>
<body>
<h1 id = "head">HEADER</h1>
</body>
</html>=============================실행=============================
