JavaScript基础（八）DOM节点、BOM相关操作

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 / offsetTop
Dom 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';
	}
}

注意：
childNodes
	其他浏览器：元素节点+其他节点（dom节点类型）
	ie678       只有元素节点

children  元素节点 推荐使用

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';  // ^_^ 谷歌下这样就可以了，IE下有不行了

//兼容写法！
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';
		}
	}
}

// ===>  封装siblings
function siblings(obj, callback){
	var objs = obj.parentNode.children;
	for(var i=0; i<objs.length;i++){
		if(objs[i] != obj){
			callback.call(objs[i]);
		}
	}
}	
var li1 = document.getElementById('li1');
siblings(li1, function(){
	console.log(this);
	this.style.border = '1px solid red';
	// this.style.color = 'red';
});
// alert(oList.offsetParent);  // [object HTMLBodyElement]
// alert(oList.offsetParent.tagName);  // BODY

元素.offsetParent
在元素没有定位的情况下，
    得到的是第一个定位的父元素，找不到就算body
	IE7 得到的是第一个layout属性变化的父元素
元素有定位情况下，
	得到的是第一个定位的父元素

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>

var oDiv3 = document.getElementById('div3');
// alert(oDiv3.offsetLeft); // 108

// var oDiv4 = document.getElementById('div4');
// alert(oDiv4.offsetLeft);	// 8
// alert(oDiv4.offsetParent.tagName); // BODY

// 封装offset函数，得到obj到页面顶部或者左部绝对距离
function offset(obj){
	var pos = {left: 0, top: 0};
	while(obj){
		pos.left += obj.offsetLeft;
		pos.top += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return pos;
}

console.log(offset(oDiv3));   //{left: 108, top: 108}

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(不带单位)

BOM相关操作

BOM : Browser Object Model

window.open()

<input type="button" id="btn" value="点我打开一个新窗口">

document.getElementById('btn').onclick = function(){
	/*
	open();
	参数1：地址路径  不写==>打开一个空白页面
	参数2：【target】 不写是在新的窗口打开，默认"_blank"    
				_self： 本页面打开
				_new：新页面打开
	*/ 
	window.open('http://www.baidu.com');
	open('http://www.baidu.com', '_new');
	/*
	var newWin = window.open();
	newWin.document.title = '这是一个新的窗口';  // ^_^
	newWin.document.body.innerHTML = '晚上好！！！！！！！';  // ^_^
	*/
	// var newWin = window.open('http://www.baidu.com');
	// newWin.document.title = '这是一个新的窗口';  // -_-  跨域了
	// newWin.document.body.innerHTML = '晚上好！！！！！！！'; // -_-

	/*
	close();
	关闭窗口
	*/ 
	var newWin = window.open();
	newWin.document.title = '这是一个新的窗口';  // ^_^
	newWin.document.body.innerHTML = '晚上好！！！！！！！<br/><input type="button" id="btn" value="点我关闭当前窗口">';  // ^_^
	newWin.document.getElementById('btn').onclick = function(){
		newWin.close();
	}
}

window.navigator

查看浏览器的相关信息

console.log( window.navigator.userAgent ); // "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"
// 判断浏览器
var info = window.navigator.userAgent;
if(info.indexOf('MSIE') != -1){
	alert('我是IE')
}else{
	alert('我不是IE')
}

window.location

// http://www.yw.nodejs.com:88/js09/index2.html
window.location.hash			==>''
      .host 		==>'www.yw.nodejs.com:88'
      .hostname  	==>'www.yw.nodejs.com'
      .href  		==>'http://www.yw.nodejs.com:88/js09/index2.html'
      .origin		==>'http://www.yw.nodejs.com:88'
      .pathname 	==>'/js09/index2.html'
      .port  		==>'88'
      .protocol		==>'http:'

window相关事件

window.onresize:窗口放大缩小时触发
window.onscroll:滚动条滚动时触发

clientHieght、offsetHeight、scrollHeight的区别

alert(oBox.clientHeight); // height+padding
alert(oBox.offsetHeight); // height+padding+border
alert(oBox.scrollHeight); // height+padding