JavaScript 지식 요약: DOM

1. DOM 소개

1.1 DOM이란 무엇입니까?

완전한 JavaScript 구현은 다음과 같은 세 가지 부분으로 구성됩니다.

• 코어(ECMAScript): 언어의 구문과 기본 개체를 설명하는 언어의 핵심 부분입니다.

• DOM(문서 개체 모델): 웹 페이지 콘텐츠 처리 방법과 인터페이스를 설명하는 웹 페이지 문서 작업 표준입니다.

• BOM(브라우저 개체 모델): 브라우저와 상호 작용하기 위한 방법과 인터페이스를 설명하는 클라이언트 및 브라우저 창 작업의 기초입니다.

문서 개체 모델( Document Object Model，简称DOM )은 확장 가능한 마크업 언어(HTML 또는 XML) 처리를 위해 W3C 조직에서 권장하는 표준编程接口입니다.
W3C는 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있는 일련의 DOM 인터페이스를 정의했습니다.

공식 언어: DOM(문서 개체 모델)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다. 이는 프로그램과 스크립트에 동적으로 액세스하고 www 문서(HTML 및 XML 문서는 설명 섹션을 통해 정의됨)의 내용, 구조 및 스타일을 업데이트할 수 있는 플랫폼 및 언어 독립적인 응용 프로그래밍 인터페이스(API)입니다. 문서를 추가로 처리할 수 있으며 처리 결과를 현재 페이지에 추가할 수 있습니다. DOM은 처리 중에 전체 문서가 메모리에 표시되어야 하는 트리 기반 API 문서입니다. 또 다른 간단한 API는 매우 큰 XML 문서를 처리하는 데 사용할 수 있는 이벤트 기반 SAX입니다. 크기가 크기 때문에 메모리에서 모두 처리하는 데 적합하지 않습니다.

1.2 DOM 트리

• 문서: 페이지는 문서입니다. 문서는 DOM에서
• 요소를 나타내는 데 사용됩니다. 페이지의 모든 태그는 요소이고 DOM에서 요소는
• 노드를 나타내는 데 사용됩니다. 웹 페이지의 모든 콘텐츠는 노드(레이블, 속성, 텍스트, 설명 등) DOM에서 노드를 사용하여

DOM 把以上内容都看做是对象

2. 요소 가져오기

2.1 페이지 요소를 가져오는 방법

실제 개발에서 DOM은 주로 사용됩니다.
페이지의 요소를 가져오는 방법 다음과 같은 방법으로 페이지의 요소를 가져올 수 있습니다.

• ID 기반 가져오기
• 태그 이름 기반 가져오기
• HTML5의 새로운 방법을 통해
• 특수 요소 가져오기
  

2.2 ID를 기준으로 얻기

ID가 있는 요소 객체를 얻으려면 getElementById() 메서드를 사용합니다.

document.getElementById('id');

얻은 요소 개체를 인쇄하고 개체의 속성과 메서드를 더 잘 보려면 console.dir()을 사용합니다.

2.3 태그 이름을 기반으로 가져오기

getElementsByTagName() 메서드를 사용하여 지정된 태그 이름을 가진 개체 컬렉션을 반환합니다.

document.getElementsByTagName('tag name');

참고:

1. 우리가 얻는 것은 객체의 컬렉션이기 때문에 내부 요소를 작동하려면 순회해야 합니다.
2. 요소 객체 획득은 동적입니다.

2.4 HTML5의 새로운 메소드를 통해 document.getElementsByClassName('class name')을 얻습니다

. // 클래스 이름에 따라 요소 객체 컬렉션을 반환합니다. document.querySelector('selector') // 다음에 따라 반환합니다. 지정된 선택기 첫 번째 요소 객체 document.querySelectorAll('selector') // 지정된 선택기에 따라 반환

注意：
querySelector 및 querySelectorAll의 선택기는 다음과 같이 표시되어야 합니다. document.querySelector('#nav');

2.5 특수 요소 가져오기(body, html)

1. body 요소 가져오기

doucumnet.body // body 요소 개체 반환

2. html 요소 가져오기

document.documentElement // html 요소 개체 반환

3. 이벤트 기본 사항

3.1 이벤트 개요

JavaScript를 활성화합니다. 동적 페이지를 생성하는 데 사용되며 이벤트는 JavaScript로 감지할 수 있는 동작입니다.
简单理解： 触发--- 响应机制。
웹 페이지의 각 요소는 JavaScript를 트리거할 수 있는 특정 이벤트를 생성할 수 있습니다. 예를 들어 사용자가 버튼을 클릭하면 이벤트를 생성한 다음 특정 작업을 수행할 수 있습니다.

