js 自定义数据属性

HTML5 允许给元素指定非标准的属性，但要使用前缀 data-以便告诉浏览器，这些属性既不包含 与渲染有关的信息，也不包含元素的语义信息。除了前缀，自定义属性对命名是没有限制的，data-后 面跟什么都可以。下面是一个例子:

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

定义了自定义数据属性后，可以通过元素的 dataset 属性来访问。dataset 属性是一个 DOMStringMap 的实例，包含一组键/值对映射。元素的每个 data-name 属性在 dataset 中都可以通 过 data-后面的字符串作为键来访问(例如，属性 data-myname、data-myName 可以通过 myname 访 问，但要注意 data-my-name、data-My-Name 要通过 myName 来访问)。下面是一个使用自定义数据 属性的例子:

// 本例中使用的方法仅用于示范
let div = document.getElementById("myDiv");
// 取得自定义数据属性的值
let appId = div.dataset.appId; let myName = div.dataset.myname;
// 设置自定义数据属性的值 div.dataset.appId = 23456; div.dataset.myname = "Michael";
// 有"myname"吗?
if (div.dataset.myname){
      console.log(`Hello, ${div.dataset.myname}`);
    }

自定义数据属性非常适合需要给元素附加某些数据的场景，比如链接追踪和在聚合应用程序中标识 页面的不同部分。另外，单页应用程序框架也非常多地使用了自定义数据属性。

插入标记

DOM 虽然已经为操纵节点提供了很多 API，但向文档中一次性插入大量 HTML 时还是比较麻烦。 相比先创建一堆节点，再把它们以正确的顺序连接起来，直接插入一个 HTML 字符串要简单(快速) 得多。HTML5 已经通过以下 DOM 扩展将这种能力标准化了。

1. innerHTML 属性

在读取 innerHTML 属性时，会返回元素所有后代的 HTML 字符串，包括元素、注释和文本节点。 而在写入 innerHTML 时，则会根据提供的字符串值以新的 DOM 子树替代元素中原来包含的所有节点。 比如下面的 HTML 代码:

<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 会返回完全一样的值。 在写入模式下，赋给 innerHTML 属性的值会被解析为 DOM 子树，并替代元素之前的所有节点。 因为所赋的值默认为 HTML，所以其中的所有标签都会以浏览器处理 HTML 的方式转换为元素(同样， 转换结果也会因浏览器不同而不同)。如果赋值中不包含任何 HTML 标签，则直接生成一个文本节点， 如下所示:

div.innerHTML = "Hello world!";

因为浏览器会解析设置的值，所以给 innerHTML 设置包含 HTML 的字符串时，结果会大不一样。 16 来看下面的例子:

div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";

这个操作的结果相当于:

<div id="content">Hello & welcome, <b>"reader"!</b></div> 设置完 innerHTML，马上就可以像访问其他节点一样访问这些新节点。