第十章

DOM拓展

1. 选择符API
   1. querySelector() 接收一个CSS选择符，返回与该模式匹配的第一个元素；如果没有找到，则返回null。通过Document类型调用该方法时，会在文档元素的范围内查找匹配的元素；而通过Element类型调用该方法时，只会在该元素后代元素范围内查找匹配的元素。
   2. querySelectorAll() 接收一个CSS选择符，返回所有匹配的元素，是一个NodeList的实例。如果么有找到匹配的元素，则NodeList为空。要取得NodeList中的每一个元素，可以使用方括号或则item()方法。
   3. matchesSelector() 接收一个CSS选择符，如果调用元素与选择符匹配，则返回true；否则返回false。
2. 元素遍历：Element Traversal API为DOM元素添加了五个元素：
   1. childElementCount：返回子元素(不包括文本节点和注释)的个数。
   2. firstElementChild：指向第一个子元素；firstChild的元素版。
   3. lastElementChild：指向最后一个子元素；lastChild的元素版。
   4. previousElmentChild：指向前一个同辈元素；previousSibling的元素版。
   5. nextElementChild：指向后一个同辈元素；nextSibling的元素版。
3. HTML5
   1. 与类相关的扩充
      1. getElementByClassName() 接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，先后顺序不重要。在document对象上调用该方法会始终返回与类名匹配的所有元素；在元素上调用该方法只会返回后代元素中匹配的元素。
      2. classList属性 是新集合类型DOMTokenList的实例。DOMTokenList有一个表示自己包含多少元素的length属性，而取得每个元素可以使用item()方法或使用方括号语法。此外还有如下方法使用：
         1. add(value)：将给定的字符串值添加到列表中。如果该值已经存在，则不添加。
         2. contains(value)：表示列表中是否存在给定的值，如果存在则返回true；否则返回false。
         3. remove(value)：从列表中删除给定的字符串。
         4. toggle(value)：如果列表中存在给定的值，则删除；如果不存在则添加它。
   2. 焦点管理
      1. document.activeElement属性 该属性始终会引用DOM中当前获取了焦点的元素。元素获取焦点的方式有页面加载，用户输入和在代码中调用focus()。在默认下，文档刚加载完成时，该属性保存的是document.body元素；文档加载期间，该元素的值是null。
      2. document.hasFocus()方法，用于确定文档是否获取了焦点。
   3. HTMLDocument的变化
      1. document.readyState属性用来表示文档是否加载完成，有两个值
         • loading：正在加载文档
         • complete：已经在玩完文档
      2. 兼容模式：区分渲染页面的模式是标准的还是混杂的，用document.compatMode，有两个值
         • CSS1Compat：标准模式
         • BackCompat：混杂模式
      3. document.head 用来引用文档的元素。用以下方式来实现兼容

      document.head || document.getElementByTagName("head")[0]
      

   4. 字符集属性
      1. document.charset 设置文档中实际使用的字符集。支持该属性的有ie，safari，opera，chrome。
      2. document.defaultCharset 表示根据默认浏览器和操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那么charset可能会和defaultCharset属性的值不同。支持该属性的浏览器有ie，safari，chrome。
      3. Firefox支持document.Characterset。
   5. 自定义属性：要使用data-开头，可随意添加和命名。通过元素的dataset属性来访自定义属性的值。
   6. 插入标记
      1. innerHTML属性
         • 在读模式下，innerHTML属性返回与调用元素的所有子节点(包括元素，注释和文本节点)对应的HTML标记。
         • 在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
         • 不同浏览器返回的文本格式会有所不同。
         • 在大多数浏览器中，通过innerHTML插入