概述
一、Selectors API
Selectors API Level 1: querySelector() querySelectorAll() Document类型和Element类型
Selectors API Level 2: matches() find() findAll() 目前没有浏览器实现或者宣称实现find() 和findAll() Element类型
二、元素遍历
Element Traversal API 弥补是否将空格当做空白节点的差异,为DOM元素添加了5个属性
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
三、HTML5
1.CSS类扩展
getElementsByClassName() 暴露在document对象和所有HTML元素上
classList属性 以前的className属性是一个字符串
classList属性是一个新的集合类型DOMTokenList类型,有length属性item()方法
add(value)
contains(value)
remove(value)
toggle(value)
2.焦点管理
document.activeElement ,始终包含当前拥有焦点的DOM元素
在页面加载完之后为body,之前为null
document.hasFocus() 文档是否含有焦点
3.HTMLDocument扩展
1)readyState属性
Loading: 文档正在加载中
complete:文档加载完毕
2)compatMode属性 指示浏览器所处渲染模式
CSS1Compat:标准模式
BackCompat:混杂模式
3)head属性 指向<head>
4.字符集属性characterSet 可读写
5.自定义数据属性
标签里面使用data-前缀,元素的dataset属性可访问
6.插入标签
innerHTML
现在浏览器中,innerHTML中插入<script>标签是不会执行的;而IE8之前,如果指定了defer属性,会执行
outerHTML
insertAdjacentHTML(), insertAdjacentText()
接受两个参数,一个是标记位置(beforebegin, afterbegin, beforeend, afterend),一个是要插入的内容
内存与性能问题
若被移除的子树元素中之前有关联的事件处理程序或者js对象(作为属性),则他们的绑定关系会滞留在内存中
跨站点脚本
7.scrollIntoView() 存在于所有HTML元素
参数有 alignToTop true与视口顶部对齐,false与视口底部对齐,默认true
scrollIntoViewOptions对象
Behavior 定义过渡动画 smooth auto
Block 定义垂直方向的对齐 start center end nearest
Inline 定义水平方向对齐 start center end nearest
四、专有扩展
children属性
Containes()方法 目标节点是否是被搜索节点的后代
插入标记 innerText outerText
滚动 scrollIntoViewIfNeeded()
最后
以上就是英俊奇迹为你收集整理的十五、DOM扩展的全部内容,希望文章能够帮你解决十五、DOM扩展所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复