《JavaScript高级程序设计（第3版）》学习笔记43：chapter_11-4 专用扩展

本文链接：https://blog.csdn.net/weixin_44582681/article/details/101126834
让学习“上瘾”，成为更好的自己！！！
<!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>专用扩展</title>
    
</head>

<body>
    <div>
        <p id="p1">dfajldfd我们的明天！！</p>
        <p>fadk12312313</p>

    </div>

    <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>

    <script>
            /*
              向DOM中添加专有扩展，弥补功能上的不足！  
              并非所有的浏览器都支持这些专有扩展，因此，请慎用！！
              
                
                
            */
    
            // 1, 文档模式 --> only for IE
            // IE 8引入了一个新的概念叫“文档模式” --> 决定可以使用什么功能，或者说，文档模式决定了你可以使用哪个级别的CSS，可以在JavaScript中使用哪些API，以及如何对待文档类型
    
            // 【注意】涉及该部分知识时在来看！！！ 
    
    
    
            // 2, children属性 --> HTMLCollection的实例，只包含元素中同样还是元素的子节点
            // 在元素只包含元素子节点时，children and childNodes这2个属性的值相同
            // var div = document.getElementsByTagName('div')[0];
            // console.log(div.children);
            // console.log(div.childrenNodes);
    
    
    
    
    
            // 3, contains()方法  --> 判断某个节点是不是另一个节点的后代
            // 调用contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点
            // var div = document.getElementsByTagName('div')[0];
            // var p1 = document.getElementById('p1');
            // alert(div.contains(p1));

            // 通用的contains函数

            // 涉及时在来查看！！！


    
    
            // 4, 插入文本
            // (1) innerText属性 --> 可以操作元素中包含的“所有文本内容”，包括子文档树中的文本
            // a, 读时，他会按照“由浅入深”的顺序，将子文档树中的所有文本拼接起来
            // b, 写时，会删除元素的所有子节点，插入包含相应文本值的文本节点
            // var divAboutContent = document.getElementById('content');
            // console.log(divAboutContent.innerText);
            // divAboutContent.innerText = 'hello world!';

            // c, 设置innerText属性的同时，也对文本中存在的HTML语法字符进行编码
            // divAboutContent.innerText = 'Hello & welcome, <b>\"reader\"!</b>';
            // console.log(divAboutContent.innerText);

            // d, 设置innerText永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，就必须对文本进行HTML编码
            // 利用这一点，可以通过innerText属性过滤掉HTML标签 --> 将innerText设置成等于innerText，就可以去掉所有的HTML标签
            // var divAboutContent = document.getElementById('content');
            // divAboutContent.innerText = divAboutContent.innerText;

            // FireFox不支持innerText，但支持类似作用的textContent属性

            // 通用函数
            // function getInnerText(element){
            //     return (typeof element.textContent === 'string')? element.textContent : element.innerText;
                    
            //     }

            // function setInnerText(element, text){
            //     if (typeof element.textContent === 'string'){
            //         element.textContent = text;
            //     } else{
            //         element.innerText = text;
            //     }

            // }

            // setInnerText(divAboutContent, 'Hello world!!! my love!');
            // alert(getInnerText(divAboutContent));

            // 因为innerText and textContent属性存在区别，因此，避免跨浏览器兼容问题的最佳途径，就是从不包含行内样式或行内脚本的DOM子树副本或者DOM片段中读取文本



            // (2) outerText属性  --> 【尽量不要用！！！】
            // 除了作用范围扩展到包含他的节点之外，outer and innerText基本没区别
            // 读时，outerText and innerText没区别
            // 写时，outerText不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）
            var divAboutContent = document.getElementById('content');
            // console.log(divAboutContent.outerText);
            divAboutContent.outerText = '你么的就放大';  // 这个语句会完全替换掉div#content这个元素，该元素会从文档中删除，无法访问！！
            console.log(divAboutContent.outerText);
            var divAboutContent = document.getElementById('content');
            console.log(divAboutContent);  // null
    
            
            // 5, 滚动
            // 下面列出的方法都是对HTMLElement类型的扩展，因此所有元素中都可以调用
            // (1) scrollIntoViewIfNeeded(alignCenter)
            // (2) scrollByLines(lineCount)：将元素的内容滚动指定的行高
            // (3) scrollByPages(pageCount)：将元素的内容滚动指定的页面高度
          
            // scrollIntoView() and scrollIntoViewIfNeeded()的作用对象是元素的容器
            // scrollByLines() and scrollByPages() 影响的是元素自身
    
    
    
    
        </script>
</body>

</html>