DOM
Document Object Model
화면의 각 요소들에 변화를 주기 위해 js를 사용하는데
HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것
모든 노드 객체에 접근할 수 있는 요소와 메서드 제공
<ul>
<li>
<a>text</a>
</li>
</ul>
<!-- 각각이 노드 -->- 요소노드 (elements node) : 태그 그 자체를 의미
- 텍스트노드 (textnode) : 태그에 기록되어 있는 문자
- 닫는 태그를 가지지 않는 태그는 텍스트 노드를 갖지 않는다 ex)input
텍스트 노드를 갖는 요소 생성
요소노드와 텍스트 노드를 생성하고 이를 body 노트의 자식으로 포함 가능
document.createElement("태그")
요소 노드 생성 (태그를 생성한다)
document.createTextNode("태그 내부에 들어갈 글씨")
열린 태그와 닫는 태그 사이 텍스트를 갖는 노드에 텍스트를 생성
부모태그.appendChild(변수)
부모 태그에 자식 태그로 태그를 삽입
const p = document.createElement("p");
// <p></p> 생성
// 태그를 객체화한 것이기 때문에 자바스크립트 변수에 저장 가능
// p 태그 내부에 작성할 글씨 생성
const text = document.createTextNode("p 태그 내부에 들어갈 텍스트");
// 생성된 텍스트를 p 태그 내부에 삽입
p.appendChild(text);객체 배열을 이용한 메뉴 생성
const menus = new Array();
// 객체를 넣을 배열을 생성한다
const menu1 = {
name : "home",
link : "/home.html"
};
menus.push(menu1);
const menu2 = {
name : "about",
link : "/about.html"
};
menus.push(menu2);
const menu3 = {
name : "my page",
link : "/mypage.html"
};
menus.push(menu3);
for(let i=0; i<menus.length; i++){
const li = document.createElement("li");
const a = document.createElement("a");
const menuText = document.createTextNode(menus[i].name);
a.href = menus[i].link;
a.appendChild(menuText);
li.appendChild(a);
ul.appendChild(li);
}텍스트 노드가 없는 객체 생성
요소 노드를 생성하고 속성을 설정한 후 이를 body 노드의 자식으로 포함 가능
- 객체명.속성 = 속성값
- 객체명.setAttribute(속성명, 속성값)
- 객체명.getAttribute(속성명)
- 객체명.appendChild(node)
img 태그 생성
const img = document.createElement("img");
// 이미지 태그 생성
img.src = "이미지/latte.png";
// <img src="이미지/latte.png">
// 이미지 태그의 src 속성을 설정
const div = document.querySelector("#div1");
div.appendChild(img);
// <div id="div1"><img src = "이미지/dora.png"></div>CSS 요소 변경
속성을 변경하는 방법을 활용하여 요소의 CSS를 변경할 수 있다
인라인 요소
1. 요소.속성 = "값 "
태그 내부에 들어가는 인라인 스타일이기 때문에 우선순위가 높다
const div1 = document.getElementById("div1");
div1.style.color = "red";2. 클래스를 만들어 속성에 클래스를 넣어주는 방법
h3.setAttribute("id", "h");
// h3태그의 id 속성을 h로 설정
h3.setAttribute("class", "c1 c2");
// h3태그의 class 속성을 c1과 c2로 설정html 태그 접근
document.getElementById("아이디명");
HTML 문서에 접근하여 id가 "아이디명"과 동일한 요소를 가져온다
document.getElementByClassName("클래스명");
클래스는 중복 설정이 가능하기 때문에 반드시 배열로 받아온다
만약 클래스가 1개라고 해도 길이 1의 배열로 받아온다
const divs = document.getElementsByClassName("test");
console.log(divs);
divs[0].appendChild(p);
// 배열로 받아오기 때문에 인덱스로 가리켜 조작해야 한다document.querySelector("선택자")
선택자를 넣어 1개의 요소를 가져온다
document.querySelectorAll("선택자")
선택자에 해당하는 요소를 배열로 받아온다
const divs = document.querySelectorAll(".test");
divs[1].appendChild(p);innerHTML / innerText
둘다 태그 안에 값을 의미 (열린 태그와 닫힌 태그 사이 값)
HTML은 안 쪽에 있는 태그를 포함하고, Text는 안 쪽 텍스트만을 의미한다
value
input 태그에서 입력 값을 가져올 때 사용
const input1 = document.querySelector("#input1");
const input2 = document.querySelector("#input2");
const str1 = input1.value;
const str2 = input2.value;
input1.value = "안녕하세요";
input2.value = "비밀번호입니다";
input1.setAttribute("readonly", true);
aelatte coding journal