前端开发者的必备知识宝库 —— 史上最全JavaScript domAPI整理（建议收藏）

分手后的思念是犯贱 2022-10-06 06:49 78阅读 0赞

### 前端开发者的必备知识宝库 —— JavaScript domAPI整理 ###

*   *  1. 节点类型
     *  2. Node类型
     *  3. Document类型
     *  4. Element类型
     *  5. attr类型
     *  6. Text类型
     *  7. 表格操作
     *  8. 样式操作
     *  9. 大小和偏移
     *  10. FAQ

*  对一般兼容性和特点做了标识（暖暖的，很贴心~）
 *  包含新出的各类API（简直不要太爽）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

## 1. 节点类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">节点类型</th> 
   <th>节点值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">标签节点(Element)</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td align="left">属性节点(Attr)</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td align="left">文本节点(Text)</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td align="left">CDATA节点(CDATASetion)</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td align="left">实体引用节点(EntityReference)</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td align="left">实体节点(Entity)</td> 
   <td>6</td> 
  </tr> 
  <tr> 
   <td align="left">处理指令节点(ProcessingInstruction)</td> 
   <td>7</td> 
  </tr> 
  <tr> 
   <td align="left">注释节点(Comment)</td> 
   <td>8</td> 
  </tr> 
  <tr> 
   <td align="left">文档节点(Document)</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td align="left">文档类型节点(DocumentType)</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td align="left">文档片段节点(DocumentFragment)</td> 
   <td>11</td> 
  </tr> 
  <tr> 
   <td align="left">DTD声明节点(Notation)</td> 
   <td>12</td> 
  </tr> 
 </tbody> 
</table>

## 2. Node类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">nodeType</td> 
   <td>节点类型</td> 
  </tr> 
  <tr> 
   <td align="left">nodeName</td> 
   <td>节点名</td> 
  </tr> 
  <tr> 
   <td align="left">nodeValue</td> 
   <td>节点值</td> 
  </tr> 
  <tr> 
   <td align="left">childNodes</td> 
   <td>子节点</td> 
  </tr> 
  <tr> 
   <td align="left">parentNode</td> 
   <td>父节点</td> 
  </tr> 
  <tr> 
   <td align="left">ownerDocument</td> 
   <td>文档节点</td> 
  </tr> 
  <tr> 
   <td align="left">previousSibling</td> 
   <td>上一个节点</td> 
  </tr> 
  <tr> 
   <td align="left">nextSibling</td> 
   <td>下一个节点</td> 
  </tr> 
  <tr> 
   <td align="left">firstChild</td> 
   <td>第一个子节点</td> 
  </tr> 
  <tr> 
   <td align="left">lastChild</td> 
   <td>最后一个子节点</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">remove()</td> 
   <td>获取属性值 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">before()</td> 
   <td>在节点前插入 [兼容性较差]</td> 
  </tr> 
  <tr> 
   <td align="left">after()</td> 
   <td>在节点前插入 [兼容性较差]</td> 
  </tr> 
  <tr> 
   <td align="left">prepend()</td> 
   <td>在第一个子节点前插入 [兼容性较差]</td> 
  </tr> 
  <tr> 
   <td align="left">append()</td> 
   <td>在最后一个子节点后插入 [兼容性较差]</td> 
  </tr> 
 </tbody> 
</table>

