| 클라이언트사이드 |
문서 객체 선택
여러 가지 방법으로 HTML 요소를 선택 가능
id : document.getElementByld("id") - 이것은 배열에 담기지않음
문서 <body></body>내의 요소들 중에서 속성 id가 'id'와 일치하는 요소 하나 선택
tag name
document.getElementsByTagName("h1") - 반드시 복수로 해야함(상황에 따라서 다름)
문서 <body></body>내의 모든 "h1"요소들을 선택 - 배열에 담아옴 (여러개를 하기에 배열이 필요
class name
document.getElementsByClassName("cls")
HTML class 속성은 클래스 이름이 동일한 스타일을 정의하는 데 사용됨
동일한 class 속성을 가진 모든 HTML요소는 동일한 스타일 갖습니다.
css selector
.pgm <- (.)이런 것을 Selector라고 함 {
color: blue;
}
document.querySelector("sel")
문서<body> 내의 요소들 중에서 CSS selector가 "sel"과 일치하는 첫 요소를 선택
document.querySelectorAll("p.intro")
문서 바디 내의 <p>요소들 중에서 속성 class가 "intro"와 일치하는 모든 요소들을 선택
HTML obejct collection
document.<요소들>
anchors 문서 내의 위치를 잡아주기 위한 것
body 웹 문서 전체가 다 담겨져있음
documentElement 모든 것
embeds
forms
head
images
links
scripts
title
문서 객체 조작
HTML 내용
element.innerHTML = new HTML content
요소의 내부 HTML 내용을 변경
속성
요소의 속성(attribute) 값을 변경
element.attribute = new value
element.setAttribute(attribute, new value)
요소의 속성 값 가져오기
element.getAttribute(attribute)
스타일
element.style.property = new style
요소의 스타일 속성 값을 변경
스타일 속성 이름 비교
Style sheet vs JavaScript
Style sheet = backgorund-color
border-radius
color
JavaScript = backgroundColor
borderRadius
color
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
window.onload = function() {
}
.pgm { // .pgm의 .이 셀렉트라고 할 수 있다.
color: blue;
}
.thm {
color: red;
}
</style>
<!-- ====================== -->
<script type="text/javascript">
window.onload = function() {
let classpgm = document.querySelectorAll(".pgm");
for(let item of classpgm) {
item.style.color = "orange";
}
// 문서의 첫 <li> 객체의 속성 class의 속성값을 경고창으로 표시하기
// 1. 첫 < li> 객체를 선택하여 가져온다
// 2. 가져온 객체의 속성 class의 속성값을 읽어온다.
// 3. 읽은 속성 값을 경고창(alert)으로 표시한다.
let firstLI = document.querySelector("li");
let classValue = firstLI.getAttribute("class");
alert(classValue);
alert("선택 객체의 class 속성 값을 thm으로 변경합니당");
//4. 가져온 객체의 속성 class의 속성값을 thm으로 변경한다.
// let styleValue = classValue.setAttribute("pgm", "thm");
//firstLI.setAttribute("class", "tgm");
alert(firstLI.innerHTML);
}
</script>
<!-- ====================== -->
</head>
<body>
<h1>DOM Coding Test</h1>
<hr>
<h2>2학기 공통 수강과목</h2>
<hr>
<p>과목 분류 : [<span class="thm">이론 과목</span>] [<span class="pgm">프로그래밍 실습과목</span>]</p>
<ul>
<li class="pgm">Client side Programing</li>
<li class="pgm">Java 프로그래밍</li>
<li class="thm">데이터베이스</li>
<li class="pgm">오픈소스소프트웨어</li>
</ul>
</body>
</html>