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