> ## 3. Document类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">documentElement</td> 
   <td>html标签</td> 
  </tr> 
  <tr> 
   <td align="left">head</td> 
   <td>head标签 [ie9+]</td> 
  </tr> 
  <tr> 
   <td align="left">body</td> 
   <td>body标签</td> 
  </tr> 
  <tr> 
   <td align="left">URL</td> 
   <td>当前页url</td> 
  </tr> 
  <tr> 
   <td align="left">referrer</td> 
   <td>来源页url</td> 
  </tr> 
  <tr> 
   <td align="left">domain</td> 
   <td>页面域名</td> 
  </tr> 
  <tr> 
   <td align="left">images</td> 
   <td>所有图片集合</td> 
  </tr> 
  <tr> 
   <td align="left">cookie</td> 
   <td>cookie信息</td> 
  </tr> 
  <tr> 
   <td align="left">title</td> 
   <td>页面标题</td> 
  </tr> 
  <tr> 
   <td align="left">activeElement</td> 
   <td>当前焦点元素</td> 
  </tr> 
  <tr> 
   <td align="left">documentMode</td> 
   <td>文档模式</td> 
  </tr> 
  <tr> 
   <td align="left">readyState</td> 
   <td>文档状态</td> 
  </tr> 
  <tr> 
   <td align="left">doctype</td> 
   <td>文档类型声明</td> 
  </tr> 
  <tr> 
   <td align="left">scripts</td> 
   <td>脚本集合</td> 
  </tr> 
  <tr> 
   <td align="left">forms</td> 
   <td>form标签集合</td> 
  </tr> 
  <tr> 
   <td align="left">children</td> 
   <td>元素类型的子节点集合</td> 
  </tr> 
  <tr> 
   <td align="left">defaultView</td> 
   <td>document关联的window对象</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">getElementById()</td> 
   <td>返回对应id的元素</td> 
  </tr> 
  <tr> 
   <td align="left">getElementsByName()</td> 
   <td>返回对应名称元素集合</td> 
  </tr> 
  <tr> 
   <td align="left">getElementsByTagName()</td> 
   <td>返回对应标签名元素集合</td> 
  </tr> 
  <tr> 
   <td align="left">getElementsByClassName()</td> 
   <td>返回指定类名的元素集合 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">querySelector()</td> 
   <td>返回符合选择器的第一个元素</td> 
  </tr> 
  <tr> 
   <td align="left">querySelectorAll()</td> 
   <td>返回符合选择器的元素集合</td> 
  </tr> 
  <tr> 
   <td align="left">createElement()</td> 
   <td>创建元素节点</td> 
  </tr> 
  <tr> 
   <td align="left">createTextNode()</td> 
   <td>创建文本节点</td> 
  </tr> 
  <tr> 
   <td align="left">createAttribute()</td> 
   <td>创建属性节点</td> 
  </tr> 
  <tr> 
   <td align="left">createComment()</td> 
   <td>创建注释节点</td> 
  </tr> 
  <tr> 
   <td align="left">createDocumentFragment()</td> 
   <td>创建空的 DocumentFragment 对象</td> 
  </tr> 
  <tr> 
   <td align="left">matchesSelector()</td> 
   <td>该选择器是否符合元素匹配 [实现不统一，需要前缀]</td> 
  </tr> 
  <tr> 
   <td align="left">write()</td> 
   <td>文档文本写入 [输出后光标不换行]</td> 
  </tr> 
  <tr> 
   <td align="left">writeIn()</td> 
   <td>文档文本写入 [输出后光标换行]</td> 
  </tr> 
  <tr> 
   <td align="left">implementation.hasFeature(特性,版本)</td> 
   <td>特性监测</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

