JavaScript/DOM
-
속성(Attribute)와 프러퍼티(Property)JavaScript/DOM 2022. 11. 21. 18:57
- 속성 — HTML 안에 쓰임 - 프로퍼티 — DOM 객체 안에 쓰임 - 브라우저(browser)는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성한다 (즉, 브라우저(browser)가 HTML문서를 해석할 때 DOM객체가 만들어진다) - HTML태그들이 가지고 있는 속성들은 요소노드의 프로퍼티(property)가 된다 - 하지만 모든 속성들의 요소들의 프로퍼티(property)가 되지는 않는다 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 // HTML 속성 (HTML attribute) const tomorrow = document.querySelector('#tomorrow'); con..
-
DOM(Document Object Model)이란?!JavaScript/DOM 2022. 11. 19. 17:56
DOM(Document Object Model)이란?! - XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 - DOM을 활용하면 JS로 HTML태그를 자유롭게 활용할 수 있다 - JS를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 (웹 문서를 제어할 수 있도록 해 주는 것) DOM 종류 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 HTML DOM 구조 HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보인다 노드 트리는 ..
-
유사배열(Array-Like Object)JavaScript/DOM 2022. 11. 6. 14:40
// color-btn이라는 클래스를 다 선택했을 때 const myTags = document.getElementsByClassName("color-btn"); console.log(myTags); console.log(myTags[0]); console.log(myTags.length); // 하나의 클래스를 선택했을 때 const myTags2 = document.getElementsByClassName('red'); console.log(myTags2); console.log(myTags2[0]); console.log(myTags2.length); // 없는 classname을 선택했을때 const myTags3 = document.getElementsByClassName('white'); co..
-
JavaScript로 HTML 태그를 선택하는 방법JavaScript/DOM 2022. 8. 27. 13:47
1. HTML 태그 이름을 이용한 선택(document.getElementsByTagName) 2. HTML id를 이용한 선택(document.getElementById) 3. HTML class를 이용한 선택(document.getElementsByClassName) 4. HTML name 속성을 이용한 선택(document.getElementsByName) 5. CSS 선택자를 이용한 선택 (querySelectorAll() 메소드는 CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소) 6. HTML 객체 집합(object collection)을 이용한 선택 (HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택) 태그이름..