第11章 DOM扩展

(一)

对DOM的两个主要的扩展是Selectors API(选择符API)和HTML5。

(二)

jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementsByTagName()。

(三)

Selector API Level 1的核心是两个方法:querySelector()querySelectorAll()。querySelector()接收一个CSS选择符,返回与该模式匹配的第一个元素,没找到返回null。

var selected = document.querySelector(".selected");//取得类为“selected”的第一个元素

querySelectorAll()返回所有匹配的元素,返回的是一个NodeList的实例(但不会不断地对文档进行搜索和动态查询)。

(四)

对于元素间的空格,IE9之前的版本与其他浏览器的处理有差异,导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补差异又保持DOM规范不变,Element Traversal规范新定义了一组属性。firstElementChild等,不必担心空白文本节点。

firstElementChild见我的另一篇笔记:http://www.jianshu.com/writer#/notebooks/15702203/notes/17309252

(五)

HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。方法包括:add、remove、toggle(切换)、contains、item(索引)。

详情:https://segmentfault.com/a/1190000009067946

(六)

焦点管理:

document.activeElement属性会引用DOM中当前获得了焦点的元素(得到的值是INPUT、BUTTON这种)

document.hasFocus()方法用于确定文档是否获得了焦点(返回true或false)。它们的用途是提高web应用的无障碍性。

(七)

HTML5扩展了HTMLDocument

1、readyState 属性返回当前文档的状态(载入中……)。

该属性返回以下值:

uninitialized - 还未开始载入

loading - 载入中

interactive - 已加载,文档与用户可以开始交互

complete - 载入完成

2、兼容模式,document.compatMode属性(鉴别标准模式、混杂模式)

如果文档处于“混杂模式”,则该属性值为"BackCompat"

如果文档处于“标准模式”或者“准标准模式(almost standards mode)”,则该属性为"CSS1Compat"

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;

当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都包括在内,而不仅仅是body部分。

3、document.head属性引用文档的head元素。返回当前文档中的元素。如果有多个元素,则返回第一个。

(八)

插入标记

innerHTML属性(不要过多使用,影响性能)。

outerHTML属性会返回包括自身元素的代码。

insertAdjacentHTML()方法,按位置插入HTML文本。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 11.1 选择符API querySelector()和querySelectorAll()两个方法接收一个CSS...
    Elevens_regret阅读 1,652评论 0 0
  • 1. 选择符 Selectors API 包括两个方法:querySelector()和querySelector...
    Ching_Lee阅读 1,585评论 0 0
  • 人在面对生老病死的时候是这么的无力,什么荣耀、高傲,什么钱财地位,统统一文不值。幻体,经历这么多,你觉得什么最重要...
    磨石阅读 3,068评论 0 1
  • 一个孩子,为追求音乐梦想,踏入了不可知的世界。以记忆为生的亡灵一副骷髅相却与活人别无两样。同样的鲜活的个性,衣着华...
    天空云_0eaf阅读 3,619评论 0 0
  • 我摔下登山钉,差点没命,手臂火辣辣的疼,愤怒已无法形容我的心情,我猛然抬头往上看,有个男生手抓着我千辛万苦打的登山...
    安紫颜阅读 1,544评论 0 0

友情链接更多精彩内容