我是靠谱客的博主 英俊奇迹,最近开发中收集的这篇文章主要介绍十五、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()

最后

以上就是英俊奇迹为你收集整理的十五、DOM扩展的全部内容,希望文章能够帮你解决十五、DOM扩展所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(34)

评论列表共有 0 条评论

立即
投稿
返回
顶部