3.2 이벤트의 세 가지 요소:

1. 이벤트 소스(누구)
2. 이벤트 유형(어떤 이벤트)
3. 이벤트 핸들러(무엇을 해야 할지)

케이스:

var btn = document.getElementById('btn');
btn.onclick = 함수() {
 Alert('잘 지내세요'); 
};

3.3 이벤트 실행 단계:

1. 이벤트 소스 획득,
2. 이벤트 등록(이벤트 바인딩)
3. , 이벤트 핸들러 추가(함수 할당 형식)

3.3 일반적인 마우스 이벤트

注：以下图片的事件只是常见的并不代表所有

3.4 사건의 세 가지 요소를 분석합니다

.
1. 이벤트 소스(무엇을 조작하고 싶습니까?)

2. 이벤트(원하는 상호 작용 효과를 얻기 위해 무엇을 하시겠습니까?)

3. 처리 기능(이벤트가 진행된 후 대상이 어떤 모습이기를 원하는지)

4 . 작업 요소

JavaScript DOM 작업은 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있습니다. DOM 작업 요소를 사용하여 요소 내부의 콘텐츠, 속성 등을 변경할 수 있습니다. 다음은 모두 속성입니다

. 4.1. 요소 내용

element.innerText를

시작 위치에서 끝 위치로 변경하지만 동시에 공백과 줄 바꿈도

시작 위치에서 전체 내용을

html. 태그를 포함하여

element.innerHTML

4.2 요소 내용을 변경하기 위한 일반적인 요소 속성 작업

innerText 및 innerHTML
src,href
id, alt, title

4.3 양식 요소의 속성 작업

DOM을 사용하여 다음 양식 요소의 속성을 조작할 수 있습니다:

type, value, selected, selected, 비활성화

4.4 스타일 속성 작업

크기, 색상, 위치 및 기타 스타일을 수정할 수 있습니다. JS를 통해 요소를 정리합니다.

1. element.style 인라인 스타일 작업
2. element.className 클래스 이름 스타일 작업

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

조작 요소는 DOM의 핵심 콘텐츠입니다.

4.5 배타적 사고

동일한 요소 그룹이 있고 특정 요소가 특정 스타일을 구현하기를 원하는 경우 루프 독점 알고리즘을 사용해야 합니다.

1. 모든 요소의 스타일을 지우고(다른 사람을 죽임)
2. 현재 요소의 스타일을 설정합니다( 나 자신을 내버려두고)
3. 순서를 반대로 할 수는 없습니다. 먼저 다른 사람을 죽인 다음 자신을 설정하십시오.

4.6 사용자 정의 속성 작업

1. 속성 값 가져오기

• element.property 속성 값을 가져옵니다.
• element.getAttribute('attribute');

차이점:

• element.attribute는 내장 속성 값(요소 자체와 함께 제공되는 속성)을 가져옵니다.
• element.getAttribute('attribute')는 주로 사용자 정의된 속성(표준)을 가져옵니다. 우리 프로그래머 속성

2. 속성 값을 설정합니다.

• element.property = 'value' 내장된 속성 값을 설정합니다.
• element.setAttribute('Attribute', 'Value');

차이점:

• element.Attribute는 내장된 속성 값을 설정합니다.
• element.setAttribute('Attribute')는 주로 사용자 정의 속성을 설정합니다(표준).

3. 속성 제거

• element.removeAttribute(' 속성 ');

4.7 H5 사용자 정의 속성

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

사용자 정의 속성은 getAttribute('attribute')를 통해 획득됩니다.
그러나 일부 사용자 정의 속성은 쉽게 모호성을 유발할 수 있으며, 해당 요소가 내장 속성인지 요소의 사용자 정의 속성인지 판단하기 어렵습니다.

H5는 우리에게 새로운 사용자 정의 속성을 추가했습니다:

1. H5 사용자 정의 속성 설정

H5는 사용자 정의 속성 데이터의 시작 부분을 속성 이름으로 사용하고 값을 할당해야 한다고 규정합니다.

element.setAttribute('data-index', 2)를

설정합니다

. 2. H5 사용자 정의 속성 가져오기 <br/> 호환성 Get element.getAttribute('data-index');
H5에는 IE 11에서만 지원되는 element.dataset.index 또는 element.dataset['index']가 추가되었습니다.

5. 노드 작업은

