JavaScript - 浏览器、DOM相关

[tomoya06]

DOM

定义

W3C原版定义：The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

MDN翻译定义：文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

疑难杂症

本栏目主要收录DOM操作以及HTML组件中常见的疑难杂症。

[tomoya06]

getElementByXXX vs querySelectorAll

用法比较

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

下图是在知乎上用两种方法获取div节点的比较：

返回值比较

• querySelectorAll 返回的是一个 Static Node List，是真数组
• 而 getElementsBy 系列的返回的是一个 Live Node List，是类数组

[tomoya06]

input oncompositionstart / end

中文输入的时候，input:text组件中，input事件是会随着拼音输入而一直被触发的。可以通过oncompositionstart/end事件来监听拼音输入的开始和结束。

下图是在input:text组件中输入拼音“好”字的事件相应：

[tomoya06]

height / clientHeight / offsetHeight / scrollHeight

描述元素高度的几个属性。对应的还有width的各种变式。区分度主要在于滚动元素。

• clientHeight：只读元素。包括padding，但不包括border、水平滚动条、margin。对于inline的元素这个属性一直是0，单位px
• offsetHeight：只读元素。包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px
• scrollHeight：只读元素。包括当前不可见部分的元素的高度、也就是元素的完整高度。可见部分的高度就是clientHeight，scrollHeight>=clientHeight恒成立，在没有滚动条时scrollHeight==clientHeight。单位px
• scrollTop：可读可写。代表有滚动条时，滚动条向下滚动的距离，也就是元素顶部被遮住部分的高度；在没有滚动条时scrollTop==0恒成立
• offsetTop：只读元素。表示当前元素顶部距离父元素顶部的距离，和有没有滚动条没有关系。单位px

运用

1. 判断元素是否滚动到底部：element.scrollHeight - element.scrollTop === element.clientHeight。参考MDN scrollHeight中提供的一个DEMO，来保证用户已阅读完许可条款。
2. 定高container中元素的lazy-load：可根据container.scrollTop + container.clientHeight - elem.offsetTop > 0判断elem是否已经在container中露出。参考自己实现的DEMO