Вчера я изучил BOM, а сегодня я изучил DOM и события, но прежде чем я расскажу об этом, я должен поговорить о селекторах js.
1. js-селектор
- document.getElementById() Элемент, полученный по имени идентификатора, уникален
- document.getElementsByTagName() Получить элементы по имени тега, получить псевдомассив
- document.getElementsByClassName() Получает элементы по имени класса и получает псевдомассив
- document.getElementsByName() Получает элементы через значение атрибута атрибута имени тега, который является псевдомассивом.
- document.querySelector() получает элементы с помощью селекторов css и получает псевдомассив
document.querySelectorAll(), получает все элементы с помощью селекторов css
Два, ДОМ
представлять:
- Объектная модель документа 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.
- узел комментария комментария.
- текстовый узел. является нижним узлом дерева узлов
- Проблема с названием:
а. В html это называется метка, метка
б. В css это называется элемент, родительский элемент, дочерний элемент
в. В js это называется узел
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 — это текстовый узел. Возврат 8 — это узел комментария. - Следующие методы не будут возвращать пустые текстовые узлы таблицы.
- firstElementChild: получить первый дочерний узел элемента текущего узла элемента
- lastElementChild: получить подраздел последнего элемента текущего узла элемента
- предыдущаяElementSibling: найти предыдущий элемент текущего элемента
- nextElementSibling: найти следующий элемент текущего элемента, который является родственным отношением
- parentNode: Получить родительский элемент текущего узла
- Children: получить все дочерние узлы, не возвращая другие узлы
3. Операция над атрибутами узлов:
- setAttribute(имя,значение): добавить атрибут к узлу
- getAttribute(name): получить значение атрибута узла
- getAttributeNode(name): получить атрибут узла и значение атрибута
- removeAttribute(name): удалить атрибут узла
4. Создайте узел
- Создать узел (элемент) Параметром является непосредственно имя создаваемого узла, угловые скобки ставить не нужно
- document.createElement(tagName): создать узел
- appendChild (добавленный узел): добавить узел к другим узлам.
- insertBefore (передний узел, задний узел): новый подраздел может быть вставлен перед существующим подузлом.
5. Удалить узел
- removeChild (имя): удалить дочерние элементы
- remove(): удалить текущий элемент
- parentNode.remove(): удалить родительский элемент через дочерний элемент
Размер ДОМа:
- 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 функции является объектом окна.
Примечание. В строгом режиме «использовать строгий» имя функции () вызывает функцию, это не может указывать на окно - Функция используется как метод объекта, вызывается точка объекта, а this функции является объектом
- Когда функция является функцией обработки событий, this функции — это объект, который запускает это this — инициатор события.
- Когда таймер вызывает функцию, это объект окна
- Функция, хранящаяся в массиве, вызывается путем добавления круглых скобок после индекса массива, это массив
3. События
1. Триггер события:
- Встроенная модель: эта модель является наиболее традиционным и простым способом обработки событий. Во встроенной модели обработчик события — это атрибут тега HTML, который обрабатывает данное событие. Хотя поначалу инлайн чаще использовался, он смешивается с HTML и не отделяется от HTML. Нарушает принцип разделения уровней кода HTML и JavaScript, установленный W3C.
- Модель сценариев. Чтобы решить проблему встроенной модели, она позволяет нам обрабатывать события в JavaScript. Этот подход является сценарной моделью.
2. События мыши:
- onclick: срабатывает, когда пользователь нажимает кнопку мыши или клавишу ввода.
- 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: срабатывает в окне или фрейме при изменении размера окна или фрейма
- прокрутка: срабатывает, когда пользователь прокручивает элемент с помощью полосы прокрутки
- Событие 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>
Я многому научился за последние несколько дней, и, возможно, я не смогу переварить записи, мне все еще нужно больше практиковаться.