大家好，今天我们来花 1 分钟来学习 DOM 相关的基础操作的第四部分，内容虽然简单，但是还是有必要归纳总结的，希望这些整理对大家有所帮助。

1、判断鼠标左键和右键点击

mousedown 和 mouseup 事件处理程序让我们知道单击了哪个鼠标按钮

ele.addEventListener('mousedown', function (e) {
    // e.button === 0: 鼠标左键
    // e.button === 1: 鼠标中间的键
    // e.button === 2: 鼠标右边的键
    // e.button === 3: 滑轮往后的按键
    // e.button === 4: 滑轮往前的按键
});

2、当页面加载完时执行操作

const ready = function (cb) {
  // Check if the `document` is loaded completely
  document.readyState === "loading"
    ? document.addEventListener("DOMContentLoaded", function (e) {
        cb();
      })
    : cb();
};
// Usage
ready(function() {
    // Do something when the document is ready
    ...
});

3、获取DOM元素的CSS样式

我们可以通过 getComputedStyle 方法获取所有相关的 CSS 样式：

const styles = window.getComputedStyle(ele, null);

接下来，就很容易获得相关样式的值：

// Get the background color
const bgColor = styles.backgroundColor;

对于具有以连字符 (-) 开头的供应商前缀的样式，我们可以通过传递样式值来获取：

const textSizeAdjust = styles['-webkit-text-size-adjust'];

getPropertyValue 方法产生相同的结果：

const bgColor = styles.getPropertyValue('background-color');
// Or turn the parameter to camelCase format:
const bgColor = styles.getPropertyValue('backgroundColor');

4、获取或设置文档标题

4.1、获取文档标题

const title = document.title;

4.2、设置文档标题

document.title = 'Hello World';

5、获取或设置 HTML元素

5.1、获取 HTML 元素

// Get the HTML
const html = ele.innerHTML;

5.2、设置 HTML

// Set the HTML
ele.innerHTML = '<h1>Hello World!</h1>';

6、获取、设置和删除属性

6.1、获取属性的值

// Get the `title` attribute of a link element
const title = link.getAttribute('title');

6.2、设置属性值

// Set the width and height of an image
image.setAttribute('width', '100px');
image.setAttribute('height', '120px');

6.3、移除属性值

// Remove the `title` attribute
ele.removeAttribute('title');

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载