JavaScript의 DOM 사용 설명서

2103 단어 JavaScript

이 블로그를 보기 전에 여기 기사를 보세요.


DOM의 정체는...
나는 이 지식을 전제로 집필한다.

DOM 처리


DOM = 계층 구조를 설명하지만 실제로는 더 깊은 역할을 한다.
이 차원 구조의 데이터를 DOM 트리라고 부른다.
그런 다음 JS를 사용하여 DOM 트리를 조작할 수 있습니다.
HTML의 요소명, id,class 등 속성 정보를 바탕으로 DOM 트리의 일부분을 가져옵니다
CSS를 수정하거나 요소를 추가하거나 삭제할 수 있습니다.
그렇다면 실제 홈페이지를 예로 들면 구체적이다.

DOM을 실제로 처리해 주세요.


다음은 웹 페이지입니다.

검증 화면의 요소에 DOM 트리라고 쓰여 있습니다.
나는 여기서 요소를 꺼내 보고 싶다.
빼내는 방법은 세 가지가 있다.
①document.getElementById("id 이름");
②document.getElementsByClassName("class 이름");
③document.querySelector(선택기 이름);
① id가 있는 데이터 가져오기
②클래스가 있는 데이터를 얻을 수 있다.
③ 지정된 선택기에 맞는 항목에서 가장 먼저 발견된 요소를 가져올 수 있습니다.
우리 헤어져 봅시다.

②의 방법으로 얻은 결과
div의 유명을 잘 얻을 수 있다.

①의 방법으로 얻은 결과.
지정한 id 이름으로 얻을 수 있습니다.
(겸사겸사 말씀드리지만 마지막에 넣는 것을 잊었습니다. 그러나 이미 얻었습니다.
하지만 기본적으로 먼저 착용하는 것이 좋다.)

③의 방법으로 얻은 결과.
지정한 선택기 (p) 중 첫 번째로 획득한 것을 알 수 있습니다.
겸사겸사 ③ 방법으로 더 복잡한 것을 얻을 수 있다.

이렇게 여러 조건을 지정하여 얻을 수도 있다.
다음에 행사에 대한 내용을 쓰겠습니다.

좋은 웹페이지 즐겨찾기