자바 스 크 립 트 DOM 작업 기초

DOM 개념
DOM:document object model:문서 개체 모델
js 를 통 해 HTML 코드 를 조작 하고 요 소 를 추가 하 며 요 소 를 삭제 합 니 다...
요소 가 져 오기
(1)getElement ById 는 id 를 통 해 원 소 를 가 져 옵 니 다.
(2)getElementsByTagName 탭 이름 으로 가 져 오 는 요소 집합(배열)
(3)getElementsByClassName 은 class 를 통 해 가 져 옵 니 다.요소 집합(배열)을 가 져 옵 니 다.
(4)getElementsByName 은 name 속성 을 통 해 가 져 옵 니 다.요소 집합(배열)을 가 져 옵 니 다.
요약:요 소 를 가 져 오 면 태그 이름,id,class,name 속성 에 따라 가 져 올 수 있 습 니 다.Id 가 얻 은 결 과 는 하나의 요소 이 고 다른 것 은 집합 입 니 다.
document 대상 은 4 가지 이상 지원 되 며,element 대상 은 지원 합 니 다.
getElementsByTagName 과 getElementsByClassName
요소 수정
(1)내용 수정
innerText 속성 을 통 해 탭 내부 의 텍스트 를 읽 거나 설정 합 니 다.
innerHTML 속성 으로 탭 내부 의 텍스트 를 읽 거나 설정 할 수 있 습 니 다.
두 가지 차이 점:innerHTML 은 HTML 의 규칙 에 따라 텍스트 를 해석 하고 innerText 는 일반적인 텍스트 내용 으로 만 여 긴 다.

(2)스타일 수정
a：xxx.style.yyy
b:xxx.classname="....."(class 속성 을 수정 한 셈)

삭제 요소 추가
(1)createElement 요소 노드 만 들 기
createElement("p")에서 단락 만 들 기
(2)createTextNode 텍스트 노드 만 들 기
createtextNode("텍스트 내용")는"텍스트 내용"의 텍스트 노드 를 만 듭 니 다.
(3)appendChild 하위 노드 추가
(4)removeChild 하위 노드 삭제


항 법
문서:루트 노드
parentNode:부모 노드 가 져 오기
childNodes:모든 하위 노드 가 져 오기
firstChild:첫 번 째 키 노드
lastChild:마지막 키 노드


자 바스 크 립 트 DOM 의 조작 기초 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 DOM 에 관 한 더 많은 기초 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!