## 4. Element类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">id</td> 
   <td>id</td> 
  </tr> 
  <tr> 
   <td align="left">className</td> 
   <td>类名</td> 
  </tr> 
  <tr> 
   <td align="left">classList.add(‘类名’)</td> 
   <td>添加指定类名 [ie10+]</td> 
  </tr> 
  <tr> 
   <td align="left">classList.remove(‘类名’)</td> 
   <td>删除指定类名 [ie10+]</td> 
  </tr> 
  <tr> 
   <td align="left">classList.contains(‘类名’)</td> 
   <td>是否包含指定类名 [ie10+]</td> 
  </tr> 
  <tr> 
   <td align="left">classList.toggle(‘类名’)</td> 
   <td>替换指定类名 [ie10+]</td> 
  </tr> 
  <tr> 
   <td align="left">title</td> 
   <td>标题</td> 
  </tr> 
  <tr> 
   <td align="left">style</td> 
   <td>设置或返回元素的样式属性</td> 
  </tr> 
  <tr> 
   <td align="left">children</td> 
   <td>子元素集合</td> 
  </tr> 
  <tr> 
   <td align="left">innerHTML</td> 
   <td>设置或者返回元素的内容</td> 
  </tr> 
  <tr> 
   <td align="left">outerHTML</td> 
   <td>设置或者返回元素的内容 [包含自身]</td> 
  </tr> 
  <tr> 
   <td align="left">textContent</td> 
   <td>设置或返回文本内容 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">innerText</td> 
   <td>设置或返回文本内容 [ie支持]</td> 
  </tr> 
  <tr> 
   <td align="left">contentEditable</td> 
   <td>设置或返回元素的可编辑状态</td> 
  </tr> 
  <tr> 
   <td align="left">isContentEditable</td> 
   <td>是否可编辑</td> 
  </tr> 
  <tr> 
   <td align="left">childElementCount</td> 
   <td>子元素节点个数</td> 
  </tr> 
  <tr> 
   <td align="left">firstElementChild</td> 
   <td>第一个子元素节点</td> 
  </tr> 
  <tr> 
   <td align="left">lastElementChild</td> 
   <td>最后一个子元素节点</td> 
  </tr> 
  <tr> 
   <td align="left">previousElementSibling</td> 
   <td>上一个元素节点</td> 
  </tr> 
  <tr> 
   <td align="left">nextElementSibling</td> 
   <td>下一个元素节点</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th>说明</th> 
   <th>返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">focus()</td> 
   <td>设置焦点</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">blur()</td> 
   <td>失去焦点</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">appendChild(节点)</td> 
   <td>在子节点列表之后插入</td> 
   <td>新增节点</td> 
  </tr> 
  <tr> 
   <td align="left">insertBefore(节点,参照节点)</td> 
   <td>在参照节点之前插入节点</td> 
   <td>插入节点</td> 
  </tr> 
  <tr> 
   <td align="left">insertAdjacentText(位置,节点内容)</td> 
   <td>在指定位置插入文本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">insertAdjacentHTML(位置,节点内容)</td> 
   <td>在指定位置插入html或文本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">removeChild(节点)</td> 
   <td>节点删除</td> 
   <td>被删节点</td> 
  </tr> 
  <tr> 
   <td align="left">replaceChild(节点,被替换的节点)</td> 
   <td>节点替换</td> 
   <td>被替换节点</td> 
  </tr> 
  <tr> 
   <td align="left">cloneNode(布尔值)</td> 
   <td>复制节点</td> 
   <td>克隆节点</td> 
  </tr> 
  <tr> 
   <td align="left">importNode(节点, 布尔值)</td> 
   <td>从A文档中取得a节点，将其导入B文档(类似cloneNode方法)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">contains(节点)</td> 
   <td>该节点是否为调用节点的子级</td> 
   <td>布尔值)</td> 
  </tr> 
  <tr> 
   <td align="left">hasFocus()</td> 
   <td>是否获得了焦点</td> 
   <td>布尔值</td> 
  </tr> 
  <tr> 
   <td align="left">hasChildNodes()</td> 
   <td>是否存在子节点</td> 
   <td>布尔值</td> 
  </tr> 
  <tr> 
   <td align="left">isDefaultNamespace(url)</td> 
   <td>是否指定了名称空间</td> 
   <td>布尔值</td> 
  </tr> 
  <tr> 
   <td align="left">isEqualNode(节点)</td> 
   <td>两个元素是否相等</td> 
   <td>布尔值</td> 
  </tr> 
  <tr> 
   <td align="left">isSupported(特性，版本)</td> 
   <td>是否支持某特性</td> 
   <td>布尔值</td> 
  </tr> 
 </tbody> 
</table>

## 5. attr类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">name</td> 
   <td>属性名</td> 
  </tr> 
  <tr> 
   <td align="left">value</td> 
   <td>属性值</td> 
  </tr> 
  <tr> 
   <td align="left">isId</td> 
   <td>是否为id类型</td> 
  </tr> 
  <tr> 
   <td align="left">specified</td> 
   <td>属性是否被指定</td> 
  </tr> 
  <tr> 
   <td align="left">length</td> 
   <td>属性长度</td> 
  </tr> 
  <tr> 
   <td align="left">attributes</td> 
   <td>属性集合</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">getAttribute()</td> 
   <td>获取属性值</td> 
  </tr> 
  <tr> 
   <td align="left">getAttributeNode()</td> 
   <td>获取属性节点</td> 
  </tr> 
  <tr> 
   <td align="left">setAttribute()</td> 
   <td>设置属性值</td> 
  </tr> 
  <tr> 
   <td align="left">setAttributeNode()</td> 
   <td>设置属性节点</td> 
  </tr> 
  <tr> 
   <td align="left">removeAttribute()</td> 
   <td>删除属性</td> 
  </tr> 
  <tr> 
   <td align="left">removeAttributeNode()</td> 
   <td>删除属性节点 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">hasAttribute()</td> 
   <td>是否存在指定的属性</td> 
  </tr> 
  <tr> 
   <td align="left">hasAttributes()</td> 
   <td>是否存在属性</td> 
  </tr> 
 </tbody> 
