자바스크립트를 공부하던 중 알 수 없는 document.querySelector .. 이런 것들이 계속해서 나오는 것이다. 이게 도대체 무엇일까 찾다가 DOM 이라는 것을 알게 되었다. 지속적으로 나올 것 같아서 간단하게 공부해 보았다.
DOM 이란?
DOM : document object model
DOM은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다.
자바스크립트가 DOM을 통해서 웹페이지에 접근할 수 있습니다.
웹페이지의 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용된다.
DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.
CREATE - createElement
document 객체의 createElement 메소드를 활용하여 div element를 만들기.
※ 자바스크립트를 활용해서 DOM을 활용할 수 있어야 한다.
자바스크립트에서 어떤 작업의 결과를 담으려면 어떻게 해야 할까?
바로 변수를 선언하고 그 결과를 할당하면 된다. 그러면 div element에 이름을 지어주자.
위 사진의 comment는 화면에 출력되지 않는다. append를 통해 div로 연결해줘야 한다.
APPEND - append, appendChild, prepend
▶ prepend() 메서드는 선택한 요소의 시작 부분에 지정된 내용을 삽입합니다. append() 메서드는 선택한 요소의 끝에 지정된 내용을 삽입합니다.
간단하게 비교해서 배열 메소드의 unshift와 비슷한 기능을 하는 것이 prepend, push와 비슷한 기능을 하는 것이 append라고 생각하면 이해하기 쉬울 것이다!
▶ 아무런 변화가 없을 뿐더러 반환하는 값도 없다. 하지만 document.body.append() 를 통해 값을 넣을 수 있다.
append() 와 appendChild() 의 차이점
※ 둘 모두 부모 요소에 자식 요소를 추가하는 메소드! 하지만 다른 점들이 세 개 정도 있다.
💡 append 는 한 번에 여러 개의 자식 요소를, appendChild 는 한 번에 하나의 자식 요소만 추가.
💡 append 는 DOMString objects 도 추가할 수 있는데, appendChild는 Node object 만 추가 가능. 다시 말해, append 를 쓰면 string 도 추가할 수 있다!
💡 append 는 return 값을 반환하지 않는데, appendChild 는 붙인 Node object 값을 반환한다.
append()
👉 DOM String 객체도 추가가 가능하다.
👉 반환하는 값이 없다.
👉 여러개의 노드와 문자를 추가할 수 있다.
appendChild()
👉 오직 Node 객체만 허용된다.
👉 추가한 Node 객체를 반환한다.
👉 오직 하나의 Node만 추가할 수 있다.
즉, append가 appendChild보다 넓은 범위를 커버한다.
💡 appendChild 더 살펴보기.
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사하는 것일지 고민해 보자.
결론부터 말하자면 복사가 아닌 이동이다. 코드를 통해서 살펴볼까요? 먼저 이렇게 HTML 파일을 생성해보자.
DOM을 활용해 좀비를 이동시켜보자
// 출력 : 아침입니다. 좀비
밤입니다.
이렇게 좀비가 밤 으로 이동한 것을 볼 수 있습니다!
결론은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다.
그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다.
getElementsByTagName
: TagName을 통해서 Element들을 가져온다.
<li> : 는 element 이고 document 는 문서 전체를 의미한다. li에 담겨져 있는 context의 색상을 변경하려 한다.
<script> : for 문에서 getElementByTagName, var lis 는 document : 문서 전체에서
TagName이 (' li ')인 element들을 가져와서 그 결과를 return해주는 메소드이다.
lis 메소드가 reutrn 해주는 값은 <li>에 해당되는 각각의 태그들의 객체를 담은 유사배열을 return해서 lis 변수에 담게 된다.
유사배열 : 배열은 아니지만 배열과 유사하게 작동한다는 뜻.※ 조회의 대상 좁히기
만약 <ul> 태그 안에 있는 <li>만 변경하고 싶다면 ?
<ul> 태그안에 <li>가 있고
<ol> 태그 안에 <li>가 있다.
document 객체를 사용하면 문서 전체에 있는 li에 적용하게 된다.
('ul') 이라고 하게 되면 <ul>이라는 태그 모두 갖게 된다.
[0]; 은 document.getElementsByTagName('ul') 가 실행하게 되면 element들의 list 를 담고있는 유사배열이다.
그 배열에 [0] , 0번째에 해당되는 값을 가져와서 <ul> 태그라는 객체가 var = ul 이라는 변수에 담게 된다.
ul. get.. 은 ul 태그의 하위에 존재하는 <li> .. <li> 태그들 만을 조회할 수가 있게 된다.
