DOM扩展：HTML5

1.与类相关的扩展

• getElementsByClassName()
  只接收一个参数，即包含一个或者多个类名的字符串，返回带有指定类的所有元素的NodeList。（包含多个类名时，类名的先后顺序无所谓）

//取得所有类中包含username和current的元素，类名的先后顺序无所谓
var allCurrentUsernames=document.getElementByClassName("username current");
//取得ID为"myDiv"元素中带有类名"selected"的所有元素
var selected=document.getElementById("myDiv").getElementByClassName("select");

---

2.焦点管理

• document.activeElement属性：引用DOM中当前获得焦点的元素

var button=document.getElementById("myButton");
button.focus();
alert(document.activeElement===button);//document.activeElement指向当前获得焦点的元素

• document.hasFocus()：确定文档是否获得了焦点

var button=document.getElementById("myButton");
button.focus();
alert(document.hasFocus());//true

---

3.自定义数据属性

可以添加自定义的非标准的属性，但是要添加前缀data-。

• dataset属性：访问和设定自定义的属性

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
//获取自定的属性的值
var appId=div.dataset.appId;

//设置自定义属性的值
div.dataset.myname="Curry";

---

4.插入标记（innerHTML、outerHTML)

一般DOM操作方法：很麻烦！！！不仅要创建一系列DOM节点，而且还要小心地按照正确地顺序把它们连接起来。

• innerHTML属性(outerHTML相类似)

  读的状态下： innerHTML返回与调用元素的所有节点（包括元素、注释和文本节点）对应的HTML标记。
  写的模式下： innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

<div id="content">
        <p>This is a <strong>paragraph</strong> with a list following</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
//innerHTML读的状态
    <script>
        var content=document.querySelector("#content");
        alert(content.innerHTML);
        //返回整个div的所有子节点
    </script>

//innerHTML写的状态下
div.innerHTML="Hello world";
//但是设置的值和解析后的值确有差异:
div.innerHTML="Hello & welcome, <b>\"reader\"!</b>";
<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>

• insertAdjacentHTML()方法：插入标记
  接收两个参数：插入的位置和要插入的HTML文本
  插入的位置必须为以下四个之一：
  beforebegin：在当前元素之前插入一个紧邻的同辈元素
  afterbegin：在当前元素之下插入新的子元素或在第一个子元素之前再插入新的子元素
  beforeend：在当前元素之下插入新的子元素或在最后一个子元素之前再插入新的子元素
  afterend：在当前元素之后插入一个紧邻的同辈元素

//作为前一个同辈元素插入
element.inserAdjacentHTML("beforebegin","<p>Hello world!</p>");