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의 모든 문서 구조(내용)가 모두 로드된 이후에 해당 이벤트가 발생웹 브라우저가 문서 객체를 모두 읽고 나서 실..