JavaScript学习-DOM扩展_HTML5

1，与类相关的扩充

• getElementsByClassName()
  
  • 可通过Document对象及所有HTML元素调用。
  • 接收一个参数，包含一或多个类名的字符串。传入多个类名时，类名的先后顺序不重要。
  • 返回带有指定类的所有元素的NodeList。
• classList属性
  
  • 在操作类名时，通过className属性的话，若是多个类名一起的字符串，那么修改类名的时候，就需要有关于字符串操作的方法来修改className。
  • HTML5新增了一种操作类名的方式，为所有元素添加classList属性。这个classList属性时新集合类型DOMTokenList的实例。与其他DOM集合类似，DOMTokenList有一个length属性。取得元素可以使用item()方法，也可以使用方括号语法。这个新类型还定义如下方法。
    
    • add(value)：将给定的字符串值添加到列表中，如果值存在，就不添加。
    • contains(value):表示是否存在给定的值，存在返回true，不存在返回false。
    • remove(value)：从列表中删除给定的字符串。
    • toggle(value)：若存在给定值，删除它。若没有给定值，添加它。
  • 有了classList属性，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则就用不到className属性了。

2，焦点管理

• HTML5添加了辅助管理DOM焦点的功能。
• document.activeElement属性
  
  • 这个属性始终会引用DOM中当前获得了焦点的元素。
  • 文档刚刚加载完成时，保存的是documen.body元素的引用。
• focus()方法
  
  • 元素获得焦点的方法。另外还有的方式有页面加载，用户输入。
• document.hasFocus()方法
  
  • 确定文档是否获得了焦点。可以知道用户是不是正在与页面交互。

3，HTMLDocument的扩展

• readyState属性
  
  • Document的readyState属性有两个可能的值：
    
    • loading，正在加载文档;
    • complete，已经加载完文档;

• 兼容模式compatMode属性

  • CSS1Compat 代表标准模式
  • BackCompat 代表混在模式
  • 代码示例:

  if (document.compatMode == "CSSCompat"){
      alert("Standards mode");
  }else{
      alert("Quirks mode");
  }

• head属性
  
  • 引用文档的head元素。

4，字符集属性

• charset属性
  
  • 表示文档中实际使用的字符集，也可用来指定新字符集。
  • 默认为“UTF-16”。
  • 可使用meta元素，响应头部或者直接设置charset属性修改这个值。
  • 支持的浏览器有IE，Firefox，Safari，Opera，和Chrome。
• defaultCharset属性
  
  • 表示当前浏览器及操作系统默认的字符。
  • 支持的浏览器有IE，Safari和Chrome。

5，自定义数据属性

• HTML5规定可以为元素添加非标准的属性，但要添加data-
• 目的是为元素提供与渲染无关的信息，或者提供语义信息。
• 可以通过元素的dataset属性来访问自定义属性的值。

• dataset是DOMStringMap的一个实例，也就是一个名值对儿的映射。，只不过属性名没有data-前缀，如下代码所示：

  var div = document.getElementById("myDiv");
  var appId = div.dataset.appId;
  var myName = div.dataset.myname;
  
  div.dataset.appId = 23456;
  div.dataset.myname = "Michael";
  
  if (div.dataset.myname){
      alert("Hello," + div.dataset.myname);
  }

6，插入标记

• 需要给文档添加大量HTML标记的情况下，使用下面这些HTML5规范的扩展可以方便的进行。

• innerHTML属性

  • 返回与调用元素的所有子节点的HTML标记。
  • 写模式下，genuine指定值创建新的DOM数，然后用新DOM数完全替换调用元素原先所有的子节点。

  • 如下所示

    <div id="content">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>

  • 它的innerHTML属性会返回下列字符串

    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

  • 返回的文本格式因浏览器相异，IE和Opera会将所有标签转换为大写形式，而Safari，Chrome和Firefox会按照原文本格式返回。
  • innerHTML属性的一些限制
    
    • script元素并不会执行其中的脚本（IE8及更早版本除外，但必须满足一些条件，具体参看《JavaScript高级程序设计p295》）
    • 大多数浏览器都支持以直观的方式通过innerHTML插入style元素。
    • 不支持innerHTML元素的有:col,colgroup,frameset,head,html,style,table,tbody,thead,tfoot,tr,在IE8及更早版本title也不支持。
• outerHTML属性
  
  • 返回调用它的元素及所有子节点的HTML标签。
  • 写模式下，根据指定的值，替换元素本身以及元素的子树。

• insertAdjacenetHTML()方法

  • 接收两个参数
    
    • 插入位置字符串
      
      • beforebegin
      • afterbegin
      • beforeend
      • afterend
    • 要插入的文本

  • 代码示例

    element.insertAdjacentHTML("beforebegin","<p>Hello world!</p>");

• scrollIntoView()方法
  
  • 如果传入true
    
    • 窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
  • 传入false
    
    • 调用元素会尽可能全部出现在是口中，可能的话，调用元素的顶部会与视口顶部平齐。