
완전한 JavaScript 구현은 다음과 같은 세 가지 부분으로 구성됩니다.
코어(ECMAScript): 언어의 구문과 기본 개체를 설명하는 언어의 핵심 부분입니다.
DOM(문서 개체 모델): 웹 페이지 콘텐츠 처리 방법과 인터페이스를 설명하는 웹 페이지 문서 작업 표준입니다.
BOM(브라우저 개체 모델): 브라우저와 상호 작용하기 위한 방법과 인터페이스를 설명하는 클라이언트 및 브라우저 창 작업의 기초입니다.
문서 개체 모델( Document Object Model,简称DOM )은 확장 가능한 마크업 언어(HTML 또는 XML) 처리를 위해 W3C 조직에서 권장하는 표준编程接口입니다.
W3C는 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있는 일련의 DOM 인터페이스를 정의했습니다.
공식 언어: DOM(문서 개체 모델)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다. 이는 프로그램과 스크립트에 동적으로 액세스하고 www 문서(HTML 및 XML 문서는 설명 섹션을 통해 정의됨)의 내용, 구조 및 스타일을 업데이트할 수 있는 플랫폼 및 언어 독립적인 응용 프로그래밍 인터페이스(API)입니다. 문서를 추가로 처리할 수 있으며 처리 결과를 현재 페이지에 추가할 수 있습니다. DOM은 처리 중에 전체 문서가 메모리에 표시되어야 하는 트리 기반 API 문서입니다. 또 다른 간단한 API는 매우 큰 XML 문서를 처리하는 데 사용할 수 있는 이벤트 기반 SAX입니다. 크기가 크기 때문에 메모리에서 모두 처리하는 데 적합하지 않습니다.

DOM 把以上内容都看做是对象
실제 개발에서 DOM은 주로 사용됩니다.
페이지의 요소를 가져오는 방법 다음과 같은 방법으로 페이지의 요소를 가져올 수 있습니다.
ID가 있는 요소 객체를 얻으려면 getElementById() 메서드를 사용합니다.
document.getElementById('id'); 얻은 요소 개체를 인쇄하고 개체의 속성과 메서드를 더 잘 보려면 console.dir()을 사용합니다.
getElementsByTagName() 메서드를 사용하여 지정된 태그 이름을 가진 개체 컬렉션을 반환합니다.
document.getElementsByTagName('tag name'); 참고:
. // 클래스 이름에 따라 요소 객체 컬렉션을 반환합니다. document.querySelector('selector') // 다음에 따라 반환합니다. 지정된 선택기 첫 번째 요소 객체 document.querySelectorAll('selector') // 지정된 선택기에 따라 반환注意:
querySelector 및 querySelectorAll의 선택기는 다음과 같이 표시되어야 합니다. document.querySelector('#nav');
1. body 요소 가져오기
doucumnet.body // body 요소 개체 반환
2. html 요소 가져오기
document.documentElement // html 요소 개체 반환
JavaScript를 활성화합니다. 동적 페이지를 생성하는 데 사용되며 이벤트는 JavaScript로 감지할 수 있는 동작입니다.简单理解: 触发--- 响应机制。
웹 페이지의 각 요소는 JavaScript를 트리거할 수 있는 특정 이벤트를 생성할 수 있습니다. 예를 들어 사용자가 버튼을 클릭하면 이벤트를 생성한 다음 특정 작업을 수행할 수 있습니다.
케이스:
var btn = document.getElementById('btn');
btn.onclick = 함수() {
Alert('잘 지내세요');
}; 注:以下图片的事件只是常见的并不代表所有
.
1. 이벤트 소스(무엇을 조작하고 싶습니까?)
2. 이벤트(원하는 상호 작용 효과를 얻기 위해 무엇을 하시겠습니까?)
3. 처리 기능(이벤트가 진행된 후 대상이 어떤 모습이기를 원하는지)
JavaScript DOM 작업은 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있습니다. DOM 작업 요소를 사용하여 요소 내부의 콘텐츠, 속성 등을 변경할 수 있습니다. 다음은 모두 속성입니다
element.innerText를
시작 위치에서 끝 위치로 변경하지만 동시에 공백과 줄 바꿈도
시작 위치에서 전체 내용을
제거합니다.html. 태그를 포함하여
element.innerHTML의 끝 위치에 공백과 줄바꿈을 유지합니다.
innerText 및 innerHTML
src,href
id, alt, title
DOM을 사용하여 다음 양식 요소의 속성을 조작할 수 있습니다:
type, value, selected, selected, 비활성화
크기, 색상, 위치 및 기타 스타일을 수정할 수 있습니다. JS를 통해 요소를 정리합니다.
注意:
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作,产生的是行内样式,CSS 权重比较高
조작 요소는 DOM의 핵심 콘텐츠입니다. 

