DOM
[JS] DeepDive(39) DOM (3) - 어트리뷰트
어트리뷰트 노드와 attributes 프로퍼티 HTML 문서의 구성 요소인 HTML 요소는 여러개의 어트리뷰트를 가질 수 있다. 어트리뷰트 역시 모든 HTML요소에서 공통적으로 사용할 수 있는 어트리뷰트와 특정 HTML요소에서만 한정적으로 사용할 수 있는 어트리뷰트로 나누어져 있다. attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티이며 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다. HTML 어트리뷰트 조작 attributes 프로퍼티는 읽기 전용 접근자 프로퍼티이므로 HTML 어트리뷰트 값을 취득할 수 있지만 변경할 수는 없다. Element.prototype.getAttribute/setAttribute 메서드를 사용하면 attr..
![[JS] DeepDive(39) DOM(2) - DOM 조작](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkpxOW%2FbtsuIzrVdJK%2FnksZsahbOetpwhps0XRGs0%2Fimg.png)
[JS] DeepDive(39) DOM(2) - DOM 조작
노드 탐색 요소 노드를 취득한 다음, 취득한 요소를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제 , 자식 노드등을 탐색해야할때가 있다. Apple Banana Orange ul#fruits 요소는 3개의 자식 요소를 가진다 따라서 ul#fruits 요소 노드를 취득한 다음 자식노드를 탐색하거나 자식중 하나를 탐색할 수 있다 이와같이 DOM 트리상 노드를 탐색할 수 있도록 Node,Element 인터페이스는 트리 탐색 프로퍼티를 제공해준다. parentNode,previousSibling,firstChild,childNodes 프로퍼티는 Node.prototype이 제공하고 프로퍼티 키에 Element가 포함된 previousElementSibling,nextElementSibling 과 chi..
![[JS] DeepDive(39) DOM(1) - DOM,요소취득,요소타입](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbsGu5b%2FbtsuCGyxT8a%2FK6dnvD7iDmMrCKP2EV8tk1%2Fimg.png)
[JS] DeepDive(39) DOM(1) - DOM,요소취득,요소타입
브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 구조인 DOM을 생성한다. HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM 을 구성하는 요소 노드 객체로 변환된다. 트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이루어지며 부모 노드와 자식 노드로 구성된다. 노드 객체의 타입 아래 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자. Apple Banana Orange 렌더링 엔진은 위 HTML 문서를 파싱하여 아래와 같이 DOM을 생성한다. 위 예제에서 볼 수 있듯이 DOM은 노드 객체의 계층적이 ㄴ구조로 구성된다. 문서 노드(document node) DOM 트리의 최상위에 존재하는 노드로 document 객체를 가리키며 전역객체 windo..