DOM3 [javascript] DOM의 활용 1. 요소 노드 선택하기 태그로 선택: document.getElementsByTagName("li"); id로 선택: document.getElementById(“id"); class로 선택: document.getElementsByClassName("class"); name으로 선택: document.getElementsByName("name"); * css 선택자로 선택: document.querySelector('css') > 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll('css') > 선택자에 해당하는 태그 모음 (NodeList) 2. 요소 노드 생성하기 document.createElement('div'); > 생성하고자 하는 태그 이름으로.. 2022. 9. 22. [javascript] Dom이란? - 2 (Dom 트리) DOM 트리 DOM의 기본 개념을 기반으로 문서의 계층 구조를 그림으로 나타낸 것을 DOM 트리라 한다. DOM(Document Object Model) 문서 객체 모델 위의 코드 계층 구조를 그림으로 나타내면 아래와 같다. 이때 그림에 나타낸 박스 하나하나를 노드라 부르고 위아래 계층 구조에 부모 자식 관계, 좌우 계층 구조에 형제 관계가 맺어진다. + Node type) 각 노드의 성격에 따라 노드를 분류한 것을 노드 타입이라고 하는데 총 12가지가 있다. 주로 사용하는 것은 4가지이다. 요소 노드 : html 태그에서 만들어지며 dom 트리를 구성하는 블록이 되는 노드 텍스트 노드 : 오로지 텍스트로만 이루어진 노드 문서 노드 : dom의 진입점이 되는 document 노드 주석 노드 : 화면에 보.. 2022. 9. 5. [javascript] DOM이란? - 1 (문서 객체 모델) DOM document object model의 약자로 HTML이나 XML 문서에 접근하기 위한 일종의 인터페이스이다. 문서의 요소를 정의하고 요소에 접근하는 방법을 제공한다. DOM은 nodes와 objects로 문서를 표현하며, 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. DOM_mdn web docs DOM의 활용 //id로 태그 선택하기 document.getElementById('id이름'); //class로 태그 선택하기 document.getElementsByClassName('class이름'); //태그 이름으로 태그 선택.. 2022. 9. 5. 이전 1 다음
