DOM 지식 포인트에 대한 간략한 요약

DOM 지식 포인트에 대한 간략한 요약

DOM (Document Object Model)은 HTML 및 XML 문서 용 API 인 문서 객체 모델입니다.

노드 운영

1. DOM 노드는 주로 세 가지 범주로 나뉩니다.
요소 노드 :

<p class = "box">hello word</p>

속성 노드 : class = "box",
텍스트 노드 : hello word,
2. 요소 노드를 가져 오는 방법 :
document.getElementById () : ID로 검색, 고유 요소 노드 반환
document.getElementsByTagName () : 태그 이름으로 검색, 요소 반환 노드 배열
document.querySelector ( ". box") : 선택기 조건을 통해 요소 노드를 가져오고 조건을 충족하는 첫 번째 요소 노드 만 반환합니다.
document.querySelector ( ". box") : 선택기 조건을 통해 요소 노드를 가져오고 적합한 모든 요소 노드의 배열을 반환합니다.
3. 요소 노드 생성 : document.creatElement ( "div"). div 태그 생성
4. dom 트리에 노드 마운트 : _.appendchild (div) 부모 요소에 div를 마운트하고 대상 노드의 자식 노드 끝에 자식 노드를 추가합니다.
5. 요소 노드 삭제 : removeChild 메서드 지정된 노드를 삭제하는 데 사용됩니다.
6. 속성 값 가져 오기 : target element.getAttribute (요소 속성 이름)
7. setAttribute 메소드는 속성 값을 설정하는 데 사용되며 속성없이 생성됩니다. 대상 element.setAttribute (요소 속성 이름, 속성 값)
8. insertBefore : 대상 요소 앞에 새 요소 노드를 삽입하고 이때 포인터는 대상 요소의 부모에 있습니다.
9. replaceChild 메서드는 요소 노드를 교체하는 데 사용되며 이때 포인터는 대상 요소의 부모에 있습니다.

DOM 작동 위치 및 크기

1. clienWidth : 실제 너비 : 너비 + 패딩
2. clientHeight : 실제 높이 : 높이 + 패딩
clientWidth / clientHeight는 일반적으로 화면의 높이와 너비를 가져 오는 데 사용됩니다 : document.body.clientWidth / document.documentElement.clientWidth;
3. offsetWidth : 실제 너비 : 너비 + 패딩 + 테두리
4, offsetHeight : 실제 높이 : 높이 + 패딩 + 테두리
5, offsetleft : 기준점의 왼쪽을 기준으로 절대 위치 요소
의 위치 가져 오기 6, offsettop : 위치 가져 오기 참조 점 위치
7, offsetparent : 절대 위치 요소의 참조 점 가져 오기
8, scrollwidth / scrollheight : 콘텐츠 오버플로가없는 경우 높이 너비는 너비 / 높이 + 패딩입니다. , 콘텐츠 오버플로가있을 때 높이와 너비는 거의 실제 값과 같습니다
.9, scrolltop : 세로 스크롤 막대의 높이를 가져옵니다 (사용 가능하고 설정할 수 있음)
10. Scrollleft : 가로 스크롤 막대의 너비를 가져옵니다. (사용 가능하며 설정 가능)
실제 콘텐츠의
높이 가져 오기 : document.body.scrollHeight / document.documentElement.scrollHeight 위로 스크롤하는 웹 페이지의 실제 높이 : scrollHeight-clientHeight;

DOM의 타이머

1. 일회성 타이머 :

<script>
window.setTimeout(()=>{
     
     
	 
	},1000);
</script>

콜백 함수가 1 초 후에 실행되고 타이머가 닫 혔음을 나타냅니다. clearTimeout ();
2. 루프 타이머

<script>
window.setInterval(()=>{
     
     
	 
	},1000);
</script>

콜백 함수가 1 초마다 실행되고 타이머가 닫 혔음을 나타냅니다. clearInterval ();

이벤트 객체

<script>
box.onclick=function(e){
     
     
}
</script>

이벤트가 발생하면 브라우저는 객체를 호출하고 이벤트 객체 인 객체를 전달합니다.

기본 이벤트 취소

a 태그의 경우 :
1. 인라인 사용

<a href="javascript:;"></a>

2. 이벤트 개체를 사용하여 차단

<script>
	a.onclick=function(e){
     
     
		e.preventDefault();
	}
</script>

3. 청취자 뒤로 돌아 가기

<script>
	a.onclick=function(e){
     
     
		return false;
	}
</script>