일반적으로 요소를 얻기 위해 두 가지 방법을 사용합니다.
1. DOM에서 제공하는 메소드를 사용하여

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector 등을 얻습니다.  논리가 강력하고 번거롭지 않습니다.

2. 요소를 얻기 위해 노드 계층 관계를 사용합니다

• . 요소를 얻기 위한 자식-형제 노드 관계입니다
• .

모두

요소 노드를 얻을 수 있지만 노드 작업은 더 간단합니다

.

노드(라벨, 속성, 텍스트, 주석 등) DOM에서 노드를 표현하기 위해 노드를 사용합니다.
HTML DOM 트리의 모든 노드는 JavaScript를 통해 접근할 수 있으며, 모든 HTML 요소(노드)는 수정, 생성, 삭제가 가능합니다.

일반적으로 노드에는 nodeType(노드 유형), nodeName(노드 이름) 및 nodeValue(노드 값)의 세 가지 기본 속성이 있습니다.

• 요소 노드 nodeType은 1,
• 속성 노드 nodeType은 2,
• 텍스트 노드 nodeType은 3입니다. (텍스트 노드에는 텍스트, 공백, 줄 바꿈 등이 포함됩니다.)

실제

我们在实际开发中，节点操作主要操作的是元素节点

level은

DOM 트리를 사용하여 노드를 나눕니다. 다양한 계층 관계의 경우 가장 일반적인 것은父子兄层级关系

상위

노드

node.parentNode

• parentNode 속성은 특정 노드의 상위 노드를 반환할 수 있습니다.
• 지정된 노드에 상위 노드가 없으면 null이 반환됩니다

. childNodes(표준)

parentNode.childNodes는 즉시 업데이트되는 컬렉션인 지정된 노드의 하위 노드 컬렉션을 포함 반환합니다.
참고: 반환 값에는 요소 노드, 텍스트 노드 등을 포함한 모든 하위 노드가 포함됩니다.
내부에 요소 노드만 가져오려면 특별히 처리해야 합니다. 따라서 일반적으로 childNodes

var ul = document.querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. 노드 유형 == 1 ) {
 // ul.childNodes[i]는 요소 노드입니다. console.log(ul.childNodes[i]);}}

2. parentNode.children(비표준)

parentNode.children은 모든 하위 요소 노드를 반환하는 읽기 전용 속성입니다. 하위 요소 노드만 반환하고 다른 노드는 반환하지 않습니다(이것이 우리가 집중하는 것입니다).
자식은 비표준이지만 다양한 브라우저에서 지원되므로 안전하게

3. parentNode.firstChild

firstChild를 사용하여 첫 번째 자식 노드를 반환하거나 찾을 수 없으면 null을 반환할 수 있습니다. 마찬가지로 모든 노드가 포함됩니다.

4. parentNode.lastChild

lastChild는 마지막 하위 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다. 마찬가지로 모든 노드도 포함됩니다.

5. parentNode.firstElementChild

firstElementChild는 첫 번째 하위 요소 노드를 반환하고, 노드가 없으면 null을 반환합니다.

6. parentNode.lastElementChild

lastElementChild는 마지막 하위 요소 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다.
注意：这两个方法有兼容性问题，IE9 以上才支持

실제 개발에서 firstChild와 lastChild에는 작동하기 불편한 다른 노드가 포함되어 있습니다. 그러면 첫 번째 자식을 어떻게 얻습니까? 요소 노드 또는 마지막 하위 요소 노드는 어떻습니까?
해결 방법:

1. 첫 번째 하위 요소 노드를 원할 경우 parentNode.chilren[0]을 사용할 수 있습니다.
2. 마지막 하위 요소 노드를 원할 경우

parentNode.chilren[parentNode.chilren.length - 1]을

요약

문서 개체 모델(문서 개체 모델(줄여서 DOM)은 확장 가능한 마크업 언어(HTML 또는 XML) 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다.

W3C는 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있는 일련의 DOM 인터페이스를 정의했습니다.

JavaScript의 경우 JavaScript가 HTML을 작동할 수 있도록 JavaScript에는 자체 DOM 프로그래밍 인터페이스 세트가 있습니다.

HTML의 경우 DOM은 HTML을 DOM 트리로 만듭니다.

문서, 요소 및 노드를 포함하는 DOM 요소는 객체이므로

DOM 작업에 관해서는 주로 요소의 작동에 중점을 둡니다. 주로 생성, 추가, 삭제, 수정, 질의, 속성 연산, 이벤트 연산을 포함합니다.