브라우저 공부

들어가며

여기에 있는 내용을 통해 브라우저에 대해 공부해본다.

정리

1. 전역 객체는 window이고 크게 세 갈래(DOM--document, BOM--navigator, JavaScript--Object)로 나뉜다.
2. DOM의 모든 요소는 객체이다. 태그도 객체, 텍스트도 객체, 주석도 객체이다.
3. 개발자 도구에서는 띄어쓰기만 있는 빈 텍스트노드는 나타나지 않는다.
4. 돔요소를 선택하면 그 요소는 $0으로 접근 가능하다.
5. 가장 마지막에 접근한 요소는 $0, 그전은 $1 ... document가 최상단 노드이고, document.documentElement가 그 하위 노드이다. 이는 html태그와 동일하다.
6. 그 아래는 document.body로 body태그랑 일치한다. (head = document.head) node.childNodes는 자식 노드의 컬렉션이다. (배열이 아니라, 반복 가능한 유사 배열 객체이다, 자료형이 같을 필요 없고, 삽입 삭제가 자유로운 List, Map, Set등과 같다. ) 여기서는 F12에서 가려지는 공백텍스트노드도 있으면 출력이 된다.
7. for (let 변수 of arrayLike)== for x in list 파이썬 배열이 아니라 배열 메서드를 쓸 수는 없지만, Symbol.iterator가 구현되어 있어서 for ... of가 가능한 것 모든 노드는 읽기 전용으로, 직접 값을 할당하여 데이터를 갱신할 수 없다.
8. for in은 불필요한 프로퍼티(length, item 등)까지 순회를 하기 때문에 사용하지 않는 것이 좋다.
9. firstElementChild와 와 firstChild는 다르다. Children과 ChildNodes는 다르다.
10. ⭐⭐Children이나 Element가 붙은 것은 요소(element)만을 가리킨다. ⭐⭐즉 노드 = element + text + comment 라고 생각하자 document는 element가 아니다.
11. table 요소는 children을 찾아가지 않아도 바로 접근할 수 있는 프로퍼티가 있다.
12. document를 상속하는 이유는... document가 제공하는 API 때문이다.
13. document.getElementById를 하면 요소에 바로 접근할 수 있다.
14. 위 방법 말고도, 바로 아이디를 써서 접근할 수도 있다. 그렇기에 아이디가 단 하나여야 하는 것이다.
15. 아이디가 곧 노드이다! 그런데 아이디에 하이픈이 있으면, window['element-content']같은 방법으로 접근한다.
16. document.querySelectorAll은 css선택자를 입력으로 받는다. 단순히 아이디, 클래스 뿐만 아니라 복합 요소. 즉 'ul > li:last-child' 등이 통째로 들어갈 수 있다. :hover까지 된다.
17. document.querySelector는 처음으로 만나는 선택자를 반환한다.
18. elem.matches는 css선택자와 일치여부를 판단한다. elem.matches('a[href$="zip"]) 의 경우 선택자 자체가 a[...]인데, zip으로 끝나는 href를 갖는 a태그를 의미한다.
19. element.closest는 가장 가까운 조상 중 선택자를 갖는 태그를 반환한다.
20. document.getElementsByTagNmae, document.getElementBysClassName, document.getElementsByName이 있으나 가져오는 조건이 다 다르고. 옛날 방식이다. querySelector를 쓰자. 이들은 항상 컬렉션을 반환한다! getElment'S'!! S를 빼먹지 말자.
21. 지금까지는 DOM 자체(문서의 구성)에 대해서 알아보았다. DOM은 여러 DOM노드들의 조합이라고 할 수 있다. DOM노드는 아래와 같은 구조를 갖는다.
22. EventTarget은 추상클래스이고 이벤트 관련 API를 사용가능하다.
23. Node는 이를 상속하는 인터페이스이다. parentNode, nextSibling 등 노드관계관련 API를 사용 가능하다.
24. 그 아래 노드=텍스트+엘리멘트+코멘트(주석)
25. 엘리먼트 클래스는 nextElementSibling, children, getElementsByTagname, querySelector 등을 사용가능하도록 한다. (element 관계 구하는 노드 + document API + element API) Element 클래스는 HTML Element 클래스, SVG Element 클래스, XML Element 클래스의 베이스 클래스이다.
26. HTML Element 클래스는 HTML 요소 노드의 베이스 역할을 하는 클래스이다. 이 클래스를 상속받는 하위 클래스는 실제 HTML 엘리먼트(태그)에 대응된다.
27. 예를 들어, input 요소에 대응하는 DOM 객체는 아래 클래스로부터 상속받은 프로퍼티와 메서드가 있다.
28. 객체는 constructor 프로퍼티를 갖는다. 객체.constructor.name을 출력해보면 어떤 클래스에 속했는지 알 수 있다.
29. instanceof를 쓰면 상속여부도 확인이 가능하다.
30. alert( document.body instanceof HTMLBodyElement ); // true alert( document.body instanceof HTMLElement ); // true alert( document.body instanceof Element ); // true alert( document.body instanceof Node ); // true alert( document.body instanceof EventTarget ); // true​
31. console.log(elem)은 요소의 DOM트리를 출력하는데, console.dir(elem)은 요소를 DOM객체처럼 취급하여 출력한다.
32. node.nodeName이나 node.tagName으로 태그 이름을 알아낼 수 있다.
33. innerHTML로 내용을 바꿀 수 있다. 단, innerHTML +=는 내용을 덮어쓴다.
34. outerHTML은 요소 전체 HTML이 담겨 있다.
35. innerHTML 프로퍼티는 요소 노드에만 사용할 수 있다. 텍스트 노드 같은 경우 nodeValue와 data를 이용해야 한다.
36. textContent를 이용하면 순수한 텍스트만 뽑아낼 수 있다.
37. hidden property를 이용해 투명하게 할 수 있다.