JavaScript基础 DOM节点、BOM

DOM节点

childNodes与children

nextSibling与nextElementChild

parentNode与offsetParent

offsetTop与offsetLeft

DOM节点之获取宽高

BOM相关操作

window.open()

window.navigator

window.location

window相关事件

clientHieght、offsetHeight、scrollHeight的区别

DOM节点

NodeType:节点类型有12种
（常见的有 元素节点1、文本节点3、属性节点2 ==> ELEMENT_NODE:1、ATTRIBUTE_NODE:2、TEXT_NODE:3）；
childNodes：（子节点集合）
IE678只包含元素节点，其他浏览器包含元素节点+其他节点；
可以用 .length得到长度；
children：（只包含元素节点，推荐使用）；
firstChild：（第一个子节点）IE678只会是元素，其他可能是文本或元素；
firstElementChild：IE678没有这个属性，其他第一个元素节点；
lastChild / lastElementChild
nextSibling / nextElementSibling：(IE678没有这个属性);
previousSibling / previousElementSibling：（IE678没有这个属性）；
parentNode：（元素的父节点）
offsetParent：（元素有定位属性的父节点，找不到就body）
offsetLeft / offsetTopDom Document Object Model 文档对象模型
文档：html页面
文档对象：html里面元素
文档对象模型：定义（目的：让js更好的操作dom节点）

childNodes与children

<div id="box">
 	<ul id="list">
 		<li>1</li>
 		<li>2</li>
 		<li>3</li>
 		<li>4</li>
 	</ul>
 </div>

window.onload = function(){
 var oBox = document.getElementById('box');
 var oList = document.getElementById('list');
 // // 节点长度
 // alert( oBox.childNodes.length );  // 3([text, ul#list, text])  ==> IE678不包括文本节点
 // // 节点类型
 // alert( oBox.childNodes[2].nodeType );  // 3
 // alert( oBox.children[0].nodeType );  // 1 (ul#list)
 // alert( oBox.firstChild.nodeType ); // 3 IE678元素节点 其他文本节点
 // alert( oList.firstElementChild ); // [object HTMLLIElement]
 // // 兼容问题处理
 // if(oList.firstElementChild){
 //  oList.firstElementChild.style.color = 'red';
 // }else{
 //  oList.firstChild.style.color = 'red';
 // }
 if(oList.children){
  oList.children[0].style.color = 'red';
 }
 if(oList.children){
  oList.children[oList.children.length-1].style.color = 'yellow';
 }
}

nextSibling与nextElementChild

<div id="box">
	<div>前面</div>
	<ul id="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<p>后面</p>
</div>

var oList = document.getElementById('list');
// oList.nextSibling.style.color = 'red';
// // 谷歌下Uncaught TypeError: Cannot set property 'color' of undefined，IE下可以
// oList.nextSibling  ==> #text  ==> nodeType:3
// oList.nextSibling.nextSibling.style.color = 'red'; 
// oList.nextElementSibling.style.color = 'red'; 

//兼容写法
if(oList.nextElementSibling){
 oList.nextElementSibling.style.color = "red";
}else{
 // IE678
 if(oList.nextSibling && oList.nextSibling.nodeType==1){
  oList.nextSibling.style.color = "red";
 } 
}


oList.previousElementSibling.style.color = "red"; // 谷歌
// oList.nextElementChild.style.color = 'red'; // IE678

parentNode与offsetParent

<div id="box" style="width:100px;">
 <p>前面</p>
 <ul id="list">
  <li >1</li>
  <li>2</li>
  <li id="li1">3</li>
  <li>4</li>
 </ul>
 <p>后面</p>
</div>

window.onload = function(){
	var oList = document.getElementById('list');
	// alert(oList.parentNode.id);  // box 没有兼容性问题
	// 需求叫id为li1的颜色不变，其他的颜色变红(类似siblings())
 // 实现了类似jQuery里面的siblings()方法
 var li1 = document.getElementById('li1');
 var li1s = li1.parentNode.children;
 for(var i=0;i<li1s.length;i++){
  if(li1s[i] != li1){
   li1s[i].style.color = 'red';
  }
 }
}

offsetTop与offsetLeft

元素.offsetLeft 
	父级没有定位的时候：
		IE6.7得到的是元素到offsetParent的距离
		其他浏览器得到的是到html的距离
父级有定位的时候：
		得到的是元素到offsetParent的距离
		//元素自己有定位的时候，得到的是元素到定位父级的距离

#div1{width:500px;padding:50px;background:red;}
#div2{width:400px;padding:50px;background:green;}
#div3{width:300px;padding:50px;background:gray;}

<div id="div1">
	<div id="div2">
		<div id="div3">div3</div>
	</div>
</div>
<div id="div4">div4</div>

DOM节点之获取宽高

var oDiv3 = document.getElementById("div3");
alert(oDiv3.style.height); // 100px ==> 内联样式高度(带单位px)
alert(oDiv3.clientHeight); // 200 ==> 可视高度：自身height+padding(不带单位)
alert(oDiv3.offsetHeight); // 202 ==> 真实高度：自身height+padding+border(不带单位)