어제는 BOM을 배웠고 오늘은 DOM과 이벤트를 배웠는데 이야기하기 전에 js 선택자에 대해 이야기해야겠습니다.
1. js 선택기
- document.getElementById() ID 이름으로 얻은 요소는 고유합니다.
- document.getElementsByTagName() 태그 이름으로 요소 가져오기, 의사 배열 가져오기
- document.getElementsByClassName() 클래스 이름으로 요소를 가져오고 의사 배열을 가져옵니다.
- document.getElementsByName() 의사 배열인 태그의 이름 속성의 속성 값을 통해 요소를 가져옵니다.
- document.querySelector()는 css 선택자를 통해 요소를 얻고 의사 배열을 얻습니다.
document.querySelectorAll()은 css 선택자를 통해 모든 요소를 얻습니다.
둘, DOM
소개하다:
- DOM 문서 객체 모델, 문서 객체 모델. 우리는 웹 페이지의 모든 "사물"을 "객체"라고 생각할 수 있습니다.
- DOM은 W3C에서 공식화한 웹 페이지 표준 또는 규칙이며 이 표준은 브라우저에서 "객체" 형태로 구현됩니다.
- DOM의 공식 정의: DOM은 스크립트, 동적 액세스 또는 작업, 웹 페이지 콘텐츠, 웹 페이지 모양 및 웹 페이지 구조를 활성화할 수 있습니다.
분류:
- Core DOM: HTML 문서와 XML 문서를 동시에 조작하기 위한 공통 속성 및 메서드를 제공합니다.
- HTML DOM: HTML 문서에 제공되는 전용 속성 메소드입니다.
- XML DOM: XML 문서에 대한 특정 속성 및 메서드를 제공합니다. (배우다)
- CSS DOM: CSS 조작을 위한 속성 및 메서드를 제공합니다.
- 이벤트 DOM: 이벤트 객체 모델. 예: onclick, onload 등
- DOM 트리(트리): JS는 트리 구조의 마크업을 설명합니다.
핵심 DOM 작업:
1. DOM의 요소 노드 유형을 파악합니다.
- 문서 문서 노드는 전체 웹 페이지를 나타내며 HTML 태그를 나타내지 않습니다. 그러나 그것은 html 노드의 부모 노드입니다
- 요소 요소 노드는 모든 HTML 마크업을 참조합니다. 각 HTML 태그를 "요소 노드"라고 합니다. 텍스트 노드와 속성 노드를 가질 수 있습니다.
- 속성 속성 노드. HTML 태그의 속성을 참조합니다.
- 댓글 댓글 노드.
- 텍스트 노드. 노드 트리의 맨 아래 노드입니다.
- 이름 문제:
a. html에서는 mark, label
b. css에서는 element, parent element, child element
c. js에서는 node라고 함
2. DOM의 액세스 노드:
- js에서는 선택기를 통해 직접 얻을 수 있는 마크업 문서 객체를 얻을 필요가 없습니다.
— webpage
document.documentElement — html
document.body — body
document.head — head
document.title — title - 다음 메서드는 빈 텍스트 노드를 포함하여 모든 유형의 노드를 가져옵니다.
- firstChild: 첫 번째 자식 노드
- lastChild: 마지막 자식 노드
- childNodes: 자식 노드 목록, 배열 childNodes[0]
- parentNode: 부모 노드
- nodeName: 노드 이름은 레이블 이름을 반환합니다.
- nodeValue: 속성 노드의 속성 값
- nodeType: 노드 유형, 반환 값은 숫자
참고: 노드가 요소 노드인 경우 nodeType 속성은 1을 반환하고 noneName은 이름을 대문자로 반환합니다. 속성 노드는 2를 반환합니다. 반환 3은 텍스트 노드입니다. Return 8은 주석 노드입니다. - 다음 메서드는 빈 테이블 텍스트 노드를 반환하지 않습니다.
- firstElementChild: 현재 요소 노드의 첫 번째 요소 자식 노드를 가져옵니다.
- lastElementChild: 현재 요소 노드의 마지막 요소 하위 섹션을 가져옵니다.
- previousElementSibling: 현재 요소의 이전 요소 찾기
- nextElementSibling: 현재 요소의 다음 요소를 찾는 것은 형제 관계입니다.
- parentNode: 현재 노드의 부모 요소 가져오기
- children: 다른 노드를 반환하지 않고 모든 자식 노드 가져오기
3. 노드 속성에 대한 작업:
- setAttribute(name,value): 노드에 속성 추가
- getAttribute(name): 노드 속성 값 가져오기
- getAttributeNode(name): 노드 속성 및 속성 값 가져오기
- removeAttribute(name): 노드의 속성 삭제
4. 노드 생성
- 노드(엘리먼트) 생성 매개변수는 생성된 노드의 이름 그대로, 꺾쇠괄호 설정 필요 없음
- document.createElement(tagName): 노드 생성
- appendChild(추가된 노드): 노드를 다른 노드에 추가합니다.
- insertBefore(앞노드, 뒤노드): 기존 서브노드 앞에 새로운 서브섹션을 삽입할 수 있습니다.
5. 노드 삭제
- removeChild(name): 자식 요소 삭제
- remove(): 현재 요소 삭제
- parentNode.remove() : 자식 요소를 통해 부모 요소 삭제
DOM 크기:
- box.style.width: 너비 인라인
box.style.height: 높이 인라인
참고: 인라인 스타일만 가져올 수 있습니다. - box.clientWidth
box.clientHeight
참고: 요소의 크기를 반환하지만 단위가 없으며 기본값은 px이며 다른 단위인 경우 자동으로 px로 변환됩니다. 인라인 및 기타 스타일 가져오기, 얻은 너비 및 높이에는 패딩이 포함됩니다. - box.clientLeft: 왼쪽 테두리의 너비를 가져옵니다.
box.clientTop: 위쪽 테두리의 너비를 가져옵니다. - box.scrollHeight: 스크롤 높이 가져오기
box.scrollWidth: 스크롤 너비 가져오기 - box.offsetWidth
box.offsetHeight
참고: 테두리 및 패딩을 포함하여 가장 안정적이고 자주 사용되는 - offsetLeft: 요소에서 자체 왼쪽까지의 거리가 참조로 위치해야 합니다.
offsetTop: 요소에서 자체 상단까지의 거리 offsetParent
: 위치 지정된 요소의 부모
참고: 부모 요소가 위치되지 않은 경우 참조는 위치 지정 참조가 있는 경우 자신의 왼쪽부터의 위치입니다. 부모 요소의 왼쪽 위치입니다.
获取元素
//参数1表示要获取样式的元素 参数2表示伪对象
console.log(getComputedStyle(obj, null).attr);
//只有IE浏览器支持，其他浏览器都不支持
console.log(obj.currentStyle.attr);
处理兼容问题：
function getStyle(obj, attr){
//因为IE浏览器是不识别getComputeStyle方法的，设置了window后IE会识别window不会报错
if(window.getComputedStyle){
return getComputedStyle(obj, null)[attr];
}else{
return ele.currentStyle[attr];
}
}
이 객체:
- 함수가 괄호와 함께 호출되면 함수의 this는 창 객체입니다.
참고: 엄격 모드에서 'use strict'는 함수 이름()이 함수를 호출하며 this는 창을 가리킬 수 없습니다. - 함수는 객체의 메소드로 사용되며 객체 포인트가 호출되고 함수의 this가 객체가 됩니다.
- 함수가 이벤트 처리 함수인 경우 함수의 this는 this this를 트리거하는 개체, 즉 이벤트 호출자입니다.
- 타이머가 함수를 호출하면 이것이 window 객체입니다.
- 배열에 저장된 함수는 배열 인덱스 뒤에 괄호를 추가하여 호출합니다.
3. 이벤트
1. 이벤트 트리거:
- 인라인 모델: 이 모델은 이벤트를 처리하는 가장 전통적이고 간단한 방법입니다. 인라인 모델에서 이벤트 핸들러는 주어진 이벤트를 처리하는 HTML 태그의 속성입니다. 초기에는 인라인이 많이 사용되었지만 HTML과 혼합되어 HTML과 분리되지 않았습니다. W3C에서 제정한 HTML 및 JavaScript 코드 수준 분리 원칙 위반
- 스크립팅 모델: 인라인 모델의 문제를 해결하기 위해 JavaScript에서 이벤트를 처리할 수 있습니다. 이 접근 방식은 스크립트 모델입니다.
2. 마우스 이벤트:
- onclick: 사용자가 마우스 버튼을 클릭하거나 Enter 키를 누를 때 트리거됩니다.
- ondblclick: 사용자가 기본 마우스 버튼을 두 번 클릭할 때 트리거됨 - 두 번 연속 클릭
- onmousedown: 사용자가 마우스를 누르고 아직 팝업하지 않은 경우 트리거됩니다. 팝업 창 테스트가 가장 분명합니다.
- onmouseup: 사용자가 마우스 버튼을 놓을 때 발생 - 마우스가 올려져 있음
- onmouseover: 마우스가 요소 위로 이동할 때 트리거됩니다.
- onmouseout: 마우스가 요소 밖으로 이동할 때 트리거됩니다.
- onmousemove: 마우스 포인터가 요소 위로 이동할 때 트리거됩니다.
3. 키보드 이벤트:
- onkeydown: 사용자가 키보드의 아무 키나 누를 때 트리거되며, 계속 누르고 있으면 반복적으로 트리거됩니다.
- onkeyup: 사용자가 키보드의 키를 놓을 때 발생 - 키를 떼면 발생
- onkeypress: 사용자가 키보드의 문자 키를 누를 때 트리거됩니다. 누르고 있으면 반복적으로 트리거되며 트리거할 수 없습니다. 예: ALT, CTRL, SHIFT, ESC — 문자 키 아님
- 키보드 이벤트에 속하지 않음 - 이벤트 객체에 속함
keyCode는 현재 키의 ASCII 코드를 반환하여 키보드의 어떤 키가 눌려졌는지 알 수 있으며 이벤트 객체와 함께 사용해야 합니다. 어떤 키를 눌렀는지 확인할 수 있습니다.
var box = document.querySelector('div');
//使div根据不同的方向键向不同的位置移动
onkeydown = function(e){
//左37 右39 上38 下40
//console.log(e.keyCode);
var speed = 10;
//组合键：altKey、ctrlKey、shiftKey
if(e.ctrlKey){
speed = 100;
}
switch(e.keyCode){
case 39 :
box.style.left = box.offsetLeft + speed + 'px';
break;
case 37 :
box.style.left = box.offsetLeft - speed + 'px';
break;
case 38 :
box.style.top = box.offsetTop - speed + 'px';
break;
case 40 :
box.style.top = box.offsetTop + speed + 'px';
break;
}
}
4. HTML 이벤트:
- onload: 페이지가 완전히 로드될 때 창에서 또는 프레임셋이 로드될 때 프레임셋에서 트리거됩니다.
- onselect: 사용자가 텍스트 상자(입력 또는 텍스트 영역)에서 하나 이상의 문자를 선택할 때 트리거됩니다.
- onselectstart: 주로 사용자가 웹 페이지에서 텍스트의 기본 동작을 선택하지 못하도록 하는 데 사용됩니다.
- onchange: 사용자가 텍스트 상자(입력 또는 텍스트 영역)의 내용을 변경하고 포커스를 잃을 때 트리거됩니다.
- onfocus: 페이지 또는 요소가 포커스를 받을 때 트리거됩니다.
- onblur: 페이지 또는 요소가 포커스를 잃을 때 트리거됨
- onsubmit: 사용자가 제출 버튼을 클릭하면 해당 요소에서 실행됩니다.
- onresize: 창 또는 프레임의 크기가 변경될 때 창 또는 프레임에서 실행됩니다.
- scroll: 사용자가 스크롤 막대로 요소를 스크롤할 때 트리거됩니다.
- oncontextmenu 이벤트는 사용자가 요소를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴를 열 때 발생합니다.
5. 이벤트 개체
- 이벤트 개체(이벤트): 이벤트가 발생하면 해당 이벤트에서 사용할 수 있는 개체를 제공합니다. 이 개체에는 많은 유용한 속성과 메서드가 있습니다.
- 특징:
1. 이벤트 발생 시에만 생성되며, 처리 기능 내에서만 접근 가능
2. 처리 기능 실행 종료 후 자동 파기
键盘按下事件的兼容写法
onkeydown = function(e){
e = e || window.event;
console.log(e.keyCode)
}
6. 마우스 좌표:
- clientX: 마우스의 가로 좌표
- clientY: 마우스의 수직 좌표
- pageX: 웹 페이지의 수평 스크롤 거리를 포함한 마우스의 가로 좌표
- pageY: 페이지가 위로 스크롤되는 거리를 포함한 마우스의 수직 좌표
实现js的简单拖拽效果
<style>
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
div{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
</style>
<div></div>
<script>
//获取元素
var box = document.querySelector('div');
/*
拖拽的思路：
+ 当鼠标按下时，让div标记进行移动
+ 事件：onmousedown、onmousemove
+ 获取鼠标的坐标，然后把值赋值给div的left和top
+ 当鼠标抬起时清除移动事件
问题：
+ 问题描述当鼠标按下时进行移动时，鼠标坐标在赋值的时候，会把每次把盒子移动到原点0 0（左上）
+ 解决方案：当鼠标按下的时候就确定鼠标的坐标位置
*/
//给div绑定移动事件
box.onmousedown = function(e){
//事件对象兼容
e = e || window.event;
//求出需要从鼠标坐标上减去的距离
var l = e.clientX - box.offsetLeft;
var t = e.clientY - box.offsetTop;
console.log(l, t)
//鼠标移动事件
document.onmousemove = function(e){
//事件对象兼容
e = e || window.event;
var x = e.clientX - l;
var y = e.clientY - t;
//边界值判断
if(x<0){
x = 0;
}else if(x>=document.documentElement.offsetWidth - box.offsetWidth){
x = document.documentElement.offsetWidth - box.offsetWidth;
}
if(y<0){
y = 0;
}else if(y>=document.documentElement.offsetHeight - box.offsetHeight){
y = document.documentElement.offsetHeight - box.offsetHeight;
}
//把获取的鼠标坐标赋值给div标记
box.style.left = x + 'px';
box.style.top = y + 'px';
}
//鼠标抬起时清除鼠标移动事件
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
지난 며칠 동안 많은 것을 배웠고 음을 소화하지 못할 수도 있습니다. 아직 더 연습해야 합니다.