js高级程序设计 第 十一 章 DOM 扩展

选择符 API

querySelector( CSS选择符 ):返回与该模式匹配的第一个元素,若没有找到匹配元素则返回null;通过Document类型调用querySelector( )方法时,会在文档元素的范围内查找匹配的元素,而通过Element类型调用querySelector( )方法时,只会在该元素后代元素的范围内查找匹配的元素。
querySelectorAll( CSS选择符 ):返回的是所有匹配元素而不仅仅是一个元素,这个方法返回的是一个NodeList的实例,且返回的是带有所有属性和方法的NodeList,而且底层实现则类似与一组元素的快照,而非不断对文档进行搜索的动态查询。
matchesSelector( CSS选择符 ):如果调用元素与该选择符匹配,返回true;否则,返回false。

元素遍历

对于元素间的空格,IE9及之前的版本不会返回文本节点,而其他的所有浏览器都会返回文本节点,为了弥补这一差异,Element Traversal 规范新定义了一组属性,如下:
childElementCount:返回子元素(不包括文本节点和注释)的个数;
firstElementChild:指向第一个子元素;firstChild的元素版;
lastElementChild:指向最后一个子元素;lastChild的元素版;
previousElementSibling:指向前一个同辈元素;previousSibling的元素版;
nextElementSibling:指向后一个同辈元素;nextSibling的元素版;
利用这些属性,可以不必担心空白文本节点。

HTML5

1、与类相关的扩充

getElementsByClassName( 一个或多个类名的字符串 ):返回带有指定类的所有元素的NodeList,传入多个类名时,类名的先后顺序不重要。调用该方法时,只有位于调用元素子树中的元素才会返回。
classList 属性:HTML5新增操作类名的方式,包含下面四个方法:
add ( value ):将给定的字符串值添加到列表中,如果值已经存在,就不添加了。
contains ( value ):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove( value ):从列表中删除给定的字符串。
toggle ( value ):如果列表中已经存在给定的值,删除它,如果列表中没有给定的值,添加它。

2、焦点管理

HTML5添加了辅助管理DOM焦点的功能
document.activeElement属性:始终会引用DOM中当前获得了焦点的元素;默认情况下,文档刚刚加载完成时,document.activeElement中保存的是document.body元素的引用,文档加载期间,document.activeElement的值为null。
focus( )方法:使用该方法获取焦点;
document.hasFocus( )方法:用于确定文档是否获得了焦点。

3、HTMLDocument的变化

document.readyState 属性:用来实现一个指示文档已经加载完成的指示器,loading表示正在加载文档;complete表示已经加载完文档;
docuemnt.compatMode属性:用于检测页面的兼容模式,CSS1Compat表示标准模式;BackCompat表示混杂模式

4、字符集属性

charset 属性:表示文档中实际使用的字符集;
defaultCharset 属性:表示根据默认浏览器及操作系统的设置,当前文档默认的字符集应该是什么,如果文档没有使用默认的字符集,那charset和defaultCharset属性的值可能会不一样。

5、自定义数据属性

HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可。
可以通过元素的dataset属性来访问自定义属性的值,如取得自定义属性的值:var appId = div.dataset.appId

6、插入标记

innerHTML属性:在读模式下,innerHTML属性返回与调用元素的所欲有子节点(包括元素、注释和文本节点)对应的HTML标记,在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
不支持innerHTML的元素有:<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>
outerHTML属性:在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签,在写模式下,outerHTML会根据给定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。
insertAdjacentHTML( 插入的位置,要插入的HTML文本 )
第一个参数必须是下列值之一:
beforebegin:在当前元素之前插入一个紧邻的同辈元素;
afterbegin:在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素;
beforeend:在当前元素之下插入一个新的子元素或者在最后一个子元素再插入新的子元素;
afterend:再当前元素之后插入一个紧邻的同辈元素;
需注意的点是:在使用innerHTML、outerHTML属性和insertAdjacentHTML( )方法时,最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。同时要将设置innerHTML和outHTML的次数控制再合理的范围内,这样可以减少带来的性能损失。

7、scrollIntoView( ) 方法

scrollIntoView( )可以在所有HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中,如果给这个方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能齐平,传入false,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口顶部平齐)不过顶部不一定齐平。

<meta>标签设置文档模式

contains( )方法:用于确认某个节点是不是另一个节点的后代,返回true/false。

插入文本

innerText属性与outerText属性与innerHTML和outerHTML属性类似

滚动

scrollIntoViewIfNeeded( alignCenter ):只在当前元素在视口中不可见的情况下,才滚动浏览器窗口或容器元素,最终让它可见。如果当前元素在视口中可见,则方法什么都不处理,如果将可选的alignCenter参数设置为true,则表示尽量将元素显示在视口的中部(垂直方向);
scrollByLines( lineCount ):将元素的内容滚动指定的行高,lineCount值可以时正值也可以是负值。
scrollByPages( pageCount ):将元素的内容滚动指定的页面高度,具体高度由元素的高度决定。
需要注意的是,scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器,而scrollByLines()和scrollByPages()影响的则是元素自身。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容