Element 方法

位置方法

getBoundingClientRect

获取元素的大小及其相对于视口的位置

getClientRects

获取一个指向客户端中每一个盒子的边界矩形的矩形集合

computedStyleMap

样式方法

matches

使用 Element.matches 方法可以通过精准匹配样式。

Element.matches(selectorString);

示例:

<ul id="foo">
<li class="class-1">item 1</li>
<li>item 2</li>
<li class="class-1">item 3</li>
......
<li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li
  • 这里,我们想把 #foo 元素下的 li 元素(并且它的 classclass-1)的点击事件委托代理到 ul#foo 之上。
  • 如果通过上述的方法我们还需要在 if (target.nodeName.toLocaleLowerCase === 'li') 判断之中在加入一个判断 target.nodeName.className === 'class-1'
  • 但是如果想像 CSS 选择器般做更加灵活的匹配的话,上面的判断未免就太多了,并且很难做到灵活性。

这里可以使用 Element.matches API 来匹配。Element.matches API 的基本使用方法:

selectorString 既是 CSS 那样的选择器规则,比如本例中可以使用 target.matches('li.class-1'),他会返回一个布尔值,如果 target 元素是标签 li 并且它的类是 class-1 ,那么就会返回 true,否则返回 false

当然它的兼容性还有一些问题,需要 IE9 及以上的现代化浏览器版本。

我们可以使用 Polyfill 来解决兼容性上的问题:

if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}

加上 Element.matches 之后就可以来实现我们的需求了:

if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
const matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
document.getElementById('foo').addEventListener('click', function(e) {
// 兼容性处理
const event = e || window.event;
const target = event.target || event.srcElement;
if (target.matches('li.class-1')) {
console.log('the content is: ', target.innerHTML);
}
});

animate

Element 接口的 animate 方法是一个创建新 Animation 的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 Animation 对象实例

getAnimations

Promise.all(elem.getAnimations({ subtree: true }).map(animation => animation.finished)).then(() =>
elem.remove()
);

属性方法

getAttribute

获取元素中指定属性

setAttribute

设置元素中指定属性

hasAttribute

判断元素中是否存在置顶属性

removeAttribute

移除元素中指定属性

滚动方法

scroll

Element.scroll 方法是用于在给定的元素中滚动到某个特定坐标的 Element 接口。

scrollBy

Element.scrollBy 方法是使得元素滚动一段特定距离的 Element 接口。

scrollIntoView

Element.scrollIntoView 方法让当前的元素滚动到浏览器窗口的可视区域内。

scrollTo

Element.scrollTo 方法可以使界面滚动到给定元素的指定坐标位置。

requestFullscreen

事件对象

// Event 对象爱哪个
const event = window.event || event;
// 事件的目标节点
const target = event.target || event.srcElement;