01 JavaScript에 대한 첫 지식
1.1 자바스크립트 구성
JavaScript 구현은 다음 세 부분으로 구성됩니다.
| 구성 | 설명하다 |
|---|---|
| ECMAScript(핵심) | JS의 구문과 기본 개체에 대해 설명합니다. |
| DOM(문서 객체 모델) | 웹 콘텐츠 처리 방법 및 인터페이스 |
| BOM(브라우저 개체 모델) | 브라우저와 상호 작용하기 위한 메서드 및 인터페이스 |
다시 채우다:
- ECMAScript는 표준이고 JS는 이를 구현한 것일 뿐입니다.
- DOM은 W3C 표준입니다. [일반적으로 모든 브라우저에서 사용]
- BOM은 DOM에 따라 각 브라우저에서 각 브라우저 제조업체의 구현입니다.
- window는 js 객체가 아닌 BOM 객체입니다. javacsript는 BOM(Browser Object Model) 객체에 액세스하여 클라이언트(브라우저)에 액세스, 제어 및 수정합니다.
1.2 BOM, DOM 개념:
API(Application Programming Interface, Application Programming Interface)는 응용 프로그램과 개발자가 소스 코드에 액세스하거나 내부 코드를 이해할 필요 없이 소프트웨어 또는 하드웨어를 기반으로 일련의 루틴에 액세스할 수 있는 기능을 제공하는 데 사용되는 미리 정의된 함수 집합입니다. 작동 메커니즘 세부 사항.
DOM과 BOM은 모두 API에 속합니다.
-
BOM(Browser Object Model, 브라우저 객체 모델) JavaScript가 브라우저의 기능과 정보에 접근하여 동작할 수 있도록 브라우저에서 제공하는 객체 집합을 말합니다. 예를 들어 window 개체는 브라우저 창을 나타내는 BOM의 일부이며alert()및 와setTimeout()같은 메서드를 제공합니다. -
DOM(Document Object Model, Document Object Model)은 크로스 플랫폼이며언어 독립XML에 대한 인터페이스는 프로그램과 스크립트가 문서의 내용, 구조 및 스타일을 동적으로 액세스하고 업데이트할 수 있도록 하는 트리 기반 API입니다. 웹 브라우저에서 DOM은 일반적으로 HTML 또는 XML 문서의 구조화된 표현으로 표현됩니다.
HTML을 객체 트리(DOM 트리)로 생각하면 그 자체와
<div></div>이러한 객체로 간주되며 각 객체를 노드(노드)라고 하며 이는 모든 객체의 부모 클래스로 이해할 수 있습니다. DOM .
- JavaScript는 BOM과 DOM을 사용하여 브라우저와 문서를 조작할 수 있는 스크립팅 언어입니다. 예를 들어 JavaScript를 사용하여 DOM API를 통해 페이지의 요소 콘텐츠를 변경하거나 BOM API를 사용하여 브라우저 창의 크기를 제어합니다.
1. 문서 트리(DOM 트리)
브라우저가 웹 페이지(일반적으로 HTML)를 다운로드할 때 이 HTML이 호출되며 document(물론 DOM 트리의 노드이기도 함) 문서는 일반적으로 전체 DOM 트리의 루트 노드입니다. . （document.title이 문서에는 제목 ) 등 의 속성이 포함되어 URL（document.URL）있으며 JS에서 직접 액세스할 수 있습니다.
참고: 브라우저 창에 다음이 있을 수 있습니다.많은예를 들어 를 통해
iframe로드된 각각 문서입니다.
이해가 안가는 분들은iframe제가 html의 전반적인 개념을 이해하기 위해 쓴 html5 글에서 배우시면 됩니다.
2. BOM은 브라우저의 동작을 제어하기 위해 나타나는 인터페이스입니다.
예를 들어, 다른 페이지로 이동, 앞으로, 뒤로 이동 등 프로그램은 화면 크기와 같은 매개 변수를 가져와야 할 수도 있습니다.
BOM의 창에는 문서가 포함되어 있으므로 창 개체의 문서 속성을 직접 사용할 수 있으며 문서 속성을 통해 XHTML 문서의 내용과 구조에 액세스, 검색 및 수정할 수 있습니다. 문서 개체는 DOM(문서 개체 모델) 모델의 루트 노드이기 때문입니다. 그것은 말할 수 있습니다,BOM에는 DOM(객체)이 포함되어 있습니다., 브라우저는 BOM 개체에 대한 액세스를 제공한 다음 BOM 개체에서 DOM 개체에 액세스하므로 js는 브라우저를 작동하고 브라우저에서 문서를 읽을 수 있습니다.
BOM의 핵심은 Window이며, Window 객체는 js를 통해 브라우저 창에 접근하기 위한 인터페이스일 뿐만 아니라 Global(글로벌) 객체 역할도 겸하고 있습니다. 이는 웹 페이지에 정의된 모든 개체, 변수 및 함수가 창을 전역 개체로 갖는다는 것을 의미합니다.
-
Window개체에 속성 포함:document,location,navigator,screen,history,frames -
Document루트 노드는 자식 노드를 포함합니다:forms,location,anchors,images,links
보충:
1. 문서에 프레임(프레임 또는 iframe 태그)이 포함된 경우 브라우저는 HTML 문서에 대한 창 개체를 만들고 각 프레임에 대한 추가 창 개체를 만듭니다.
2. window.frames는 창에 있는 모든 명명된 프레임을 반환합니다.
3. 두 개의 타이머: setTimeout(code,latency)및setInterval(code,period)
참고: setTimeout은 코드를 한 번만 실행합니다. 여러 번 호출하려는 경우 코드 자체에서 setTimeout()을 다시 호출하도록 할 수 있습니다. setInteval()은 clearInterval()이 호출될 때까지 코드를 계속 호출합니다.
02 봄
2.1 BOM 개체
BOM(브라우저 개체 모델)은 JavaScript가 브라우저와 "대화"할 수 있는 기능을 제공하는 브라우저 개체 모델을 나타냅니다. BOM은 여러 개체로 구성되며 그 중 브라우저 창을 나타내는 창 개체는 JavaScript 최상위 개체이고 다른 BOM 개체는 창 개체의 하위 개체입니다.
BOM은 브라우저 기능에 액세스하기 위한 여러 객체를 제공합니다. 예를 들어:
window개체: 브라우저 창을 나타내며 창 크기를 가져오고, 새 창을 열고, 타이머를 설정하는 등의 작업에 사용할 수 있습니다.location개체: URL의 다양한 부분을 가져오거나 설정하는 데 사용할 수 있는 현재 문서의 URL을 나타냅니다.navigator개체: 이름, 버전 번호 등과 같은 브라우저 정보를 얻는 데 사용할 수 있는 브라우저 자체를 나타냅니다.history개체: 지정된 페이지로 돌아가거나 앞으로 이동하는 데 사용할 수 있는 브라우저의 기록을 나타냅니다.screen개체: 사용자의 화면을 나타내며 화면의 크기, 색심도 등을 얻기 위해 사용할 수 있습니다.
2.2 객체 및 작업(복제된 마인드맵)
03 DOM
3.1HTML DOM 노드
(1) DOM에서 HTML 문서의 계층 구조는 트리 구조로 표현됩니다. 문서는 문서 개체로 표시되며 트리의 각 자식 노드는 HTML 문서의 다른 콘텐츠를 나타냅니다. 브라우저에 로드된 모든 HTML 문서는 Document 객체가 됩니다.
(2) Document는 DOM을 탐색하는 입구이며 Document 객체는 전역 변수인 document를 사용하여 접근할 수 있습니다.
(3) HTML DOM(Document Object Model)에서 각 부분은 노드입니다.
- 문서 자체는 문서 노드입니다.
- 모든 HTML 요소는 요소 노드입니다.
- 모든 HTML 속성은 속성 노드입니다.
- HTML 요소 내부의 텍스트는 텍스트 노드입니다.
- 주석은 주석 노드입니다.
각각 고유한 속성과 메서드가 있는 다양한 유형의 DOM 노드가 있습니다. 다음은 몇 가지 일반적인 DOM 노드 유형과 해당 속성을 나열한 표입니다.
| 노드 이름 | 속성 |
|---|---|
| 요소 노드 | nodeName, nodeValue, 속성, childNodes 등 |
| 속성 노드 | nodeName, nodeValue 등 |
| 텍스트 노드 | nodeName, nodeValue, 데이터 등 |
| 주석 노드 | nodeName, nodeValue, 데이터 등 |
| 문서 노드 | nodeName, doctype, documentElement 등 |
3.2 요소 객체
- HTML DOM에서
Element객체는 HTML 요소를 나타냅니다. - 요소 객체는 요소 노드, 텍스트 노드 및 주석 노드 유형의 자식 노드를 가질 수 있습니다.
NodeList개체는 HTML 요소의 자식 노드 컬렉션과 같은 노드 목록을 나타냅니다.- 요소에는 속성도 있을 수 있습니다. 속성은 속성 노드입니다.
3.2.1 요소 노드 가져오기
요소 노드 가져오기: document개체의 세 가지 메서드를 통해 가져옵니다.
- document.getElementById("ID")
- document.getElementByName("이름")
- document.getElementsByTagName("p");
3.2.2 요소 이벤트 모니터링
JavaScript에서는 addEventListener()메서드를 . 이 메서드는 세 가지 매개변수를 허용합니다.이벤트 유형、경청자그리고선택적 구성 개체。
| 매개변수 | 설명하다 |
|---|---|
| 유형 | 이벤트 유형에 대한 대소문자 구분 문자열입니다. |
| 경청자 | 모니터링되는 이벤트 유형이 트리거되면 이벤트 알림(Event 인터페이스를 구현하는 개체) 개체가 수신됩니다. listener는 EventListener 인터페이스 또는 함수를 구현하는 객체여야 합니다. |
| 옵션 | 캡처, 한 번, 수동 및 신호와 같은 특성을 포함하는 선택적 구성 개체입니다. |
예를 들어 addEventListener() 메서드는 다음과 같이 사용할 수 있습니다.
element.addEventListener('click', function(event) {
// 处理点击事件
}, {
capture: false, once: true});
설명: 위의 코드는 요소 요소에 클릭 이벤트 리스너를 추가한 것으로, 클릭 이벤트가 발생하면 콜백 함수가 실행됩니다. 구성 개체에 지정된 캡처는 false이며 버블링 단계 중에 수신기가 트리거됨을 나타내고 한 번은 수신기가 최대 한 번만 트리거됨을 나타내는 true입니다.
3.3 속성 노드
속성 노드 가져오기: 속성 노드가 요소 노드에 연결됩니다.
getAttributeNode(attrName)속성 노드는 요소 노드의 메소드를 통해 얻을 수 있습니다.getAttribute(attrName)속성 값은 직접 얻을 수 있습니다 .- 기타 추가, 삭제 및 수정 사항은 공식 문서를 참조하십시오.
3.4 텍스트 노드
텍스트 노드 가져오기: 텍스트 노드는 요소 노드의 자식 노드입니다.
- 엘리먼트 노드(Element interface)에서 제공하는 메소드를 통해 획득
childnodes()[index].
3.5 혼란과 보충
혼란의 포인트:
<p id="example" title="texts">
这是一段文本
<span></span>
</p>
var p = document.getElementById('example');
p.nodeValue //null,p是元素节点，所以nodeValue为null
p.getAttributeNode('id').nodeValue //example，这里获取到p的id属性的属性节点，nodeValue就是它的属性值
p.childNodes[0].nodeValue
/*这是一段文本,p是含有两个子节点的，插入的文本虽然没有标签，但它依然是一个节点。
其类型是是文本节点，其nodeValue是就是写入在其中的字符串，包含换行和缩进*/
p.innerHTML//这是一段文本 <span></span>"
//这里innerHTML返回了p所包含的全部的节点的所包含的各种值了，以字符串的形式。
3.6 DOM 이벤트 흐름
DOM 이벤트 흐름은 캡처 단계, 대상 단계 및 버블링 단계의 세 단계로 구성됩니다.
- 캡처 단계에서 이벤트는 대상 요소에 도달할 때까지 문서의 루트 노드에서 아래로 전파됩니다.
- 대상 단계에서 이벤트는 대상 요소에 도착합니다.
- 버블링 단계 동안 이벤트는 문서의 루트 노드에 도달할 때까지 대상 요소에서 위쪽으로 전파됩니다.
버블링 이벤트와 캡처 이벤트의 차이점은 DOM 이벤트 스트림에서 발생하는 순서입니다. 버블링 이벤트 리스너는 버블링 단계 중에 트리거되는 반면 캡처 이벤트 리스너는 캡처 단계 중에 트리거됩니다.
예를 들어 다음 HTML 코드가 있다고 가정합니다.
<div id="myDiv">
<button id="myBtn">Click me!</button>
</div>
div 요소와 버튼 요소에 모두 추가하면클릭 이벤트 리스너그런 다음 버튼 요소를 클릭하면 두 리스너가 모두 트리거됩니다. 그러나 실행 순서는 이벤트 리스너를 버블링하는지 또는 캡처하는지에 따라 다릅니다.
- 둘 다 버블링 이벤트 리스너인 경우 버튼 요소의 리스너가 먼저 실행된 다음 div 요소의 리스너가 실행됩니다.
- 둘 다 캡처 이벤트 리스너인 경우 div 요소의 리스너가 먼저 트리거된 다음 버튼 요소의 리스너가 트리거됩니다.
04 부록: 운영 마인드맵 재인쇄
4.1 DOM 기본 조작 마인드맵
4.2 윈도우 객체 마인드맵
4.3 재인쇄 주소
재인쇄: 여기를 클릭하세요