js에서 일반적으로 사용되는 DOM 작업은 무엇입니까?

DOM 작업에서 실용적이고 일반적으로 사용되는 부분은 선택되었으며, 실용적이지만 분명히 호환되는 부분은 생략되었습니다.
2. DOM 속성 및 메서드의 유형 속성이 완전히 정확하지 않을 수 있습니다.
3. 로고(주로 ie8-9 주변)

노드 유형

( DocumentType)문서 조각 노드(DocumentFragment)DTD 선언 노드(표기법)노드 유형속성

노드 유형	노드 값
레이블 노드(요소)	1
속성 노드(Attr )	1 엔터티 노드(Entity)
10
11
12
Description
nodeType	노드 유형
nodeName	노드 이름
nodeValue	노드 값
childNodes	하위 노드
parentNode	부모 노드

ownerDocument

문서 노드nextSiblingfirstC hildlastChild문서 유형Attribute

previousSibling	이전 노드
다음 노드
첫 번째 하위 노드
마지막 하위 노드
Description
documentElement	html 태그
head [호환성이 부족함]	head tag
body	body tag
URL	현재 페이지 url
referrer	원본 페이지 url

domain[수정 가능]

페이지 도메인 이름쿠키titleactiveElementdocumentModereadyState doctypescriptsformschildrendefaultViewInstructionsgetElementById()getElementsByName()getElementsByTagName()getElementsByClassName()querySelector()querySelectorAll()

images	모든 사진 모음
쿠키 정보
페이지 제목
현재 초점 요소
Document 모드
문서 상태
문서 유형 선언
스크립트 컬렉션
form 태그 컬렉션
요소 유형의 하위 노드 집합
문서 관련 창 개체
	Method
해당 ID를 가진 요소를 반환합니다.
해당 이름을 가진 요소 집합을 반환합니다.
해당 태그 이름을 가진 요소 집합을 반환
지정된 클래스 이름을 가진 요소 집합을 반환
선택기와 일치하는 첫 번째 요소를 반환

선택기와 일치하는 요소 집합을 반환합니다createTextNode()Attributecreate()createComment()createDocumentFragment()matchesSelector() [불충분한 호환성, 접두사 필요] write() [출력 후 커서가 줄 바꿈되지 않음] writeIn()[커서가 출력 후 줄 바꿈]implementation.hasFeature(기능, 버전)요소 유형Property

createElement()	요소 노드 만들기
텍스트 노드 만들기
속성 생성 node
댓글 만들기 node
빈 DocumentFragment 개체 만들기
선택기가 일치하는지 여부 요소
문서 텍스트 쓰기
문서 텍스트 쓰기
기능 모니터링
설명
id	id
className	수업명
title	title
style	요소의 스타일 속성 설정 또는 반환
innerHTML	요소의 콘텐츠 설정 또는 반환

outerHTML[contains self]

요소의 콘텐츠 설정 또는 반환contentEditableisContentEditablechildElementCountfirstElementChildlastElementChi ldpreviousElementSiblingnextElementSibling

textContent [ie-innerText]	텍스트 콘텐츠 설정 또는 반환
요소의 콘텐츠 편집 상태 설정 또는 반환
편집 가능 여부
하위 요소 수 node
첫 번째 하위 요소 노드
마지막 하위 요소 노드
이전 요소 노드
다음 요소 노드

Method	Instructions	Return
focus()	초점 설정
blur()	초점 상실
appendChild(노드)	at 하위 노드 목록 뒤에	새 노드를 삽입
insertBefore(노드, 참조 노드)	참조 노드 앞에 노드를 삽입	insert node
removeChild(노드)	노드 삭제	삭제된 노드
replaceChild(노드,교체된 노드)	노드 교체	교체된 노드
cloneNode(부울 값)	복사 노드	clone 노드
importNode(노드, 부울 값)	받기 문서 A의 노드를 문서 B로 가져옵니다(cloneNode 메서드와 유사)
contains (node)	노드가 호출 노드의 하위인지 여부	Boolean value
hasFocus ()	포커스가 있는지 여부	Boolean
hasChildNodes()	하위 노드가 있는지 여부	Boolean
isDefaultNamespace(url)	네임스페이스가 지정되었는지 여부	Boolean
isEqualNode(노드 )	두 요소가 동일한지 여부	부울 값
지원됨(기능, 버전)	기능 지원 여부	부울 값

Attr 유형

length 로 지정되었습니다. attributes

속성	설명
name	속성 이름
value	속성 값
isId	ID 유형인지 여부
지정 여부 속성이
속성 길이
속성 컬렉션

MethodgetAttribute()getAttributeNode()setAttribute()setAttributeNode()removeAttribute()removeAttribute Node()[즉, 지원되지 않음]hasAttribute()hasAttributes()텍스트 유형

Description
속성 값 가져오기
속성 가져오기 노드
속성 값 설정
속성 노드 설정
속성 제거
속성 노드 삭제
지정된 속성이 존재하는지 여부
속성이 존재하는지 여부

메서드 appendData(텍스트)deleteData(위치, 수량)insertData(위치, 텍스트)replaceData(위치, 수량, 텍스트)splitText(위치)substringData(위치, 수량)normalize() 테이블 연산

