목차
1. 웹 API란?
AP1: 일부 미리 정의된 기능인 애플리케이션 프로그래밍 인터페이스, 목적은 특정 기능을 달성하는 것이므로 내부 구현 세부 사항을 알 필요가 없습니다.
간단히 말해서, API를 잘 사용하려면 API 인터페이스가 무엇 을 하고 무엇 을 반환하는지 이해하기만 하면 됩니다.
WebAPI는 웹 페이지를 운영하기 위해 브라우저에서 제공하는 일련의 인터페이스로, 사용자가 페이지의 요소와 브라우저의 일부 기능을 쉽게 조작할 수 있도록 합니다.
웹 API = DOM 문서 개체 모델(웹 페이지의 콘텐츠, 구조 및 스타일 변경) + BOM 브라우저 개체 모델(콘텐츠와 독립적으로 브라우저 창과 상호 작용)
여기서 주로 DOM 문서 개체 모델을 소개합니다.
둘, DOM
DOM 트리: HTML 문서를 문서 트리 또는 DOM 트리라고 하는 트리 구조로 시각적으로 표시합니다. 문서 트리는 태그 간의 관계를 직관적으로 반영합니다.
DOM 개체
DOM 개체: html 태그에 따라 브라우저에서 생성된 JS 개체는 DOM 트리의 모든 콘텐츠를 개체로 간주합니다.
문서: 페이지는 DOM에서 문서로 표현되는 문서입니다.
요소: 페이지의 모든 태그는 요소이며 요소는 DOM에서
노드를 나타내는 데 사용됩니다. 웹 페이지의 모든 콘텐츠는 노드(레이블, 속성, 텍스트)입니다. , 주석 등) , DOM은 노드를 사용하여
기능을 나타냅니다.
1. 모든 레이블 속성은 이 개체에서 찾을 수 있습니다
. 2. 이 개체의 속성을 수정하면 자동으로 레이블에 매핑됩니다.
셋, DOM 요소 획득
| 획득 방법 | 문법 | 매개변수 | 반품 |
|---|---|---|---|
| 신분증으로 얻다 | doucument.getElementByld() | ID 이름 | 요소 개체 |
| 태그 이름으로 가져오기 | doucument.getElementsByTagName() | 태그 이름 | 의사 배열 형태로 저장된 요소 객체의 컬렉션, 존재하지 않는 경우 길이가 0인 의사 배열 반환 |
| 얻는 HTML5 새로운 방법 | ①document.getElementsByClassName() ② document.querySelector() ③document.querySelectorAll() |
① 클래스 이름 ② CSS 선택기 ③ CSS 선택기 |
① pseudo-array 형태로 저장된 요소 객체의 모음 ② CSS 선택자와 일치하는 첫 번째 요소인 HTMLElement 객체 일치하는 항목이 없으면 null이 반환됨 ③ 일치하는 NodeList 객체의 모음 의사 배열인 CSS 선택기 |
특수 요소 가져오기:
본문 객체 가져오기: document.body,
html 요소 가져오기: document.documentElement;
4. 작동 요소
4.1 요소 내용 수정
document.write()
1. 텍스트 콘텐츠만 이전 위치에 추가할 수 있습니다(생성). 2. 텍스트에 포함된 레이블은 요소의 innerText 속성
에 의해 구문 분석됩니다. 1. 텍스트 콘텐츠를 위치에 추가하거나 업데이트합니다. 2. 텍스트에 다음이 포함됨 태그가 구문 분석되지 않고 공백 및 개행 요소 의 innerHTML 속성이 1. 텍스트 내용을 임의의 태그 위치에 추가/업데이트 2. 태그에 포함된 태그 텍스트가 구문 분석되고 공백과 줄 바꿈이 유지됩니다.
코드 예:
<body>
<P>段落一</P>
<p id="pp">段落二</p>
<script>
document.write('好好学习，天天向上');
// 里面的标签会被解析
document.write('<h2>学习令人兴奋</h2>');
var one=document.querySelector('p')
one.onclick=function(){
one.innerText='<h1>段落 三</h1>'
}
var two=document.getElementById('pp')
two.onclick=function(){
two.innerHTML='<h1>段落 三</h1>'
}
</script>
</body>효과 :
4.2 요소 속성 설정/수정
작은 경우: 비밀번호 입력 표시/숨기기
효과:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
.box {
position: relative;
width: 200px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 10px;
right: 30px;
width: 24px;
}
</style>
</head>
<div class="box">
<label for=""><img src="图片地址" id="eye"> </label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
eye.src = '';
flag = 1;
} else {
pwd.type = 'password';
eye.src = '';
flag = 0;
}
}
</script>
</body>
</html>
각 태그 요소의 속성은 "."를 통해 액세스할 수 있습니다.
4.3 스타일 속성 설정/수정
JS를 통해 요소의 크기, 색상, 위치 및 기타 스타일을 수정할 수 있습니다.
| 방법 | 예 |
| 스타일 속성을 통해 |
div.style.backgroundColor = '분홍색'; div.style.width = '250px'; |
| 클래스 이름으로 className |
.change{ width:30px; height:30px; } //원래 클래스 이름 유지 |
| 클래스리스트 별 |
//className이 이전 클래스 이름을 덮어쓰기 쉬운 문제를 해결하기 위해 classList를 통해 클래스 이름을 추가하고 삭제할 수 있습니다. element.classList.add('클래스 이름') //추가 |
작은 경우: 입력 상자의 텍스트 프롬프트 기능 실현
<input type="text" value="请输入账号" style="width: 200px; height:30px; outline: none; color: rgb(201, 189, 189);;">
<script>
var inp = document.querySelector('input');
inp.onfocus = function () {
if (this.value == '请输入账号') {
this.value = '';
this.style.color = 'black'
}
}
inp.onblur = function () {
if (this.value == '') {
this.value = '请输入账号'
this.style.color = 'rgb(201, 189, 189)'
}
}
</script>배타적 사고
스타일 세트가 있고 특정 요소가 특정 스타일을 달성하기를 원하는 경우 순환의 배타적 사고 알고리즘을 사용해야 합니다.
1. 모든 요소 클리어 스타일(다른 요소 죽이기)
2. 현재 요소의 스타일 지정(혼자 두십시오)
3. 순서는 되돌릴 수 없으며, 다른 사람을 먼저 죽이고 나 자신을 떠납니다.
</head>
<button>11</button>
<button>22</button>
<button>33</button>
<script>
//1.获取所有的元素
var btns = document.getElementsByTagName('button');
//btns得到的是伪数组，里面的每一个元素btn[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//1.我们先把所有按钮的背景颜色去掉，干掉其他人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//2.然后才让当前元素的颜为pink留下我自己
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>4.4 커스텀 속성
목적: 데이터를 저장하고 저장하기 위해 일부 데이터는 데이터베이스 대신 페이지에 저장할 수 있습니다.
일부 사용자 정의 속성은 모호성을 유발하기 쉽고 내장 속성인지 사용자 정의 속성인지 판단하기 쉽지 않습니다. , 그래서 H5는 사용자 정의 속성을 data-처음 부터 규정했습니다.
속성 값 가져오기
내장 속성 값 가져오기(요소 자체와 함께 제공되는 속성): 사용자 지정 속성 가져오기:element.属性;element.getAttribute('属性');
속성 값 설정
내장 속성 값 설정: 주로 사용자 정의 속성 설정:element.属性 = '值';element.setAttribute('属性','值');
다섯, 노드 노드
웹 페이지의 모든 콘텐츠는 노드 노드(레이블, 속성, 텍스트, 주석 등)이며 DOM 트리를 사용하여 노드를 여러 계층적 관계로 나눌 수 있습니다. 관계. 실제 개발에서 노드 운영은 상대적으로 단순하고 논리적이지만 호환성이 약간 떨어지는 요소 노드를 주로 운영합니다 .
일반적으로 노드에는 nodeType(노드 유형), nodeName(노드 이름) 및 (노드 값) nodeValue의 세 가지 기본 속성이 있습니다.
5.1 부모 노드와 자식 노드:
// 부모 노드
node.parentNode: 노드의 부모 노드 반환, 가장 가까운 부모 노드에 주의, 지정된 노드에 부모 노드가 없으면 null 반환// 자식 노드
parentNode.children : 모든 자식 요소 노드를 반환하고 나머지 노드는 반환하지 않는 읽기 전용 속성입니다. (중요) (비표준이지만 널리 사용됨)
parentNode.firstChild : 첫 번째 자식 노드를 반환합니다. 텍스트 노드든 요소 노드든 상관없이
parentNode.lastChild가 없으면 null을 반환합니다. : 텍스트 노드이든 요소 노드이든 마지막 자식 노드를 반환합니다.
parentNode.firstElementChild가 없으면 null을 반환합니다 . 읽기 전용 속성, 첫 번째 자식 노드만 반환, 없으면 null 반환, IE9 이상은
parentNode.lastElementChild 만 지원 : 마지막 자식 노드만 반환하는 읽기 전용 속성, 없으면 null 반환 1. IE9 이상은
실제 개발에서 //쓰기만 지원하며 호환성 문제가 없으며
parentNode 요소를 반환할 수 있습니다
.
읽기 전용 속성은 무엇입니까?
예: if <div> <!--a--><img src='' ''> </div> HTML 페이지에서
parentNode.firstElementChild는 <img src='' ''>를 반환합니다 .
parentNode.firstChild는 <!--a-->를 반환합니다. 텍스트 노드와 주석 노드도 자식 노드로 계산되기 때문입니다.
5.2 브라더 노드
nextSibling은 요소 노드와 텍스트 노드를 포함하여 현재 요소의 다음 형제 요소 노드를 반환하고 찾지 못하면 null을 반환합니다.
previousSibling은 요소 노드와 텍스트 노드를 포함하여 현재 요소의 이전 형제 요소 노드를 반환하고 찾을 수 없으면 null을 반환합니다.
nextElementSibling은 현재 요소의 다음 형제 요소 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다. 호환성, IE 9+
previousElementSibling은 현재 요소의 이전 형제 요소 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다. 호환성, IE 9+
5.3 노드 생성, 추가, 삭제 및 복사
페이지에 새 요소를 추가하려면 먼저 요소를 만든 다음 추가해야 합니다.
1. 노드 생성
document.createElement('tagName')
이러한 요소는 기존에 존재하지 않았기 때문에 요구 사항에 따라 동적으로 생성되므로 동적으로 요소 노드 생성이라고도 합니다.
2. 노드 추가
node.appendChild(child) 노드를 추가하는 방법 부모 노드의 자식 노드 목록의 끝을 지정합니다. CSS의 가상 요소 이후와 유사합니다.
node.insertBefore(child, specified element) 메서드는 부모 노드의 지정된 자식 노드 앞에 노드를 추가합니다. CSS의 이전 의사 요소와 유사합니다.3. 노드 삭제
node.removeChild(child) 메서드는 DOM에서 자식 노드를 제거하고 제거된 노드를 반환합니다.
4. 중복 노드
node.cloneNode() 메서드는 메서드가 호출된 노드의 복사본을 반환합니다.
괄호가 false(기본값)이면 얕은 복사, 즉 복사된 노드 자체만 복제되고 그 안에 있는 자식 노드는 복제되지 않으며, 괄호 매개변수가 true이면 깊은 복사입니다
. 노드 자체와 모든 자식 노드를 복사합니다.
동적으로 생성된 세 가지 요소의 차이점
1.document.write()
document.write('<div>123</div>')는
페이지의 콘텐츠 흐름에 콘텐츠를 직접 쓰지만 문서 흐름이 실행되므로 모든 페이지가 다시 그려집니다. 즉, 페이지 문서 흐름이 로드되면 원래 문서 흐름이 사라집니다.
2. element.innerHTML
element.innerHTML = '<a>태그 생성</a>'
기능:
(1) innerHTML은 컨텐츠를 특정 DOM 노드로, ** 페이지 다시
그리기를 일으키지 않습니다
. .createElement()
기능: 많은 수의 요소를 생성할 때, 약간 덜 효율적이지만 구조가 더 명확합니다.
6. 이벤트
이벤트는 키보드 조작 및 마우스 조작과 같이 JavaScript에서 감지할 수 있는 동작입니다. 간단한 이해: 트리거-응답 메커니즘
6.1 이벤트의 세 가지 요소:
事件源 ：事件被触发的对象 谁 按钮
事件类型 如何触发，什么事件，比如鼠标点击，还是鼠标经过
事件处理程序：通过一个函数赋值的方式完成
6.2 이벤트 실행 단계
- 이벤트 소스 가져오기
- 등록 이벤트(바인딩 이벤트)
- 이벤트 처리기 추가(함수 할당 형식)
6.3, 등록 이벤트
1. 등록방법
요소에 이벤트를 추가하는 것을 이벤트 등록 또는 바인딩 이벤트라고 합니다. 이벤트를 등록하는 방법은 기존 방식과 이벤트 모니터링 등록 방식 두 가지가 있습니다 기존
방식
btn.onclick = function() { }
특징: 등록된 이벤트의 고유성
동일한 요소와 동일한 이벤트는 하나의 핸들러 함수만 설정할 수 있습니다 , 그리고 마지막으로 등록된 핸들러 함수는 이전에 등록된 핸들러 함수를 재정의합니다.
이벤트 모니터링 등록 방법 ------ w3c 권장 방법, 동일한 요소와 동일한 이벤트는 여러 리스너를 등록할 수 있으며 등록 순서에 따라 순차적으로 실행됩니다.
1. eventTarget.addEventListener(유형,리스너[,useCapture])
- 유형: 클릭, 마우스 오버 등의 이벤트 유형 문자열, 여기에 가져오지 않도록 주의
- 리스너: 이벤트 처리 기능, 이벤트 발생 시 리스닝 기능이 호출됩니다.
- useCapture: 선택적 매개변수는 부울 값이며 기본값은 false입니다. DOM 이벤트 스트림을 읽은 후 다음에 대해 자세히 알아보십시오.
2. eventTarget.attachEvent(eventNameWithOn, 콜백)
- eventNameWithOn: 이벤트 클래스 문자열, onclick, onmouseover, 여기서는 on
- callback: 이벤트 처리 기능, 대상이 이벤트를 터치하면 콜백 기능이 호출됩니다.
2. 이벤트 삭제(언바인드 이벤트)
전통적인 방법
eventTarget.onclick = null
이벤트 수신 방법
- eventTarget.removeEventListener(type,listener[,useCapture]);
- eventTarget.detachEvent(eventNameWithOn, callback); attachEvent와 함께 사용
6.4, DOM 이벤트 흐름
이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다. 이벤트가 발생하면 특정 순서로 요소 노드 간에 전파됩니다. 이 전파 프로세스는 DOM 이벤트 흐름 이벤트 버블링입니다. IE가 처음 제안되었으며,
가장 구체적인 요소 에 의해 이벤트가 시작되고 요소가 수신된 다음 단계적으로 DOM의 최상위 노드로 전파됩니다. 상향식
이벤트 캡처 : Netscape는 먼저 DOM의 최상위 노드에서 시작한 다음 가장 구체적인 요소 수신 프로세스로 전파한다고 제안했습니다. 위에서 아래로
이벤트 버블링:
1. 요소의 이벤트가 발생하면 해당 요소의 모든 상위 요소에서 동일한 이벤트(같은 이름의 이벤트)가 순차적으로 트리거됩니다. 이 프로세스를 이벤트 버블링이라고 합니다.
2. 이벤트 버블링은 기본적으로 존재하며 이벤트를 현재 요소로 제한하려면 이벤트 흐름을 중지해야 합니다. 이벤트 흐름을 중지하려면 이벤트 개체를 가져와야 합니다.알아채다:
- 캡처 또는 버블링의 한 단계만 js에서 실행할 수 있습니다.
- onclick 및 attachEvent는 버블링 단계만 가져올 수 있습니다.
- addEventListener(type,listener[,useCapture])의 세 번째 매개 변수가 true인 경우: 이벤트 캡처 단계에서 이벤트 핸들러가 호출됨을 의미하고, false(작성되지 않음/기본값): 이벤트 핸들러가 이벤트 캡처 단계 동안 호출됨을 의미합니다. 이벤트 버블링 단계
버블링 방지
e.stopPropagation();
e.cancelBubble = true;
자식 요소가 이벤트를 버블링하지 못하게 막으면 부모 요소와 조부모 요소는 응답하지 않지만 이때 부모 요소가 이벤트를 트리거하면 조부모 요소는 여전히 반응합니다
6.5, 이벤트 객체
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
eventTarget.onclick = function(event) {}
1. event 就是一个事件对象 事件绑定的回调函数的第一个参数就是 事件对象
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
공식 설명: 이벤트 객체는 키보드 키의 상태, 마우스의 위치, 마우스 버튼의 상태 등 이벤트의 상태를 나타냄 간단한 이해:
이벤트 발생 후 관련된 일련의 이벤트 이벤트가 발생하고 관련 정보 수집이 이 이벤트 객체 이벤트에 배치되며 많은 속성과 메소드가 있습니다.
이벤트 개체의 공통 속성 및 메서드
| 이벤트 객체 속성 방식 | 설명하다 |
|---|---|
| e.대상 | 이벤트를 트리거한 객체 기준을 반환합니다. |
| e.타입 | on 없이 click mouseover와 같은 이벤트 유형 반환 |
| e.preventDefault() | 이 방법은 링크 점프를 허용하지 않는 것과 같은 기본 동작 표준을 방지합니다. |
| e.stopPropagation() | 버블링 방지 기준 |
| return false를 사용하면 기본 동작을 방지 할 수도 있습니다. | 반환 후 코드는 실행되지 않고 기존 등록 방법에만 제한되며 호환성 문제가 없습니다. |
e.target과 이것의 차이점
e.target은 이벤트를 트리거한 객체(요소)를 반환합니다. 이것은 이벤트를 바인딩하는 객체(요소)를 반환합니다.
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
// 区别：e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target); //div
console.log(this); //div
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this); //ul
console.log(e.currentTarget); //ul
// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
console.log(e.target); //li
})
</script>
6.6 이벤트 위임
원칙: 이벤트 리스너는 부모 노드에 설정한 다음 버블링 원칙을 사용하여 각 자식 노드의 설정에 영향을 미칩니다.
기능: DOM을 한 번만 조작하므로 프로그램 성능이 향상됩니다.
6.5 ul에 대해 click 이벤트를 등록한 후 내부의 li을 클릭할 때 event.target을 사용하여 현재 li을 얻을 수 있으며, li을 클릭하면 이벤트가 ul까지 버블링되고 ul에 등록된 경우 이벤트가 발생합니다. 이벤트, 이벤트 모니터링 장치가 트리거됩니다.
6.7, 이벤트 유형
| 마우스 이벤트 | 포커스 이벤트 | 키보드 이벤트 | 텍스트 이벤트 |
|---|---|---|---|
| 마우스 트리거 | 양식에 커서가 있음 | 키보드 트리거 | 양식 입력 트리거 |
6.7.1 마우스 이벤트 및 해당 개체
| 마우스 이벤트 | 설명하다 |
| 온 클릭 | 마우스 왼쪽 클릭으로 트리거 |
| 온마우스오버 / 온마우스아웃 | 마우스오버/탈퇴 트리거 |
| onmouseenter/onmouseleave(버블링 없음/권장) | 마우스오버/탈퇴 트리거(버블링 없음/권장) |
| 온마우스무브 | 마우스 움직임에 의해 트리거됨 |
| 온마우스업 / 온마우스다운 | 마우스 업/다운 트리거 |
| mouseover와 mouseenter의 차이점 : 특정 노드에서 트리거될 때 마우스가 노드에 있는 한 mouseover 이벤트는 여러 번 트리거되지만 mouseenter 이벤트는 한 번만 트리거됩니다. | |
신청:
| 마우스 선택 비활성화 | document.addEventListener('contextmenu',function(e{e.preventDefault();}) |
| 禁止鼠标右键 | document.addEventListener('selectstart', function(e){e.preventDefault();}) |
6.7.2 键盘事件及其对象
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发，最常用，识别所有的键（包括功能键），不区分字母大小写 |
| onkeydown | 某个键盘按键被按下时触发，识别所有的键（包括功能键），不区分字母大小写 |
| onkeypress | 某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头 退格 等，区分字母大小写 |
三个事件的执行顺序是：keydown–keypress–keyup
键盘对象属性keyCode：返回该键值的ASCII值，我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
七、DOM小结
关于DOM，主要针对的是页面的元素操作，主要有创建，增，删，改，查，属性操作，事件操作
| 创建 |
|
| 增 | 1、appendChild 2、insertBefore |
| 删 | 1、removeChild |
| 改 | 主要修改dom的元素属性，dom元素的内容、属性、表单的值等 修改元素属性：src、href、title 等 修改普通元素内容：innerHTML、innerText 修改表单元素：value、type、disabled 修改元素样式：style、className |
| 查 | 주로 요소 조회를 위해 DOM에서 제공하는 API 메서드를 얻 습니다 . ) 형제(previousElementSibling, nextElementSibling) 옹호 |
| 속성 조작 | 주로 사용자 지정 속성의 경우 setAttribute: dom의 속성 값 설정 getAttribute: dom의 속성 값 가져오기 removeAttribute: 속성 제거 |
| 이벤트 액션 | 이벤트 등록, 이벤트 스트림, 이벤트 객체 |