JavaScrpit DOM编程知识点总结~超详细

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

we前端知识总结专栏收录该内容

12 篇文章

订阅专栏

本文介绍了JavaScript中ES5和ES6在操作DOM节点上的差异，如getElementById、getElementsByClassName与querySelector、querySelectorAll的使用。同时，讲解了如何使用className和classList进行元素样式操作，以及如何设置和清除定时器。此外，还涵盖了JS中的子节点操作，如parentElement、nextElementSibling等，并讨论了变量声明的区别，如var、const和let。最后，概述了事件处理，包括stopPropagation、preventDefault和addEventListener。

希望对各位来说，有点帮助。

ES5引入节点：

document.getElementById();

document.getElementsByClassName();

ES6引入节点：

document.querySelector();

document.querySelectorAll();

JS语法：

.className='';

.classList.add('');

.classList.remove(");

JS时间器:

setInterval(); 计时器 setInterval(function (){},xxx);

setTimeout(); 定时器

clearInterval();

clearTimeout();

ES5和ES6不同的地方：

ES5 通过var来定义变量

ES6 新增了const 和 let 来定义变量

JS子随兄弟节点：

const current = ul.querySelector('.current');

.parentElement

.previousElementSibling 邻居兄弟

.nextElementSibling 找下一个兄弟

.nextSibling

.firstElementChild

.lastElementChild

.children 全子元素

JS创建、修改、插入和克隆节点: