专有扩展
由于页面某项功能的缺失,开发商会一如既往向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() 为标准方法
有几个非标准的方法