</table>

## 6. Text类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">appendData(文本)</td> 
   <td>将text添加到节点的末尾</td> 
  </tr> 
  <tr> 
   <td align="left">deleteData(位置,数量)</td> 
   <td>从指定位置开始删除n个字符</td> 
  </tr> 
  <tr> 
   <td align="left">insertData(位置,文本)</td> 
   <td>从指定位置插入文本</td> 
  </tr> 
  <tr> 
   <td align="left">replaceData(位置,数量,文本)</td> 
   <td>用text替换从offset位置开始到offset+count为止处的文本</td> 
  </tr> 
  <tr> 
   <td align="left">splitText(位置)</td> 
   <td>从指定位置将当前文本节点分裂成两个文本节点</td> 
  </tr> 
  <tr> 
   <td align="left">substringData(位置,数量)</td> 
   <td>截取从offset位置开始到offset+count为止处的字符串</td> 
  </tr> 
  <tr> 
   <td align="left">normalize()</td> 
   <td>合并相邻文本节点，并删除空的文本节点</td> 
  </tr> 
 </tbody> 
</table>

**撑住，快看完了**  
![在这里插入图片描述][20210611232555790.png]

## 7. 表格操作 ##

> **7.1 table**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">caption</td> 
   <td>caption元素指针</td> 
  </tr> 
  <tr> 
   <td align="left">tBodies</td> 
   <td>tbody集合</td> 
  </tr> 
  <tr> 
   <td align="left">tFoot</td> 
   <td>tfoot集合</td> 
  </tr> 
  <tr> 
   <td align="left">tHead</td> 
   <td>thead元素</td> 
  </tr> 
  <tr> 
   <td align="left">rows</td> 
   <td>表格所有行集合</td> 
  </tr> 
  <tr> 
   <td align="left">createTHead()</td> 
   <td>创建</td> 
  </tr> 
  <tr> 
   <td align="left">createTFoot()</td> 
   <td>创建</td> 
  </tr> 
  <tr> 
   <td align="left">createCaption()</td> 
   <td>创建caption元素，将其放到表格中，返回引用</td> 
  </tr> 
  <tr> 
   <td align="left">deleteTHead()</td> 
   <td>删除thead元素</td> 
  </tr> 
  <tr> 
   <td align="left">deleteTFoot()</td> 
   <td>删除tfoot元素</td> 
  </tr> 
  <tr> 
   <td align="left">deleteCaption()</td> 
   <td>删除caption元素</td> 
  </tr> 
  <tr> 
   <td align="left">deleteRow(pos)</td> 
   <td>删除指定位置的行</td> 
  </tr> 
  <tr> 
   <td align="left">insertRow(pos)</td> 
   <td>向行集合中的指定位置插入一行</td> 
  </tr> 
 </tbody> 
</table>

> **7.2 tbody 元素**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">rows</td> 
   <td>tbody所有行集合</td> 
  </tr> 
  <tr> 
   <td align="left">deleteRow(pos)</td> 
   <td>删除指定位置的行</td> 
  </tr> 
  <tr> 
   <td align="left">insertRow(pos)</td> 
   <td>向行集合中的指定位置插入一行，返回引用</td> 
  </tr> 
 </tbody> 
</table>

> **7.3 tr 元素**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">cells</td> 
   <td>tr所有单元格集合</td> 
  </tr> 
  <tr> 
   <td align="left">deleteCell(pos)</td> 
   <td>删除指定位置的单元格</td> 
  </tr> 
  <tr> 
   <td align="left">insertCell(pos)</td> 
   <td>向单元格集合中的指定位置插入一个单元格，返回引用</td> 
  </tr> 
 </tbody> 
</table>

## 8. 样式操作 ##

> **8.1 访问元素样式**

*  DOM样式 —— js通过dom.style只能访问直接样式属性，不能访问嵌入样式表和外部样式表

