DOM 기초 특강
나도 DOM 이해할 수 있어~~!
웹 페이지가 뜨는 과정
1. www.naver.com (클 → 서)
2. HTML 문서를 수신(서 → 클)
3. 브라우저가 HTML 파일을 해석(parsing)
브라우저에는 기본적으로 랜더링 엔진이 있는데 랜더링 엔진이 HTML 문서에 코드 한 줄, 한 줄 보면서 ‘해석'한다.
4. DOM Tree를 구성
5. HTML에 CSS가 포함돼있으면 CSSOM Tree를 구성
6. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree
… 이하 과정 생략
DOM이란?
Document(HTML 파일)를 Javascript가 해석할 수 있는 Object 형태로 Modeling 한 것!
DOM은 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 javascript로 접근 및 제어할 수 있다.
모든 DOM의 node들은 ‘속성’과 ‘메서드'를 갖고 있다.
DOM에 접근 및 제어해보기
돔 트리의 최상단 노드는 항상 document
document.getRootNode(); // #document
childNodes와 parentNode 이해하기
한 가지 생각해 볼 점은 childNodes는 뒤에 s가 붙고 parentNode는 붙지 않는다. 밑으로 내려갈 경우에는 자식들이 여러 개이고 그중에 선택할 수 있지만 다시 위로 올라갈 때는 부모가 하나이기 때문이다. 따라서 childNodes는 뒤에 인덱스 번호를 붙이고, parentNode는 인덱스 번호를 붙일 필요가 없다.
근데.. html 파일 태그 사이사이에 있는 text라는 녀석을 뭘까?
text는 말 그대로 텍스트 문자열을 의미하며 줄바꿈까지 이에 포함된다고 한다.
text라는 존재를 직접 확인해 보고 싶어서 div와 hi 사이에 빈 문자열도 들어갈 수 없도록 딱 붙여 버렸다.
그랬더니 정말 div와 text 사이에 있던 text(좌측에 2번)가 사라졌다! body childNodes의 text는 대부분 줄 바꿈을 의미한다고 이해해도 될 듯하다.
document 관련 api
finding
// 해당 id명을 가진 요소 하나를 반환합니다.
document.getElementById("id명")
// 해당 선택자를 만족하는 요소 하나를 반환합니다.
document.querySelector("선택자")
// 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByClassName("class명")[인덱스]
// 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByTagName("태그명")[인덱스]
// 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.
document.querySelectorAll("선택자명")[인덱스]
// 새로운 노드를 생성합니다.
const div = document.createElement('div');
document.body.append(div);
document.body.append(div);querySeletor를 사용할 때 주의할 점은 클래스 명인지 id 명인지를 구분하기 위해 ('.text') 혹은 ('#text')로 작성해야 한다는 점이다.
ul 태그의 두 번째 리스트를 가져오고 싶을 때
changing
/** property(=속성) 변경하기 */
// 이 둘은 차이가 있어요!
element.innerHTML = new html content
element.innerText = new text
// style을 바꿔요.
element.style.property = new style
//method를 통해 클래스를 추가해봐요.
element.setAttribute(attribute, value)
// 어랏? 그럼 이런것도 가능??
element.setAttribute("style", "background-color:red;");
// ....
element.style.backgroundColor = "red";
추가 공부
// createElements
const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);
// createTextNode
let textNode = document.createTextNode("Hello World");
document.body.appendChild(textNode);
// write. 조심 또 조심!
document.write("Hello World!");
document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");
// 골로 가는 코드
function myFunction() {
document.write("Hello World!");
}
// 너무나도 많이 해봤던, addEventListener
// version 01
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
// version 02
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
innerText와 innerHTML의 차이점
document.querySelector('h1').innerHTML = '<div>테스트</div>'
document.querySelector('h1').innerText = '<div>테스트</div>'
자료 출처: 원장님의 강의 자료!
링크는 올려도 되는지 모르겠어서 안 올림