설명
노드 끝에 텍스트 추가
지정된 위치부터 n개 문자 삭제
Insert 지정된 위치에서 Text
오프셋 위치에서 오프셋+카운트까지의 텍스트를 text
에서 현재 텍스트 노드를 두 개로 분할합니다. 지정된 위치 텍스트 노드
오프셋 위치에서 시작하는 문자열을 오프셋+카운트까지 가로채기
인접한 텍스트 노드를 병합하고 빈 텍스트 노드 삭제

테이블 요소

속성 메서드captiontBodies tFoot tHeadrowscreateTHead()를 생성하여 테이블에 넣고 참조 반환 createTFoot() 요소를 생성하고 테이블에 넣고 참조를 반환합니다createCaption()deleteTHead() deleteTFoot()deleteCaption()deleteRow(pos)insertRow ( pos)tbody 요소

Description
caption 요소 포인터
tbody 컬렉션
tfoot 세트
thead 요소
테이블의 모든 행 집합
캡션 요소를 생성하고 테이블에 넣고 참조를 반환합니다
ad 요소 삭제
tfoot 요소 삭제
캡션 요소 삭제
행 삭제 지정된 위치에
행 컬렉션의 지정된 위치에 행 삽입

속성 메서드rows deleteRow(pos)insertRow(pos)tr 요소

Description
tbody 모든 행 컬렉션
지정된 위치의 행을 삭제
행 컬렉션의 지정된 위치에 행을 삽입하고, 참조를 반환

속성 방식cellsdeleteCell(pos)insertCell(pos)

스타일 작업

액세스 요소 스타일

• DOM 스타일 - js는 dom.style을 통해서만 직접 스타일 속성에 액세스할 수 있으며 내장 스타일 시트 및 외부 스타일 시트에는 액세스할 수 없습니다.

Description
tr모든 셀 수집
지정된 위치의 셀 삭제
지정된 위치에 셀 삽입 셀 컬렉션의 위치, Return Quote

속성 메서드(dom.style )	Description
cssText	스타일 속성에 있는 모든 스타일의 문자열 형식을 반환합니다.
length	요소의 CSS 속성 수를 반환합니다
parentRule	CSS 정보를 반환합니다. CSSRule 객체
getPropertyCSSValue(name)	속성 값의 CSSValue 객체를 반환합니다(cssText 및 cssValueType 포함)
getPropertyPriority(name)	!important 속성 사용 여부
getPropertyValue(이름 )	return 주어진 속성의 문자열 값
removeProperty(name)	스타일에서 주어진 속성을 제거합니다.
setProperty(name,value,priority)	주어진 속성을 해당 값으로 설정합니다. 플러스 우선순위 레벨

• 계산된 스타일 - 스타일이 계단식으로 연결된 후 실제로 사용되는 스타일

속성 메서드	Description
document.defaultView.getCompulatedStyle( 돔, 의사- 요소 문자열) [지원되지 않음]	현재 요소의 계산된 스타일을 모두 반환
dom.currentStyle [지원됨]	현재 요소의 계산된 스타일을 모두 반환

작업 스타일 시트

• document.styleSheets - 문서에 적용되는 모든 스타일 시트

property(document.styleSheet[n])	description
cssRules [즉, 지원되지 않음]	모든 스타일 스타일시트 규칙
rules[지원됨]	위와 동일
insertRule(rule,index)[지원되지 않음]	cssRules 컬렉션의 지정된 위치에 규칙 문자열을 삽입합니다
addRule (rule,index) [ie 지원]	위와 동일
deleteRule(index)[ie 지원 안 함]	cssRules 컬렉션의 지정된 위치에서 규칙을 삭제합니다
removeRule(index)[ie 지원]	위와 동일

• document.styleSheets[n].cssRules/rules under

selectorText 스타일 선택기style특정 스타일 객체

속성	설명
cssText [즉, 지원되지 않음]	전체 스타일 규칙의 문자열

크기 및 오프셋

Properties 설명offsetParent 상위 컨테이너 오프셋getBoundingClientRect()페이지 요소의 실제 위치와 너비 및 높이를 가져옵니다(속성 개체 반환)offsetWidth요소 너비(표시되는 콘텐츠 영역 + 스크롤 막대 + 패딩 + border) offsetHeight 요소 높이(시각적 콘텐츠 영역 + 스크롤 막대 + 패딩 + 테두리)offsetLeft인접한 부모로부터 왼쪽 거리offsetTop인접한 부모로부터의 상단 거리 parentclientWidth요소 너비(표시되는 콘텐츠 영역 + 패딩)clientHeight요소 높이(표시되는 콘텐츠 영역 + 패딩)clientLeft패딩 가장자리 및 테두리 가장자리 거리(왼쪽 테두리) Padding Edge와 Portle Edge (상단 테두리) 사이의 클라이언트 분류 aScrollWidthAlement 너비 (가시 컨텐츠 영역 + 스크롤 컨텐츠 영역 + 패딩) ScrollHeightElement 높이 (보이는 콘텐츠 영역 + 스크롤 콘텐츠 영역 + 패딩)scrollLeft숨겨진 스크롤 너비(스크롤할 너비)scrollTop숨겨진 스크롤 높이(스크롤할) 스크롤 너비) clientWidth/clientHeight 및 scrollWidth/scrollHeight 브라우저에 차이가 있습니다학습 과정에서 문제가 발생하거나 학습 리소스를 얻고 싶다면 학습 교환 그룹에 가입해 주세요

	호환성

위 내용은 js에서 일반적으로 사용되는 DOM 작업은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!