<table> 
 <thead> 
  <tr> 
   <th align="left">属性方法（dom.style）</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">cssText</td> 
   <td>返回style特性中所有样式的字符串形式</td> 
  </tr> 
  <tr> 
   <td align="left">length</td> 
   <td>返回元素中CSS属性数量</td> 
  </tr> 
  <tr> 
   <td align="left">parentRule</td> 
   <td>返回CSS信息的CSSRule对象</td> 
  </tr> 
  <tr> 
   <td align="left">getPropertyCSSValue(name)</td> 
   <td>返回属性值的CSSValue对象(包含cssText和cssValueType)</td> 
  </tr> 
  <tr> 
   <td align="left">getPropertyPriority(name)</td> 
   <td>是否使用了!important属性</td> 
  </tr> 
  <tr> 
   <td align="left">getPropertyValue(name)</td> 
   <td>返回给定属性的字符串值</td> 
  </tr> 
  <tr> 
   <td align="left">removeProperty(name)</td> 
   <td>从样式中删除给定属性</td> 
  </tr> 
  <tr> 
   <td align="left">setProperty(name,value,优先级)</td> 
   <td>将给定属性设置为相应的值并加上优先级</td> 
  </tr> 
 </tbody> 
</table>

> **8.2 操作样式表**

*  document.styleSheets —— 应用于文档的所有样式表

<table> 
 <thead> 
  <tr> 
   <th align="left">属性方法（dom.style）</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">属性(document.styleSheet[n])</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">cssRules</td> 
   <td>单个样式表中的所有样式规则 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">rules</td> 
   <td>同上 [ie支持]</td> 
  </tr> 
  <tr> 
   <td align="left">insertRule(rule,index)</td> 
   <td>向cssRules集合中指定位置插入rule字符串 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">addRule(rule,index)</td> 
   <td>同上 [ie支持]</td> 
  </tr> 
  <tr> 
   <td align="left">deleteRule(index)</td> 
   <td>删除cssRules集合中指定位置的规则 [ie不支持]</td> 
  </tr> 
  <tr> 
   <td align="left">removeRule(index)</td> 
   <td>同上 [ie支持]</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]

## 9. 大小和偏移 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">offsetParent</td> 
   <td>偏移的父容器</td> 
  </tr> 
  <tr> 
   <td align="left">getBoundingClientRect()</td> 
   <td>获取页面元素实际位置和宽高 (返回属性对象)</td> 
  </tr> 
  <tr> 
   <td align="left">offsetWidth</td> 
   <td>元素宽度 (可视内容区+滚动条+内边距+边框)</td> 
  </tr> 
  <tr> 
   <td align="left">offsetHeight</td> 
   <td>元素高度 (可视内容区+滚动条+内边距+边框)</td> 
  </tr> 
  <tr> 
   <td align="left">offsetLeft</td> 
   <td>与相邻父级的左距离</td> 
  </tr> 
  <tr> 
   <td align="left">offsetTop</td> 
   <td>与相邻父级的上距离</td> 
  </tr> 
  <tr> 
   <td align="left">clientWidth</td> 
   <td>元素宽度 (可视内容区+内边距)</td> 
  </tr> 
  <tr> 
   <td align="left">clientHeight</td> 
   <td>元素高度 (可视内容区+内边距)</td> 
  </tr> 
  <tr> 
   <td align="left">clientLeft</td> 
   <td>内边距边缘与边框边缘的距离 (左边框)</td> 
  </tr> 
  <tr> 
   <td align="left">clientTop</td> 
   <td>内边距边缘与边框边缘的距离 (上边框)</td> 
  </tr> 
  <tr> 
   <td align="left">scrollWidth</td> 
   <td>元素宽度 (可视内容区+滚动内容区+内边距)</td> 
  </tr> 
  <tr> 
   <td align="left">scrollHeight</td> 
   <td>元素高度 (可视内容区+滚动内容区+内边距)</td> 
  </tr> 
  <tr> 
   <td align="left">scrollLeft</td> 
   <td>元素左侧已滚动的距离</td> 
  </tr> 
  <tr> 
   <td align="left">scrollTop</td> 
   <td>元素顶部已滚动的距离</td> 
  </tr> 
 </tbody> 
</table>

## 10. FAQ ##

**本文内容较多，可能一下子记不住，可以收藏一波，方便日后查阅**

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**  
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位，一起加油！！！**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221005/3eb229f310584317b94ec3adc0c425f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221005/e7808fc062584c948b157be570894d1e.png
[20210611232555790.png]: /images/20221005/df7b6032a84a499294107e18d3a1bf70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221005/3157b9c38ffb4cc48417ec922fb7f64f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]: /images/20221005/4555a1a380ee4d5dbb505739292fb42b.png