본문 바로가기

Front-End/DOM

Front-End/DOM 2021. 12. 27. 문서 객체 모델(Document Object Model) : DOM - (3) 탐색 연재되는 내용입니다. 3.3 DOM Traversing (탐색) parentNode 부모 노드를 탐색한다. Return: HTMLElement를 상속받은 객체 모든 브라우저에서 동작 const elem = document.querySelector('#two'); elem.parentNode.className = 'blue'; firstChild ( firstElementChild ), lastChild ( lastElementChild ) 자식 노드를 탐색한다. Return: HTMLElement를 상속받은 객체 IE9 이상의 브라우저에서 동작 const elem = document.querySelector('ul'); // first Child elem.firstChild.className = 'blu..
Front-End/DOM 2021. 12. 26. 문서 객체 모델(Document Object Model) : DOM - (2) 접근, 선택 3. DOM Query / Traversing (요소에의 접근) 먼저, DOM 을 알아보기전에 아래와 같이 html 파일을 생성하고 element 들을 생성해준다. 그후 브라우저를 실행시키고, 콘솔창을 열자. Cities Seoul London Newyork Tokyo 이번 목차에서 다뤄보는 Method 😎 하나의 Element Node 선택 document.getElementById() document.querySelector() 여러개의 Element Node 선택 document.getElementsByClassName() document.getElementsByTagName() document.querySelectorAll() 3.1 하나의 요소 노드 선택(DOM Query) 1. document..
Front-End/DOM 2021. 12. 23. 문서 객체 모델(Document Object Model) : DOM - (1) 개념 1. DOM (Document Object Model) 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes, property, method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내..

티스토리툴바