让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5</title>
<style>
table {
border: 1px solid black;
}
</style>
</head>
<body>
<p class="username current">username and current</p>
<p class="current">大姐夫啦家乐福建安里的current</p>
<p class="username">fjafj而亲仁就来得快的结果username</p>
<p class="current username">附近阿里肯德基防静电我们你打飞机username and current</p>
<div class="bd user disabled">
<p>我们的明天！！</p>
</div>
<button id="myButton">我的按钮</button>
<!-- HTML5规定可以为元素添加非标准的属性，但要添加前缀“data-” 为元素提供与渲染无关的信息，或者提供语义信息 -->
<div id="mydiv2" data-appId="123231" data-myName="kai">12321</div>
<!-- innerHTML -->
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it. </p>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
<table>
<caption>Color names and values</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</tbody>
</table>
<script>
/*
HTML5规范则围绕如何使用新增标记定义了大量的JavaScript API
其中一些API与DOM重叠，定了了浏览器应该支持的DOM扩展
这里只涉及讨论与DOM节点相关的内容！！
*/
// 1, 与类相关的扩充
// HTML5提供了许多API，致力于简化CSS类的用法
// (1) getElementsByClassName()方法 --> 接收一个参数，即一个包含一或者多个类名的字符串，返回指定类的所有元素的NodeList
// --> 传入多个类名时，类名的先后顺序不重要
// 取得所有类中包含'username' and 'current'的元素
// var allCurrentUsernames = document.getElementsByClassName('username current');
// console.log(allCurrentUsernames);
// 【注意】
// a，调用这个方法时，只有位于调用元素子树中的元素才会返回！！
// b，使用这个方法可以更方便地为某些类的元素添加事件处理程序，从而不必局限于使用ID或标签名
// (2) classList属性
// 在操作类名时，需要通过className属性添加、删除和替换类名
// 使用className有很大的局限性！！！ --> 改用使用"classList"
// classList属性是新集合类型DOMTokenList的实例
// DOMTokenList类型还定义了以下几个方法：
/* a, add(value): 将给定的字符串添加到列表中，如果该值存在，则不添加
b, contains(value): 表示列表中是否存在给定的值，存在返回true, 否则false
c, remove(value): 从列表中删除给定的字符串
d, toggle(value): 如果列表中存在给定的值，删除它；否则，添加它
*/
// var div = document.getElementsByTagName('div')[0];
// console.log(div.className);
// console.log(div.classList);
// 删除‘bd’类
// div.classList.remove('bd');
// console.log(div.className);
// 添加“current”类
// div.classList.add('current');
// console.log(div.className);
// 切换“user”类
// div.classList.toggle('current');
// console.log(div.className);
// 确定元素中是否包含既定的类名
// if (div.classList.contains('bd') && !div.classList.contains('didi') ){
// do something here!
// }
// 迭代类名
// for (var i = 0, len = div.classList.length; i < len; i ++){
// do something!
// }
// 2, 焦点管理 --> HTML5添加了辅助管理DOM焦点的功能
// (1) document.activeElement属性 --> 始终会引用DOM中当前获得焦点的元素
// 元素获得焦点的方式：页面加载、用户输入（通常是通过按Tab键）、在代码中调用focus()方法
// var button = document.getElementById('myButton');
// button.focus();
// alert(document.activeElement === button); // true
// 默认情况下，document.activeElement中保存的是document.body元素的引用
// 文档加载期间，document.activeElement的值为null
// (2) document.hasFocus()方法 --> 确定文档是否获得焦点
// var button = document.getElementById('myButton');
// button.focus();
// alert(document.hasFocus()); // true
// 【总结】
// 1, 查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点 --> 用途：提高Web应用的无障碍性
// 2, 无障碍Web应用的一个主要标志为：恰当的焦点管理
// 3, HTMLDocument的变化
// (1) readyState属性： 1，loading，表示正在加载的文档
// 2，complete，表示加载完成的文档
// 使用readyState属性最恰当方式，就是通过他来实现一个指示文档已经加载完成的指示器
// if (document.readyState == 'loading') {
// alert('loading');
// }
// (2) 兼容模式
// 自从IE6 开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能
// 在标准模式下 --> document.compatMode == 'CSS1Compat'
// 在混杂模式下 --> document.compatMode == 'BackCompat'
// if (document.compatMode == 'CSS1Compat'){
// alert('standards mode');
// } else {
// alert('Quirks mode');
// }
// (3) head属性 --> HTML5新增加的一个属性
// var head = document.head || document.getElementsByTagName('head')[0];
// console.log(head);
// 4, 字符集属性
// （1）charset属性：表示文档中实际使用的字符集
// 通过<meta>元素、响应头部或直接设置charset属性修改这个值
// alert(document.charset); // utf-8
// document.charset = 'utf-16';
// console.log(document.charset);
// （2）characterSet属性：表示根据默认浏览器及操作系统的设置，当前文档的默认的字符集应该是什么
// 如果文档没有使用默认的字符集，那charset and defaultCharset属性的值可能有不一样
// if (document.charset != document.defaultCharset){
// alert('custom character set being used!');
// }
// 通过（1）和（2）属性可以得到文档使用的字符编码的具体信息
// 5, 自定义数据属性
// HTML5规定可以为元素添加非标准的属性，但要添加前缀“data-” --> 为元素提供与渲染无关的信息，或者提供语义信息（见上）
// 添加了自定义属性后，可以通过元素的dataset属性来访问自定义属性的值
// dataset属性是DOMStringMap的一个实例，也就是一个名值对的映射
// 在这个映射中，每个data-name形式的属性都有一个对应的属性，只不过属性名没有"data-"前缀（比如，自定义属性data-myname，那映射中对应的属性就是myname）
var div2 = document.getElementById('mydiv2');
console.log(div2.dataset);
// 取得自定属性的值
var appId = div2.dataset.appid; // 注意这里div2.dataset.appid中的，要写成“appid”!
var myname = div2.dataset.myname;
console.log(appId);
console.log(myname);
// 设置值
div2.dataset.appid = '1111';
div2.dataset.myname = 'lice';
console.log(div2.dataset.appid);
console.log(div2.dataset.myname);
// 【总结】 如果要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义的数据属性
// 在跟踪链接或者混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的哪个部分
// 6, 插入标记
// (1) innerHTML属性
// 在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记
// var divAboutContent = document.getElementById('content');
// console.log(divAboutContent.innerHTML);
// 【注意】不同浏览器访问的文本格式不一样
// (1) IE and Opera会将所有标签转换成大写形式
// (2) Safari，Chrome，FireFox则会按照原本文档中的格式返回HTML，包括空格和缩进
// 在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换元素原先的“所有子节点”
// a, 如果设置的值仅为文本而没有HTML标签，那么结果就是设置纯文本
// divAboutContent.innerHTML = 'hello world!';
// b, 为innerHTML设置的包含HTML的字符串值与解析后innerHTML的值大不相同
// divAboutContent.innerHTML = 'hello & welcome, <b>\“reader\”!</b> ';
// console.log(divAboutContent.innerHTML);
// 为innerHTML设置HTML字符串后，浏览器会将这个字符串解析为相应的DOM树
// 因此，设置innerHTML之后，再从中读取HTML字符串，会得到与设置时不一样的结果
// --> 返回的字符是根据原始HTML字符串创建的DOM树经过序列化后的结果
// c, 在大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本（除了IE8 及其更早版本）
// <script>元素被认定为“无作用域的元素”，即在页面中看不到的元素，与<style> and 注释类似
// d, 大多数浏览器都支持以直观的方式通过innerHTML插入<style>元素
// divAboutContent.innerHTML = '<style> body {background-color: orange; } </style>'
// e, 并不是所有元素都支持innerHTML属性
// for example: <html> <head> <title> <table>
// divAboutContent.innerHTML = '<table><tr>eweq</tr></table>';
// f, 无论什么时候，只要使用innerHTML从外部插入HTML，都应该首先以可靠的方式处理HTML！！！
// (2) outerHTML属性
// 在读模式下，outerHTML属性返回调用元素以及所有子节点的HTML标记
// 在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换“调用元素”
var divAboutContent = document.getElementById('content');
console.log(divAboutContent.outerHTML);
// divAboutContent.outerHTML = '<p>this is a paragraph! </p>';
// (3) insertAdjacentHTML()方法
// 接收2个参数： 插入位置 and 要插入的HTML文本
// 第一个参数必须是：a, 'beforebegin'：在当前元素之前插入一个紧邻的“同辈”元素
// b, 'afterbegin'：在当前元素之下插入一个新的“子元素” or 在当前元素的第一个子元素之前插入新的子元素
// c, 'beforeend'：在当前元素之下插入一个新的“子元素” or 在当前元素的最后一个子元素之后插入新的子元素
// d, 'afterend'：在当前元素之后插入一个紧邻的“同辈”元素
divAboutContent.insertAdjacentHTML('beforebegin', '<p>我们来了！</p>');
divAboutContent.insertAdjacentHTML('afterbegin', '<p>你们来了！</p>');
divAboutContent.insertAdjacentHTML('beforeend', '<p>他们来了！</p>');
divAboutContent.insertAdjacentHTML('afterend', '<p>我们大伙都来了！</p>');
// (4) 内存与性能问题
// 在删除带有事件处理程序或引用了其他JavaScript对象的子树时，就有可能导致内存占用问题
// 使用innerHTML, outerHTML and insertAdjacentHTML()方法时，最好先手工删除要替换的元素的所有事件处理程序和JavaScript对象属性
// 使用innerHTML属性与通过多次DOM操作先创建节点再指定他们之间的关系相比，效率高很多
// --> 设置innerHTML or outerHTML时，会创建一个“HTML解析器”
// 当然地，创建和销毁HTML解析器会带来性能损失，所以最好能够将设置innerHTML或outerHTML的次数控制在合理的范围内！！！
// 7, scrollIntoView()方法
// scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中
// 传参数：true或者不传入任何参数 --> 窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐
// false --> 调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部都会与视口顶部平齐），不过顶部不一定平齐
// 让元素可见
// document.forms[0].scrollIntoView();
divAboutContent.scrollIntoView();
// 当页面发生变化时，一般会用这个方法来吸引用户的注意力
// 为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素
</script>
</body>
</html>
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
