728x90
반응형
*도움이 되셨다면 광고 한번 클릭해주세요! 제게 큰 힘이됩니다! |
Node ,Element
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>javasciprt node는 위와같이 태그 노드와 텍스트 노드 전체를 말한다.
javascript Element는 텍스트 노드를 제외하고 태그(<div>)만 말합니다.
따라서 태그만 검색할때는 Element가 붙은 메소드를 선택해야한다.
여기서 DOM에 개념을 말하자면 dom은 document Object Model이라 불립니다.
즉 object 객체이며 document를 객체 형태로 구현했다고 생각하면된다.
흔히들 html 구조를보면 아래처럼 계층적 구조를 가지고있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>이 상황을 dom 객체로 구현해보면
{
document: {
html: {
head: {
title: ...
},
body: {
header: ...
}
}
}
}이런식으로 객체 구현이 된다. 그래서 document를 사용할때 document.body , document.head 이런형식으로 접근할수있다.
document 를 조작할때 많이 getElementByid 나 getElmentByclass등으로 태그에 직접 접근할수도 있지만 하위 노드를 알지 못한다면 children,childNodes를 사용하여 하위노드를 가져올수있다.
728x90
반응형
'자바스크립트 > Javascript' 카테고리의 다른 글
| [자바스크립트]javascript 생성자 함수 (0) | 2020.11.23 |
|---|---|
| [자바스크립트]javascript RegExp란? (0) | 2020.11.23 |
| [자바스크립트(javascript)] 모든 문자열 치환(repalce,replaceAll) (0) | 2020.11.21 |
| [자바스크립트(javascript)]비동기 처리 및 콜백 함수 (0) | 2020.11.21 |
| javascript DOM이란 도대체 무엇인가? (0) | 2020.04.24 |
댓글