第三次读书笔记

读书笔记

DOM扩展

selectors API

1. querySelector()
   
   • 接收一个CSS选择符，返回与该模式匹配的第一个元素。如果没有找到元素，返回null。Document类型调用该方法会在文档元素范围内查找匹配的元素，Element类型则只会在该元素的后代中查找匹配的元素。
2. querySelectorAll()
   
   • 和querySelctor类似，但是返回的是NodeList的实例。
3. matchesSelector()
   
   • 接受一个CSS选择符，如果调用该方法的元素与该选择符匹配，返回true，否则返回false。

元素遍历

Element Traversal API为DOM元素添加了以下5个属性：

• childElementCount:返回子元素的个数(不包括文本节点和注释)
• firstElementChild():指向第一个子元素；firstChild的元素版。
• LastElementChild():指向最后一个子元素；lastChild的元素版。
• previousElementSibling：指向前一个同辈元素；privousSibling的元素版。
• nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

HTML5

1. 与类相关的扩充
   
   • getElementsByClassName()使用该方法可以方便的为带有某些类的元素添加事件处理程序，从而不必在局限于使用id或标签名。
   • classList属性
     
     • 在以前操作类名的时候，需要通过classsName属性，但是className中是一个字符串，所以即使只修改其中一部分，也必须每次都设置整个字符串的值，而classList属性出现后，可以使得对类名的操作更加简单和安全。它是新集合类型DOMTokenList的实例。
     • 具有如下方法：add contains remove toggle
2. 焦点管理
   
   • document.activeElement属性：始终引用DOM中当前获得了焦点的元素（页面加载、用户输入、在代码中调用focus()方法）。默认情况下，文档刚刚加载完成时，其中保存的是document.body元素的引用；文档加载其中，其值始终为null。
   • document.hasFocus()方法用于确定文档是否获得了焦点。
3. HTMLDocument的变化
   
   • readyState属性：loading，正在加载文档；complete，文档加载完成。
   • 兼容模式：自从IE6开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为了浏览器的必要功能；document.compatMode=="CSS1Compt"表示标准兼容模式开启，document.compatMode=="BackCompt"表示标准兼容模式关闭。
   • head属性：引用文档的元素。
4. 自定义数据属性
   
   • 添加前缀：data-;目地是为元素提供与渲染无关的信息，或者提供语义信息。
5. 插入标记
   
   • innerHTML属性:在通过该属性插入代码之前，尽可能先手工检查一下其中的文本内容（去掉所有脚本节点和事件处理程序属性）。
     
     • 读模式下，返回与调用元素的所有子节点(包括元素、注释、文本节点)对应的HTML标记
     • 写模式下，innerHTML会根据指定的值创建新的DOM树，并且用这个DOM树完全替换调用元素原先的所有子节点。
   • outerHTML属性
     
     • 与innerHMTL属性作用相似，不过读模式会返回其子节点和其本身；写模式会把自己也给替换掉。
   • insertAdjacentHTML()方法：接受两个参数，要插入的位置和要插入的HTML文本。插入位置必须是下列值：
     
     • "beforebegin",在当前元素之前插入一个紧邻的同辈元素；
     • "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素。
     • "beforeend"，在当前元素之下插入一个新的子元素或者在最后一个子元素之后再插入一个新的子元素
     • "afterend"，在当前元素之后插入一个紧邻的同辈元素。
   • 在使用上述方法替换子节点时可能会导致浏览器的内存占用问题，尤其在IE中尤为明显。在删除带有事件处理程序或者引用了其他JavaScript对象子树时，就有可能导致内存占用问题。所以使用之前最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
6. scrollIntoView()方法
   可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果传入true作为参数，或者不传任何参数，那么窗口滚动之后会调用元素的顶部与视口顶部尽可能平齐；如果是false，调用元素会尽可能全部出现在视口中，不过顶部不一定平齐。
7. 专有扩展
   
   • 文档模式(document mode)
   • children属性
   • contains()方法
   • 插入文本：innerText属性
   • 滚动
     
     • scrollIntoViewIfNeeded()
     • scrollByLines(lineCount):将元素的内容滚动指定行高，lineCount可正可负。safari和chrome实现了该方法。
     • scrollByPages(pageCount)：将元素的内容滚动指定的页面高度。具体由元素高度决定。safari和chrome实现了该方法。
     • scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器；而scrollByLines()和scrollByPages()影响的则是元素本身。

小结

Selectors API，定义了两个方法，让开发人员能够基于CSS选择符从DOM中取得元素，这两个方法是querySelector() and querySelectorAll()
Element Tranversal,为DOM元素定义了额外的扩展，让开发人员能够更方便的从一个元素跳到另一个元素。之所以会出现这个扩展，是因为浏览器处理DOM元素间空白符的方式不一样。
HTML5，为标准的DOm定义了很多扩展功能。其中包括在innerHTML属性这样事实标准基础上提供的标准定义，以及为焦点管理、设置字符集、滚动页面而规定的扩展API。