美文网首页
DOM扩展知识点总结

DOM扩展知识点总结

作者: 一只dororo | 来源:发表于2017-09-21 09:44 被阅读0次

(一)选择符API

Selectors API Level 1 的核心是两个方法:querySelector()和querySelectorAll()。在兼容的浏览器中,可以通过Document 及Element 类型的实例调用它们。目前已完全支持Selectors API Level 1的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。

querySelector()方法

querySelectorAll()方法

(二)HTML5新增

(1)与类相关扩充

getElementsByClassName()方法

支持 getElementsByClassName()方法的浏览器有IE 9+、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+。

(2)焦点管理

document.activeElement

这个属性指向的是当前获得焦点的元素,使用focus()可以让元素获得焦点

document.hasFocus()

这个方法用于确定文档是否获得了焦点

实现了这两个属性的浏览器的包括IE 4+、Firefox 3+、Safari 4+、Chrome 和Opera 8+。

(3)HTMLDocument的变化

readyState 属性

document.readyState表示文档的加载进度,它有两个值分别为'loading'和'complete'.

支持 readyState 属性的浏览器有IE4+、Firefox 3.6+、Safari、Chrome 和Opera 9+。

compatMode 的属性

document.compatMode属性告诉开发人员浏览器采用了哪种渲染模式。在标准模式下,document.compatMode 的

值等于"CSS1Compat",而在混杂模式下,document.compatMode 的值等于"BackCompat"。

兼容性:IE、Firefox、Safari 3.1+、Opera 和Chrome

document.charset

字符编码

document.defaultCharset

当前文档的默认字符编码

(4)自定义数据属性

HTML5 规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。

支持自定义数据属性的浏览器有Firefox 6+和Chrome

(5)插入标记

innerHTML属性

在读模式下,innerHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML 标记

在写模式下,innerHTML 会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点

outerHTML 属性

在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签

在写模式下,outerHTML会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。

(6)内存与性能问题

使用本节介绍的方法替换子节点可能会导致浏览器的内存占用问题,尤其是在IE 中,问题更加明显。在删除带有事件处理程序或引用了其他JavaScript 对象子树时,就有可能导致内存占用问题。

假设某个元素有一个事件处理程序(或者引用了一个JavaScript 对象作为属性),在使用前述某个属性将该元素从文档树中删除后,元素与事件处理程序(或JavaScript 对象)之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现,页面占用的内存数量就会明显增加。

因此,在使用innerHTML、outerHTML 属性方法时,最好先手工删除要被替换的元素的所有事件处理程序和JavaScript 对象属性

(7)scrollIntoView()方法

scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

//例子:让元素可见

document.forms[0].scrollIntoView();

部分浏览器支持的专有扩展省略。。。

相关文章

  • DOM扩展知识点总结

    (一)选择符API Selectors API Level 1 的核心是两个方法:querySelector()和...

  • 前端知识点总结——DOM

    前端知识点总结——DOM 1.什么是DOM: Document Object Model 什么是: 专门操作网页内...

  • DOM扩展

    本章内容:介绍Selectors API、HTML5 DOM扩展、了解专有的DOM扩展 对DOM的主要扩展是 Se...

  • DOM事件知识点

    这篇文章主要是总结一些DOM事件的基础知识点。 DOM事件的级别 DOM3是鼠标 键盘这些事件 DOM事件模型 捕...

  • 11 DOM 扩展

    本章内容 理解 Selectors API 使用 HTML5 DOM 扩展 了解专有的 DOM 扩展 对 DOM ...

  • 《DOM知识点总结》

    DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许我们添加、移除和修改页...

  • DOM扩展

  • DOM扩展

    1.1 获取元素 1、document.getElementsByClassName ('class') 通过类名...

  • DOM扩展

    querySelector与querySelectorAll querySelector:返回与模式匹配的第一个元...

  • DOM扩展

    选择符API querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素;通过Eleme...

网友评论

      本文标题:DOM扩展知识点总结

      本文链接:https://www.haomeiwen.com/subject/xblosxtx.html