十五、DOM扩展

一、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()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乘风xs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值