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

1、获取、设置和删除 data 属性

1.1、获取数据属性的值

// Get the `data-message` attribute of the `ele` element
const message = ele.getAttribute('data-message');

// Or
const message = ele.dataset.message;

1.2、设置数据属性的值

ele.setAttribute('data-message', 'Hello World');

// Or
ele.dataset.message = 'Hello World';

1.3、删除数据属性

ele.removeAttribute('data-message');
// Or
delete ele.dataset.message;

2、获取元素的兄弟节点

2.1、获取上一个兄弟节点

const prev = ele.previousSibling;

2.2、获取下一个兄弟节点

const next = ele.nextSibling;

2.3、获取所有兄弟节点

// Get the parent node
const parent = ele.parentNode;
// Filter the children, exclude the element
const siblings = [].slice.call(parent.children).filter(function (child) {
    return child !== ele;
});

3、获取所选上传文件的大小

在下面的标记中，我们有两个由不同 id 属性定义的元素。 id=“size” 元素将用于显示从 id=“upload” 元素中选择的文件的大小。

<input type="file" id="upload" />
<div id="size"></div>

我们监听文件输入的 change 事件，通过 e.target.files 获取选中的文件。可以从第一个（也是唯一一个）文件的 size 属性中检索所选文件的文件大小（以字节为单位）。

// Query the elements
const fileEle = document.getElementById('upload');
const sizeEle = document.getElementById('size');
fileEle.addEventListener('change', function (e) {
    const files = e.target.files;
    if (files.length === 0) {
        // Hide the size element if user doesn't choose any file
        sizeEle.innerHTML = '';
        sizeEle.style.display = 'none';
    } else {
        // File size in bytes
        sizeEle.innerHTML = `${files[0].size} B`;
        // Display it
        sizeEle.style.display = 'block';
    }
});

格式化文件大小

文件大小的输出还有改进的余地。我们可以将其转换为以 kB、MB、GB 和 TB 为单位的可读格式，而不是以字节显示。

为此我们创建了以下 formatFileSize 函数方法来格式化文件大小：

// Convert the file size to a readable format
const formatFileSize = function (bytes) {
    const sufixes = ['B', 'kB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sufixes[i]}`;
};

// Display the file size
sizeEle.innerHTML = formatFileSize(files[0].size);

4、获取元素的文本内容

返回 ele 元素及其子元素的原始文本内容。排除所有 HTML 标记。

const text = ele.textContent;

5、返回上一个页面

history.back();
// Or
history.go(-1);

6、在其他元素之后或之前插入一个元素

6.1、之后插入

在 refEle 元素之后插入 ele 元素：

refEle.parentNode.insertBefore(ele, refEle.nextSibling);
//或
refEle.insertAdjacentElement('afterend', ele);

6.2、之前插入

在 refEle 元素之前插入 ele 元素：

refEle.parentNode.insertBefore(ele, refEle);
// 或
refEle.insertAdjacentElement('beforebegin', ele);

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