HWI's Devlog
article thumbnail
[JS] DOM 조작하기
Dev/Javascript 2023. 4. 11. 09:27

자바스크립트로 html DOM을 조작하는데 필요한 기본적인 명령들. 새로운 요소 추가하기 (Create) createElement() 새로운 요소를 생성한다. const addDiv = document.createElement("div"); node.before(), node.after() 호출한 노드 앞, 뒤에 새로운 노드를 추가한다. a.after(addDiv); a.before(addDiv); textContent = 요소에 text 내용을 추가한다. addDiv.textContent = "내용을 추가합니다."; classList.add() 요소에 클래스를 추가하다. addDiv.classList.add("newClass"); Node.append() 생성한 요소를 원하는 요소에 추가한다. Node..

article thumbnail
[HTML] HTML DOM이란? + HTML 렌더링 과정
Dev/HTML&CSS 2023. 4. 4. 00:01

DOM이란? DOM(문서 객체 모델)은 The Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 HTML, XML 의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕는다. HTML 문서가 브라우저에 로드되면 브라우저는 문서 내용을 파싱하여 브라우저가 이해할 수 있는 객체 모델로 변환한다. 이렇게 변환된 객체 모델을 DOM이라고 하는 것이다. DOM은 HTML 문서의 각 요소를 객체로 나타내며, 이 객체들은 상호 연관된 계층 구조를 갖는다. 이런 DOM 객체들은 JS와 같은 클라이언트 사이드 스크립트 언어를 통해 동적으로 조작할 수 있다. 예를들어 DOM을 이용하여 HTML 문..