大家好,今天我们来花 1 分钟来学习 DOM 相关的基础操作,内容虽然简单,但是还是有必要归纳总结的,希望这些整理对大家有所帮助。
注意:如果添加多个样式至 DOM 元素,IE11 不兼容。
ele.classList.add('class-name');
// Add multiple classes (Not supported in IE 11)
ele.classList.add('another', 'class', 'name');
注意:同样在DOM元素中移除多个样式,IE11 不兼容。
ele.classList.remove('class-name');
// Remove multiple classes (Not supported in IE 11)
ele.classList.remove('another', 'class', 'name');
ele.classList.toggle('class-name');
将 ele 元素添加至 target 元素内的末尾
target.appendChild(ele);
你可以在 dom 元素使用 on{eventName}
的属性,eventName 代表事件名,代码如下:
ele.onclick = function() {
...
};
// Remove the event handler
delete ele.onclick;
不推荐这种方法,主要是因为很容易造成事件覆盖的问题。
const handler = function() {
...
};
// Attach handler to the `click` event
ele.addEventListener('click', handler);
// Detach the handler from the `click` event
ele.removeEventListener('click', handler);
你可能注意到,我们将事件名称当做函数参数传递给事件绑定函数。
要计算鼠标点击事件,鼠标在元素内的相对位置,我们需要用到 getBoundingClientRect() 这个关键的方法,示例代码如下:
ele.addEventListener('mousedown', function (e) {
// Get the target
const target = e.target;
// Get the bounding rectangle of target
const rect = target.getBoundingClientRect();
// Mouse position
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
});
由于时间原因,今天分享的 DOM 基础操作专题就分享到这里,感谢你的阅读。
参考:https://github.com/1milligram/html-dom
1分钟学会如何用 JS 对象代理(proxies)实现对象的私有属性