常用的 DOM 操作，记住它！

常年混迹于茶水间的前端攻城狮日常记录

节点关系

我们以下面 DOM 结构来讨论根据节点关系获取节点的属性

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>
</div>

父节点

// 获取的永远都是一个元素或者是 null
document.getElementById('child1').parentElement
// 获取的可能是元素、或文档节点、或文档碎片
document.getElementById('child1').parentNode

子节点

// 获取的一定是元素
document.getElementById('parent').children
// 可能获取除了元素以外的文本节点或文档碎片等
document.getElementById('parent').childNodes

⚠️ 注意：返回的数据结构是个类数组，要是需要使用数组的方法去处理，还是需要转成数组的

第一个子节点

// 获取的一定是元素
document.getElementById('parent').firstElementChild
// 获取的不一定是个啥
document.getElementById('parent').firstChild

最后一个子节点

// 获取的一定是元素
document.getElementById('parent').lastElementChild
// 获取的不一定是个啥
document.getElementById('parent').lastChild

兄弟节点

上一个兄弟节点

// 获取的一定是元素
document.getElementById('child2').previousElementSibling
// 获取的不一定是个啥
document.getElementById('child2').previousSibling

下一个兄弟节点

// 获取的一定是元素
document.getElementById('child2').nextElementSibling
// 获取的不一定是个啥
document.getElementById('child2').nextSibling

节点操作

• parentDOM.appendChild(childDOM) 追加子节点
• parentDOM.removeChild(childDOM) 删除子节点
• parentDOM.replaceChild(newDOM, oldDOM) 替换子节点
• parentDOM.insertBefore(newDOM, positionDOM) 插入子节点。这里的 positionDOM 是指你要插在哪个子节点之前
• DOM.setAttribute(key, value) 设置属性
• DOM.setAttribute(key) 获取属性

元素尺寸

⚠️ 这里注意一点，如果用 JS 来获取元素的大小，除非行内样式写了 width 和 height，否则通过 element.style.width 和 element.style.height 获取的都是 ''

offsetWidth offsetHeight

它是一个只读属性，返回该元素的像素宽度和高度，包含内边距、边框以及滚动条（如果存在且渲染的话），但不包括伪元素。并且是个整数。

scrollWidth scrollHeight

它是一个只读属性，返回该元素内容高度，包括由于溢出导致视图中不可见的内容，也包括伪元素，但是不包括内边距、边框以及滚动条。

clientWidth clientHeight

它是一个只读属性，返回该元素的内容宽，包括内边距，但是不包括边框和滚动条。也是这个整数。

getBoundingClientRect()

把这个单独拿出来是因为太好用了。尤其是用来判断元素是否在视口内。

这个方法会返回一组用来描述尺寸位置的数据，除了 width 和 height 以外，其他的 left、top 什么的都是基于视口来做的。

其实常用的还有很多，这里只记录一些对于我来说常用，但是又不是那么常用的 DOM 操作。