《JavaScript高级程序设计 (第3版)》学习笔记42:chapter_11-3 HTML5

让学习“上瘾”,成为更好的自己!!!

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值