大家好，今天我们来花 1 分钟来学习 DOM 相关的基础操作，内容虽然简单，但是还是有必要归纳总结的，希望这些整理对大家有所帮助。
一、添加或移除样式
1、添加相关样式至对应 DOM 元素
注意：如果添加多个样式至 DOM 元素，IE11 不兼容。
ele.classList.add('class-name');//Addmultipleclasses(NotsupportedinIE11)ele.classList.add('another','class','name');
2、从 DOM 元素中移除样式
注意：同样在DOM元素中移除多个样式，IE11 不兼容。
ele.classList.remove('class-name');//Removemultipleclasses(NotsupportedinIE11)ele.classList.remove('another','class','name');
3、切换 DOM 中指定的样式
ele.classList.toggle('class-name');
二、将元素添加至指定的DOM元素内的末尾
将 ele 元素添加至 target 元素内的末尾
target.appendChild(ele);
三、添加和移除事件
1、使用 ON 属性添加事件（不推荐）
你可以在 dom 元素使用on{eventName}的属性，eventName 代表事件名，代码如下：
ele.onclick=function(){...};//Removetheeventhandlerdeleteele.onclick;
不推荐这种方法，主要是因为很容易造成事件覆盖的问题。
2、使用addEventListener 方法
consthandler=function(){...};//Attachhandlertothe`click`eventele.addEventListener('click',handler);//Detachthehandlerfromthe`click`eventele.removeEventListener('click',handler);
你可能注意到，我们将事件名称当做函数参数传递给事件绑定函数。
四、计算鼠标在元素内的相对位置
要计算鼠标点击事件，鼠标在元素内的相对位置，我们需要用到 getBoundingClientRect() 这个关键的方法，示例代码如下：
ele.addEventListener('mousedown',function(e){//Getthetargetconsttarget=e.target;//Gettheboundingrectangleoftargetconstrect=target.getBoundingClientRect();//Mousepositionconstx=e.clientX-rect.left;consty=e.clientY-rect.top;});
总结
由于时间原因，今天分享的 DOM 基础操作专题就分享到这里，感谢你的阅读。
参考：/1milligram/html-dom
更多1分钟专题
1分钟搞懂什么是 JS 代理对象（proxies）
1分钟学会如何用 JS 对象代理（proxies）实现对象的私有属性
1分钟学会 2 个复制文本到剪贴板的方法
1分钟学会如何用 JS 计算文本的宽度
1分钟学会个通用妙招，让你知道用户看了啥
1分钟用 CSS + HTML 实现个按字母吸附滑动的列表（类似手机通讯录列表）
「1分钟学JS基础」移除最后一个字符、Promise.allSettled()的使用、日期数组排序
「1 分钟学 DOM 基础操作」添加和移除元素样式 添加至元素内 添加和移除事件 计算鼠标相对元素的位置...
