728x90 DOM3 [HTML] DOM 으로 HTML 조작하기(2) - querySelector, querySelectorAll 🌈 DOM으로 HTML 조작하기 - querySelector, querySelectorAll DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector를 이용할 수 있다. querySelector('셀렉터') 를 이용할 수 있는데, 셀렉터로는 HTML tag, id, class를 가장 많이 이용한다. 1. ID로 엘리먼트 정보 조회하기 document.querySelector('#test') 2. Class로 엘리먼트 정보 조회하기 document.querySelector('.test') 3. div로 엘리먼트 정보 조회하기 document.querySelector('div') 💡 실행결과 2022. 5. 2. [HTML] DOM 으로 HTML 조작하기(1) - createElement, append, appendChild 🌈 DOM으로 HTML 조작하기 - createElement, append, appendChild DOM 으로 HTML 을 조작하는 방법중 가장 기초적인 것은 element를 만드는 것이다. document.createElement('div') 작업의 결과를 담기 위해선 변수를 선언하고 작업의 결과를 변수에 할당할 수도 있다. const test = document.createElement('div') 변수를 선언하고 append 해주지 않으면 적용이 안되는데, 만들어진 변수를 사용하고 싶다면 아래와 같이 append 하면 된다. document.body.append(test) 해당 변수에 textContent 라는 메소드를 활용하면 문자열도 입력할 수 있다. test.textContent = "Hell.. 2022. 5. 2. [HTML] DOM, Document Object Model 🌈 DOM, Document Object Model DOM 이란 HTML 문서의 구조와 관계를 Object 로 표현한 모델이다. 즉 자바스크립트를 이용하여 엘리먼트의 속성값을 얻어내거나 변경하는 등, HTML을 자유자재로 조작할 수 있는 것이다. DOM이 자바스크립트는 아니고, 그저 접근을 JavaScript로 한다고 생각하면 된다. - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다. - 자바스크립트는 HT.. 2022. 4. 29. 이전 1 다음 728x90
