Ted's Codding study

HTML 코드 첫 번째 div태그 내부 두 번째 div태그 내부 제거 대상 문서 객체 1. 문서 객체 생성createElement()메소드 사용문서 객체 생성 방법 document.createElement(문서객체명);문서 객체 생성 후에 '배치' 배치는 트리구조로 전달 어떤 문서 객체가 있을 때 위에 있는 것을 '부모' , 아래에 있는 것을 '자식'이라고 부른다.appendChild()메소드 선택된 부모 요소의 자식 요소 리스트의 마지막에 새로운 요소를 추가 부모객체.appendChild(자식객체)document.addEventListener('DOMContentLoaded', () => { // 문서 객체 생성 const div = document.createEle..

HTML 코드 글자 조작하기 속성 조작하기 스타일 조작하기 1. 문서 객체 가져오기head, body, title요소document.headdocument.bodydocument.titlebody요소 내부에서 만든 다른 요소들querySelector(선택자)querySelectorAll(선택자) 2. 글자 조작하기문서객체.textContent입력된 문자열을 그대로 넣습니다.문서객체.innerHTML입력된 문자열을 HTML 형식으로 넣습니다.document.addEventListene..

1. DOM의 정의1) 문서 객체HTML 안에서는 요소(Element)로 불리는 객체를 JS에서는 문서 객체라고 불림2) 문서 객체 모델(Document Object Model: DOM)웹 페이지를 프로그래밍 방식으로 조작하고 관리할 수 있는 인터페이스(상호작용, 규약)2. DOM의 사용JS를 사용하여 DOM에 접근하는 경우 웹 페이즈이 요소를 선택, 추가, 수정, 삭제하는 데 사용할 수 있는 메소드와 속성에 접근이 가능CRUD - Create(생성), Read(읽기), Update(수정), Delete(삭제)3. DOMContentLoaded 이벤트문서 객체를 조작할 때 사용하는 이벤트HTML의 모든 문서 구조(내용)가 모두 로드된 이후에 해당 이벤트가 발생웹 브라우저가 문서 객체를 모두 읽고 나서 실..

렌더링의 원리 초간단 요약!1. HTML 파싱과 DOM 트리 구축HTML 파싱: 브라우저는 HTML 파일을 받고 태그들을 해석하여 파싱 DOM 트리 구축: 파싱된 HTML 요소들은 DOM(Document Object Model) 트리로 변환 이 트리는 문서의 구조적 표현이며, JavaScript를 통해 동적으로 조작 가능2. CSS 파싱과 CSSOM 트리 구축CSS 파싱: 브라우저는 모든 CSS를 읽고 CSS 규칙(선택자와 속성)을 파싱 CSSOM 트리 구축: 파싱된 CSS는 CSS 객체 모델(CSSOM) 트리로 변환 CSSOM은 각 DOM 요소에 적용될 스타일을 결정하고, DOM과 병합되어 렌더 트리를 형성하는 데 기여3. 렌더 트리 구축렌더 트리 생성: DOM 트리와 CSSOM 트리가 결합하여 렌더 ..