предисловие
Недавно внутренняя библиотека компонентов пользовательского интерфейса компании была инкапсулирована во второй раз, и один из модулей должен предоставитьelement-plusизmessageДля расширения используется большое количество нативных DOM-операций, наиболее удобным способом работы с DOM является использованиеjquery, но написание компонента vue также ссылаетсяjquery, что является оскорблениемvueДа, и, наконец, полагайтесь на собственный js для достижения.
Но, если честно, как долго вы не писали нативный js в эпоху фреймворков? Прошло много времени с автора, и некоторые нативные API будут забыты, если их не написать, поэтому давайте двигаться дальше и рассматривать эти знакомые и незнакомые API!
Общие операции с DOM
Получить элемент DOM
Ele.getElementById(idName)
Найти элемент по id. Возвращается DOM элемента, если на странице есть несколько элементов с одинаковым ID, то будет возвращен только первый элемент, а несколько элементов не будут возвращены (в принципе ID один, но великие программисты. ..)
Ele.getElementsByClassName(className)
Найти по классу. то, что возвращаетсямассивныйСтруктура, чтобы выполнить обход forEach, вам нужно сначала преобразовать ее в структуру массива.
const doms = document.getElementsByClassName('xxx')
const domsArr = Array.from(doms)
domsArr.forEach(dom=>{})
Ele.getElementsByTagName(tagName)
Получить элементы по имени тега так же, как и getElementsByClassName.
Ele.querySelector(selectors) | Ele.querySelectorAll(selectors)
Это единственные API, которые поддерживают использование селекторов для поиска элементов. С этим API нам очень удобно выполнять глубокий поиск.
<div class="warp">
<p>name<p>
<p>age<p>
<div>
<p>...</p>
<script>
// 目标 获取到warp下面的p元素
1. 不使用querySelectorAll
cons warp = document.getElementsByClassName("warp")[0];
const allp = warp.getElementsByTagName(p)
2. 使用querySelectorAll
const allp = document.querySelectorAll(".warp p")
</script>
querySelector получает один элемент, querySelectorAll получает несколько элементов и возвращает структуру, подобную массиву.
Добавляйте стили в DOM
Добавляйте стили к элементам
Ele.style.width = xxx
добавить класс к элементу
Ele.className='aaa' // 设置元素的class为aaa ，如果元素上原本有class则会覆盖
Ele.classList.add("aaa") // 给Ele新增aaa
Ele.className += " aaa" // 给Ele新增aaa
Проверить, есть ли атрибут у элемента
Ele.classList.contains("aaa") // 如果Ele上面的class类名是aaa返回true，否则返回false
Управление свойствами в DOM
Добавить свойство
Ele.setAttribute("data-id", 1);
Получить стоимость недвижимости
Ele.getAttribute("data-id");
удалить атрибут
Ele.removeAttribute("data-id");
Добавление, удаление, изменение и поиск элементов dom
Создание DOM-элементов
const p = document.createElement("p");
удалить DOM-элемент
Ele.remove(); // 删除ELe
Ele.removeChild(clildEle) // 删除ELe中的子元素 childEle
копировать DOM
Ele.cloneNode( true | false )
const box = document.getElementsByClassName("box")[0];
const p = document.createElement("p");
p.innerText = "欢迎关注码不停息微信公众号";
const p2 = p.cloneNode(true); // 复制一个p 参数true标识深度复制，如果p里面有子节点也复制过来
box.appendChild(p);
box.appendChild(p2);
Как показано на рисунке, были получены два тега p, и оба они отображаются на странице.
Вставить в DOM
Ele.appendChild(ele) 在Ele的最后插入ele
Ele.insertBefore(newele,ele) // 在Ele元素中的 ele元素前插入 newele
заменить ДОМ
parentEle.replaceChild(newEle,oldEle)
<body>
<div class="box">
<h1>微信公众号</h1>
</div>
<button id="btn">变换</button>
<script>
const btnDom = document.getElementById("btn");
const box = document.getElementsByClassName("box")[0];
const h1 = document.getElementsByTagName("h1")[0];
const h2 = document.createElement("h2");
h2.innerText = "码不停息";
btnDom.onclick = function () {
box.replaceChild(h2, h1);
};
</script>
</body>
удалить DOM
EleParent.removeChild(ele) // 删除EleParent中的ele元素
Пройтись по DOM
- parentNode
Найти родительский узел указанного узла
- nextSibling
Найти следующий узел указанного узла
- previousSibling
Найти предыдущий узел указанного узла
- firstChild
Найти первую байтовую точку указанного узла
- lastChild
Найти последнюю точку байта указанного узла
- childElementCount
Возвращает количество дочерних элементов, текстовых узлов и не включает аннотации
- firstElementChild
возвращает первый дочерний элемент
- lastElementChild
Возвращает последний дочерний элемент
- previousElementSibling
Возвращает предыдущий соседний одноуровневый элемент
- nextElementSibling
Возвращает следующий соседний одноуровневый элемент
Обратите внимание, что узлы и элементы не равны
<body>
<div id="box">
<p>文件</p>
<p>文件</p>
</div>
<script>
const box = document.getElementById("box");
console.log(box.firstChild); // 打印 text节点（换行）
console.log(box.firstElementChild); // 打印p标签
</script>
</body>
Определите тип узла элемента
nodeType, всего 12 типов, см.W3C
<body>
<div id="box">
<p>文件</p>
<p>文件</p>
</div>
<script>
const box = document.getElementById("box");
console.log(box.firstChild.nodeType); // 3 文本
console.log(box.firstElementChild.nodeType); // 1 元素
</script>
</body>
Получает ширину и высоту браузера Большого шлема
const W = window.screen.width
const H = window.screen.height
Получает ширину браузера и высоту
const W = window.outerWidth;
const H = window.outerHeight;
Получить текущую ширину и высоту окна (ширину и высоту области просмотра браузера)
const W = window.innerWidth;
const H = window.innerHeight;
Получить ширину и высоту макета элемента
const W = element.offsetWidth;
const H = element.offsetHeight;
Получить ширину и высоту содержимого элемента
const W = element.scrollWidth;
const H = element.scrollHeight;
Получить ширину и высоту скрытой страницы после прокрутки
const H = document.documentElement.scrollTop;
const W = document.documentElement.scrollLeft
Получить расстояние от верхней и левой части элемента
const top = Ele.offsetTop;
const left = Ele.offsetLeft
Собственный инвентарь событий браузера
событие мыши
коллекция событий
- событие щелчка
Ele.onclick = function () {
console.log("onclick");
};
- событие двойного щелчка
Ele.ondblclick = function () {
console.log("ondblclick");
};
- событие правого клика
Ele.oncontextmenu = function () {
console.log("oncontextmenu");
};
- событие нажатия мыши
Ele.onmousedown = function () {
console.log("onmousedown");
};
- событие перемещения мыши
Ele.onmousemove = function () {
console.log("onmousemove");
};
- событие мыши вверх
Ele.onmouseup = function () {
console.log("onmouseup");
};
- мышь на случай
// 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
Ele.onmouseover = function () {
console.log("onmouseover");
};
// 鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
Ele.onmouseenter = function () {
console.log("onmouseenter");
};
- событие отключения мыши
// 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
Ele.onmouseout = function () {
console.log("onmouseout");
};
// 鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
Ele.onmouseleave = function () {
console.log("onmouseleave");
};
Полные мероприятия на основе мышей
const box = document.getElementById("box");
let nowW, nowH, flag;
box.onmousedown = function (e) {
nowW = e.clientX;
nowH = e.clientY;
flag = true;
document.onmousemove = function (e) {
if (!flag) return false;
const moveX = e.clientX - nowW;
const moveY = e.clientY - nowH;
const left = parseInt(box.style.left || 0);
const top = parseInt(box.style.top || 0);
box.style.left = left + moveX + "px";
box.style.top = top + moveY + "px";
nowW = e.clientX;
nowH = e.clientY;
};
document.onmouseup = function () {
flag = false;
};
document.onmouseleave = function () {
flag = false;
};
};
Завершить пользовательский щелчок правой кнопкой мыши на основе событий мыши
<body>
<div id="box"></div>
<div id="option">
<div class="item">复制</div>
<div class="item">放大</div>
<div class="item">搜索</div>
</div>
<script>
const box = document.getElementById("box");
const option = document.getElementById("option");
box.oncontextmenu = function (e) {
const x = e.clientX;
const y = e.clientY;
option.style.display = "block";
option.style.top = y + "px";
option.style.left = x + "px";
return false;
};
option.onclick = function () {
this.style.display = "none";
};
</script>
</body>
событие клавиатуры
коллекция событий
- keydown: запускается, когда пользователь нажимает любую клавишу на клавиатуре, и повторно запускает это событие, если его удерживать.
- нажатие клавиши: запускается, когда пользователь нажимает символьную клавишу на клавиатуре (то есть пользователь нажимает клавишу, которая может выводить символы на экран. Запускается событие нажатия клавиши), и если его удерживать, это событие будет запускаться повторно. (нажатие клавиши Esc также вызовет это событие).
- keyup: запускается, когда пользователь отпускает клавишу на клавиатуре.
Завершите перемещение div с помощью клавиш со стрелками на основе события клавиатуры
<body>
<div id="box">
<div id="move">静止</div>
</div>
<script>
const box = document.getElementById("box");
const move = document.getElementById("move");
let lefts = box.style.left || 0;
let tops = box.style.top || 0;
document.addEventListener("keydown", function (e) {
const code = e.keyCode;
move.innerHTML = "开始移动";
switch (code) {
case 38:
move.innerHTML = "上";
tops -= 5;
break;
case 40:
move.innerHTML = "下";
tops += 5;
break;
case 37:
move.innerHTML = "左";
lefts -= 5;
break;
case 39:
move.innerHTML = "右";
lefts += 5;
break;
default:
break;
}
box.style.top = tops + "px";
box.style.left = lefts + "px";
});
document.addEventListener("keyup", function () {
move.innerHTML = "静止";
});
document.addEventListener("keypress", function () {
console.log("keypress");
});
</script>
</body>
событие формы
- отправить: отправка формы
- сброс: сброс формы
- изменить: значение изменилось
- размытие: не в фокусе (без пузырей)
- фокус: фокус (без пузырьков)
window
Событие окна относится к самому окну браузера, а не к объекту документа внутри окна.
- onload: вызывается при загрузке документа и ресурса
- выгрузить: вызывается, когда пользователь покидает текущий документ и переходит к другому документу
- resize: изменение размера окна браузера
другие события
- beforeunload: событие запускается перед закрытием окна браузера
- DOMContentLoaded: событие, инициированное после загрузки объекта документа, без ожидания ресурсов, таких как стили и изображения.
- readystatechange: документ имеет свойство readyState для описания состояния загрузки документа, и изменение readyState вызовет событие readystatechange.
document.readyState === 'полная' страница загружена document.readyState === 'loading' страница загружается
- pageShow и pagehide: срабатывает каждый раз, когда пользователь просматривает страницу, чтобы закрыть ее.
Инвентаризация собственных объектов Javascript
Объект времени Дата
Некоторые часто используемые методы
-
toLocaleDateString(): преобразует часть даты объекта Date в строку в соответствии с форматом местного времени.
-
toLocaleTimeString(): преобразует временную часть объекта Date в строку в соответствии с форматом местного времени.
-
toLocaleString(): преобразовать объект Date в строку в соответствии с форматом местного времени.
-
getTime(): получить текущую метку времени
Отметка времени
function timestampToTime(timestamp) {
if (typeof timestamp != "number") return false;
if (timestamp.length === 10) timestamp = timestamp * 1000;
const date = new Date(timestamp);
Y = date.getFullYear() + "-";
M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
D = (date.getDate() < 9 ? "0" + date.getDate() : date.getDate()) + " ";
h =
(date.getHours() < 9 ? "0" + date.getHours() : date.getHours()) + ":";
m =
(date.getMinutes() < 9
? "0" + date.getMinutes()
: date.getMinutes()) + ":";
s = date.getSeconds() < 9 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
}
время до отметки времени
function timeToTimestamp(time){
const date = new Date(time);
return date.getTime()
}
Математический объект
- Math.abs(): взять абсолютное значение
Math.abs(-1) // 1
- Math.ceil(): округлить
Math.ceil(1.1) // 2
- Math.floor (): закруглен
Math.floor(1.1) // 1
- Math.round(): округлить
Math.round(1.5) // 2
- Math.max(): взять максимальное значение
Math.max(1，2，3) // 3
- Math.min(): взять минимальное значение
Math.min(1，2，3) // 1
- Math.random(): генерирует случайные числа от 0 до 1.
Math.random()
- Math.pow(): мощность
Math.pow(2,3) // == 2*2*2 == 8
- Math.sqrt(): квадратный корень
Math.sqrt(36) // 6
наконец
В этой статье грубо разобраны некоторые операции "JavaScript-ориентированного программирования", которые мы часто используем в своей работе.Возможны некоторые недочеты, и они будут постепенно исправляться на более позднем этапе. Добро пожаловать лайк + подписка😘