동일한 요소 그룹이 있고 특정 요소가 특정 스타일을 구현하기를 원하는 경우 루프 독점 알고리즘을 사용해야 합니다.
1. 속성 값 가져오기
차이점:
2. 속성 값을 설정합니다.
차이점:
3. 속성 제거
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
사용자 정의 속성은 getAttribute('attribute')를 통해 획득됩니다.
그러나 일부 사용자 정의 속성은 쉽게 모호성을 유발할 수 있으며, 해당 요소가 내장 속성인지 요소의 사용자 정의 속성인지 판단하기 어렵습니다.
H5는 우리에게 새로운 사용자 정의 속성을 추가했습니다:
1. H5 사용자 정의 속성 설정
H5는 사용자 정의 속성 데이터의 시작 부분을 속성 이름으로 사용하고 값을 할당해야 한다고 규정합니다.
또는 JS를 사용하여element.setAttribute('data-index', 2)를
설정합니다
. 2. H5 사용자 정의 속성 가져오기 <br/> 호환성 Get element.getAttribute('data-index');
H5에는 IE 11에서만 지원되는 element.dataset.index 또는 element.dataset['index']가 추가되었습니다.
일반적으로 요소를 얻기 위해 두 가지 방법을 사용합니다.
1. DOM에서 제공하는 메소드를 사용하여
2. 요소를 얻기 위해 노드 계층 관계를 사용합니다
모두
요소 노드를 얻을 수 있지만 노드 작업은 더 간단합니다
노드(라벨, 속성, 텍스트, 주석 등) DOM에서 노드를 표현하기 위해 노드를 사용합니다.
HTML DOM 트리의 모든 노드는 JavaScript를 통해 접근할 수 있으며, 모든 HTML 요소(노드)는 수정, 생성, 삭제가 가능합니다.

일반적으로 노드에는 nodeType(노드 유형), nodeName(노드 이름) 및 nodeValue(노드 값)의 세 가지 기본 속성이 있습니다.
我们在实际开发中,节点操作主要操作的是元素节点
DOM 트리를 사용하여 노드를 나눕니다. 다양한 계층 관계의 경우 가장 일반적인 것은父子兄层级关系
상위
노드
node.parentNode
. 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]);}}
- parentNode.children(비표준)
parentNode.children은 모든 하위 요소 노드를 반환하는 읽기 전용 속성입니다. 하위 요소 노드만 반환하고 다른 노드는 반환하지 않습니다(이것이 우리가 집중하는 것입니다).
자식은 비표준이지만 다양한 브라우저에서 지원되므로 안전하게
- parentNode.firstChild
firstChild를 사용하여 첫 번째 자식 노드를 반환하거나 찾을 수 없으면 null을 반환할 수 있습니다. 마찬가지로 모든 노드가 포함됩니다.
- parentNode.lastChild
lastChild는 마지막 하위 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다. 마찬가지로 모든 노드도 포함됩니다.
- parentNode.firstElementChild
firstElementChild는 첫 번째 하위 요소 노드를 반환하고, 노드가 없으면 null을 반환합니다.
- parentNode.lastElementChild
lastElementChild는 마지막 하위 요소 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다.注意:这两个方法有兼容性问题,IE9 以上才支持
실제 개발에서 firstChild와 lastChild에는 작동하기 불편한 다른 노드가 포함되어 있습니다. 그러면 첫 번째 자식을 어떻게 얻습니까? 요소 노드 또는 마지막 하위 요소 노드는 어떻습니까?
해결 방법:
사용할 수 있습니다.parentNode.chilren[parentNode.chilren.length - 1]을
문서 개체 모델(문서 개체 모델(줄여서 DOM)은 확장 가능한 마크업 언어(HTML 또는 XML) 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다.
W3C는 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있는 일련의 DOM 인터페이스를 정의했습니다.
JavaScript의 경우 JavaScript가 HTML을 작동할 수 있도록 JavaScript에는 자체 DOM 프로그래밍 인터페이스 세트가 있습니다.
HTML의 경우 DOM은 HTML을 DOM 트리로 만듭니다.
문서, 요소 및 노드를 포함하는 DOM 요소는 객체이므로
DOM 작업에 관해서는 주로 요소의 작동에 중점을 둡니다. 주로 생성, 추가, 삭제, 수정, 질의, 속성 연산, 이벤트 연산을 포함합니다. 