玩笑过后

导航

专有扩展

由于页面某项功能的缺失,开发商会一如既往向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='width:300px;height:500px;border:1px solid red'>klkx1</div>
    <div id='div2' style='width: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() 为标准方法

有几个非标准的方法

posted on 2018-08-27 18:46  玩笑过后  阅读(85)  评论(0编辑  收藏  举报