HTML 및 CSS로 웹 페이지를 만든 경우 이제 조치를 구현할 시간입니다. 그 출발점입니다 DOM (문서 개체 모델). 이 기사에서는 JavaScript를 사용하여 DOM을 자유롭게 조작 할 수 있습니다. 기본에서 실용적인 예에 이르기까지 우리는 요약 할 것입니다.
DOM은 무엇입니까?
웹 페이지 JavaScript로 제어하기 위해 만들어진 트리 구조 브라우저는 HTML 문서를 읽습니다. 객체 (노드) 형태로 구성된 JavaScript는 이러한 객체를 조작합니다. 텍스트 변경, 스타일 수정, 이벤트 처리 뒷면 수행 📚 dom = 문서 개체 모델 = JavaScript별로 HTML을 처리하기위한 인터페이스
DOM 요소 선택
1. ID로 선택하십시오
“`javaScript document.getElementById (“title”);“`
2. 클래스 또는 태그를 선택하십시오
“JavaScript Document.QuerySelector (“. 메뉴 “); // 첫 번째 문서 .QuerySelectorAll (“li “); // All Li”🧩 QuerySelector ()는 그대로 사용할 수 있습니다
DOM 컨텐츠 변경
“JavaScript title = document.getElementById (“title “); title.innerText =“변경된 제목”; 속성 | | —— | | | | inerrext | 텍스트 만 변경 | innerhtml | HTML 태그 포함 | TextContent | 모든 텍스트 (빈 포함) 반환
DOM 속성 및 스타일 조작
“JavaScript const img = docum
이벤트 청취자 등록
“JavaScript const button = document.querySelector (“button “); button.adeventListener (“click “, () => {alert (“버튼 클릭! “);”| 이벤트 유형 | | —— | —— | | | 딸깍 하는 소리 | 클릭하면 실행 | 마우스 오버 | 마우스가 업로드 된 경우 | 키 다운 | 키보드 프레스 📌 removeEventListener ()로 이벤트를 출시 할 수도 있습니다.
요소 생성 및 삭제
“JavaScript Const Newel = Document.CreateElement (“P “); Newel.innerText =”New Paragraph “; Document.body.appendChild (Newel); Const Oldel = Const Oldel = Document.QuerySelector (“P “) ;; 제거하다, 교체용 후면 사용
연습의 예 : addo 항목
“HTML 추가”✅ DOM 작동을 통해 HTML 요소를 통한 실시간 사용자 입력
마치다
DOM Operation은 JavaScript의 핵심 중 하나입니다. 오늘 배운 내용에 따라 버튼 클릭, 이미지 변경 및 입력 처리와 같은 사용자와 상호 작용하는 웹 페이지를 만들 수 있습니다. Dom을 자유롭게 다루기 위해서는 그것이 프론트 엔드의 시작입니다! 🔎 다음 게시물 주제 추천 → No. 31 : JavaScript 이벤트 처리 완벽한 가이드 → 37 : JavaScript로 만든 간단한 계산기
참조
https://developer.mozilla.org/ko/docs/web/api/documentobjectmodel https://javaScript.info/dom-nodes