原生 JS DOM 常用操作大全

Answer 1

DOM (Document Object Model) 是获取与操作网页元素的关键技术。通过了解 DOM，开发者能够实现丰富的网页动态效果。以下是一些常用的 DOM 操作：

获取元素时，通常以 document 开头，如 document.getElementById，此方法能返回指定元素的引用。借助 console.dir，我们可以更深入地查看元素的属性和方法。

getElementById 和 getElementsByTagName 分别通过元素ID和标签名获取元素，但前者返回一个对象数组，因此操作元素时需遍历。getElementsByCalssName 则用于获取具有相同类名的元素集合。

querySelector 和 querySelectorAll 通过选择器来获取元素，其中选择器需前加符号，如 .box 或 #nav。而 getElementsByTagName 则返回动态集合，新增元素会自动添加到该集合。

节点获取方面，网页内容可被划分为节点，如父级、子元素节点、兄弟节点。DOM 树描述了节点之间的层级关系。

解决兼容性问题，开发者可自己封装兼容性函数，确保在不同浏览器环境下一致。

事件处理采用异步模型，通过 addEventListener 注册事件，但需注意一个事件源只能注册一个事件，否则后者会覆盖前者。移除监听事件时，需避免使用匿名函数。

鼠标事件遵循特定执行顺序，仅在连续触发 mouseover 和 mouseup 后，才会触发 click 事件，而 dbclick 需两次 click 才触发。

禁止鼠标右键菜单和禁止文本选中，可利用 document.addEventListener 对应事件并阻止默认行为。

键盘事件包括 keydown、keypress 和 keyup，它们在文本框中的行为有所不同，注意处理顺序。

滚动条事件在页面滚动时触发，通过 element.addEventListener 监听。表单事件如 change 可在值改变时触发。

事件对象提供丰富属性和方法，了解 this 与 e.target 的区别在事件冒泡时尤为重要。

鼠标事件对象包含更多详细信息，便于进行更精准的事件处理。

操作元素包括属性、样式、类名、自定义属性和节点的创建、添加、删除等。

通过设置和修改属性，如大小、颜色、位置及自定义数据，开发者能够实现丰富的交互效果。

总结，DOM 操作涵盖创建、添加、删除、修改和查询元素，是实现网页动态功能的核心。