자바스크립트/Javascript
javascript Node 와 Element란?
디찌s
2020. 11. 22. 23:11
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
반응형