DOM
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM요소 접근하기
HTML
<body>
<div>
<label for="userId">사용자 ID</label>
<input type="text" name="" id="userId" class="form-control" />
</div>
<div>
<input type="checkbox" name="chk_pl" id="chk_html" value="HTML" />
<label for="chk_html">HTML</label>
<input type="checkbox" name="chk_pl" id="chk_css" value="CSS" />
<label for="chk_css">CSS</label>
<input type="checkbox" name="chk_pl" id="chk_js" value="JS" />
<label for="chk_js">JavaScript</label>
</div>
<button onclick="doSave();">저장</button>
<button onclick="doSave2();">저장2</button>
</body>
Id 값을 이용해서 DOM 요소 찾기
<script>
// id 값을 이용해서 DOM 요소 찾기
const userIdElement = document.getElementById("userId");
console.log(userIdElement);
const userIdElement2 = document.querySelector("#userId"); // id와같이 하나만있는값은 querySelector
console.log(userIdElement2);
</script>태그명을 이용해서 DOM 요소 찾기
<script>
// 태그명을 이용해서 DOM 요소 찾기
const labelElements = document.getElementsByTagName("label");
console.log(labelElements);
const labelElements2 = document.querySelectorAll("label"); // 여러항목인경우 querySelectorAll
console.log(labelElements2);
</script>
클래스명을 이용해서 DOM 요소 찾기
<script>
// 클래스명을 이용해서 DOM 요소 찾기
const inputElements = document.getElementsByClassName("form-control");
console.log(inputElements);
const inputElements2 = document.querySelectorAll(".form-control");
console.log(inputElements2);
</script>
name 속성 값을 이용해서 DOM 요소 찾기
<script>
// name 속성 값을 이용해서 DOM 요소 찾기
function doSave() {
const chks = document.getElementsByName("chk_pl");
let checkedValue = [];
for (const chk of chks) {
if (chk.checked) {
checkedValue.push(chk.value);
}
}
console.log(checkedValue);
}
</script>
CSS 선택자를 이용해서 DOM 요소 찾기
<script>
// CSS 선택자를 이용해서 DOM 요소 찾기
function doSave2() {
const checkedElements = document.querySelectorAll("[name=chk_pl]:checked");
console.log(checkedElements);
let checkedValue = [];
for (const chk of checkedElements) {
checkedValue.push(chk.value);
}
console.log(checkedValue);
}
</script>
JavsScript
<script>
// id 값을 이용해서 DOM 요소 찾기
const userIdElement = document.getElementById("userId");
console.log(userIdElement);
const userIdElement2 = document.querySelector("#userId"); // id와같이 하나만있는값은 querySelector
console.log(userIdElement2);
// 태그명을 이용해서 DOM 요소 찾기
const labelElements = document.getElementsByTagName("label");
console.log(labelElements);
const labelElements2 = document.querySelectorAll("label"); // 여러항목인경우 querySelectorAll
console.log(labelElements2);
// 클래스명을 이용해서 DOM 요소 찾기
const inputElements = document.getElementsByClassName("form-control");
console.log(inputElements);
const inputElements2 = document.querySelectorAll(".form-control");
console.log(inputElements2);
// name 속성 값을 이용해서 DOM 요소 찾기
function doSave() {
const chks = document.getElementsByName("chk_pl");
let checkedValue = [];
for (const chk of chks) {
if (chk.checked) {
checkedValue.push(chk.value);
}
}
console.log(checkedValue);
}
// CSS 선택자를 이용해서 DOM 요소 찾기
function doSave2() {
const checkedElements = document.querySelectorAll("[name=chk_pl]:checked");
console.log(checkedElements);
let checkedValue = [];
for (const chk of checkedElements) {
checkedValue.push(chk.value);
}
console.log(checkedValue);
}
</script>
DOM 속성(attribute)
HTML
<body>
<div>
<label for="userName">당신의 이름은?(*)</label>
<input type="text" name="" id="userName" onkeyup="checkRequired();" />
</div>
<label for="selLanguage">가장 좋아하는 프로그래밍 언어는?</label>
<select name="" id="selLanguage" value="">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JS">JavaScript</option>
</select>
<button onclick="doSave();" id="btnSave" disabled>저장</button>
<button onclick="setLang();">설정</button>
</body>
DOM 요소 속성값 접근 및 변경
JavaScript
<script>
// DOM 요소에 접근하고 나면,
// 요소의 속성 값을 읽어오거나, 반대로 속성 값을 변경.
function doSave() {
// 버튼 비활성화 : 데이터를 받아오는동안 여러번 누르면 문제발생
document.querySelector("#btnSave").disabled = true;
if (document.querySelector("#userName").value === "") {
return alert("이름은 필수 입력값입니다.");
}
const favoriteLang = document.querySelector("#selLanguage").value;
console.log(favoriteLang);
// setTimeout을 사용하여 서버와 통신하고 응답을 받았다고 가정
setTimeout(function () {
document.querySelector("#btnSave").disabled = false;
}, 2000);
}
function setLang() {
document.querySelector("#selLanguage").value = "JS"; // 설정을 누르면 JavaScript가 값으로 들어감
}
function checkRequired() {
const userNameElement = document.querySelector("#userName");
if (userNameElement.value.length > 0) {
document.querySelector("#btnSave").disabled = false;
} else {
document.querySelector("#btnSave").disabled = true;
}
}
</script>
Nodelist와 HTMLCollection 차이점
https://yung-developer.tistory.com/m/79
참고자료
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
'WEB > JavsScript' 카테고리의 다른 글
| [JavaScript] DOM 이벤트 다루기 (0) | 2022.06.04 |
|---|---|
| [JavaScript] DOM 이벤트 버블링 (0) | 2022.06.04 |
| [JavaScript] 정규 표현식(Regular Expression) (0) | 2022.06.01 |
| [JavsScript] Class와 상속 (0) | 2022.05.31 |
| [JavaScript] module & try..catch (0) | 2022.05.30 |
댓글