-
javascript Node 와 Element란?자바스크립트/Javascript 2020. 11. 22. 23:11728x90반응형
*도움이 되셨다면 광고 한번 클릭해주세요! 제게 큰 힘이됩니다!
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