zoukankan      html  css  js  c++  java
  • 专有扩展

    由于页面某项功能的缺失,开发商会一如既往向DOM中添加专有属性

    1、‘文档模式’

    IE8引入的新的概念:

    也就是说可以自定义需要哪一种文档类型

    document.documentMode 是IE专有属性

    2、children属性

    children属性在IE8以前包含注释节点

    IE8以后的标准浏览器返回元素的节点

    3、contains()方法

    测试节点是否是该节点的后代节点

    compareDocumentPosition()方法

    该方法会返回不同的掩码,反应该节点在坐标节点的位置

    4、插入文本

    innerText

    对象的所有文本节点拼接起来,如果有折行返回一个空格

    innerHTML 返回对象下的所有节点

    <body>
        <div id='div1'>klkx<span>123</span></div>
        <div id='div2'>klkx
            <span>123</span>
        </div>
        <script>
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            console.log( oDiv1.innerHTML );
            console.log( oDiv1.innerText );
            console.log( oDiv2.innerHTML );
            console.log( oDiv2.innerText );//包含折行
        </script>
     </body>

    innerText可以读也可以写

    innerText永远只会生成当前节点的子节点,所以写在字符串内的标签,会转变为字符串添加入子节点中

    textContent属性:返回节点的文本节点,但是会返回父节点的注释和空行

    <body>
        <div id='div1'>klkx<span>123</span></div>
        <div id='div2'>klkx
            <--!
                注释
            -->
            <span>123</span>
        </div>
        <script>
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            console.log( oDiv1.innerHTML);
            console.log( oDiv1.innerText );
            console.log( oDiv1.textContent );
            console.log( oDiv2.innerHTML );
            console.log( oDiv2.innerText );//包含折行
            console.log( oDiv2.textContent );
        </script>
     </body>

    5、outerText属性

     和innerText的结果完全一样

    6、滚动

    <body style='height:3000px'>
        <a id='a1'>top</a>
        <div id='div1' style='300px;height:500px;border:1px solid red'>klkx1</div>
        <div id='div2' style='300px;height:500px;border:1px solid red'>klkx2</div>
        <a id='a2'>bottom</a>
        <script>
            var a1 = document.getElementById('a1');
            var a2 = document.getElementById('a2');
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            
            function top_fn(){
                oDiv2.scrollIntoView(true);
            }
            function bottom_fn(){
                oDiv1.scrollIntoView(true);
            }
            a1.onclick = top_fn;
            a2.onclick = bottom_fn;
        </script>
     </body>

     scrollIntoView() 为标准方法

    有几个非标准的方法

  • 相关阅读:
    QT添加托盘代码
    2010年左右我说要做一个操作系统的时候,绝大多数人以为那是天方夜谭,是堂吉诃德式的行为。今天,我们讨论YunOS会成为一个新的生态和创新平台,更多人相信这件事是可能的。
    台哥算法练习:八皇后问题
    台哥算法练习 汉诺塔问题
    台哥算法练习:数组排序的几种算法
    面试遇到的两道算法题
    台哥算法练习 50人围圈报数
    台哥算法练习 自己写的一个LinkedList
    台哥算法练习 自己写的一个ArrayList
    台哥算法练习 寻找和为某值的子集
  • 原文地址:https://www.cnblogs.com/jokes/p/9544076.html
Copyright © 2011-2022 走看看