day16 javascript

						day16知识点

一、DOM下 ：操作
1.样式操作 ：设置
- 方式
- 可见的内置属性（html属性）：style
注意事项 ：js中不允许出现中划线，改成小驼峰
- obox.style.fontSize=‘100px’；
样式的值。一般都是字符，某些属性可以写成数值
- obox.style.opacity=‘0.5’
样式中行高的设置，加不加单位，是不同的样式
- obox.style.lineHeight=‘20px’ 不加单位为多少倍
style可以直接设置某个css，也可以通过cssText设置多个，没设置部分为空
- obox.style.cssText=‘width：100px：height=100px；…’
注意css中的复合属性，如果只设置一部分，其余会被清空
- obox.style.background=‘red’
- 获取
- 行内： 可见的内置属性（html属性）：style
不能获取非行内
- 非行内：
使用内置方法：getComputedStyle
可以获取非行内，也能获取行内。 存在兼容问题
js：function getStyle（ele，attr）{
if（ele.currentStyle）{
return ele.currentStyle[attr]
}else{
return getComputedStyle（ele，false）[attr]
}
}
- 使用习惯：
- 设置样式：使用stylr属性
- 获取样式：使用getComputedStyle及其兼容
- 如果不想通过js设置行内样式，也可以通过修改class，id，实现样式切换

2.尺寸类信息的快捷获取方法
	 - console.log(obox.clientHeight);    cont + padding 
	 - console.log(obox.clientwidth);     cont + padding 

	 - console.log(obox.offsetHeight);    cont + padding + border
	 - console.log(obox.offsetWidth);     cont + padding + border
	
	 - console.log(obox.scrollHeight);    cont + padding + 可以滚动的距离
	 - console.log(obox.scrollWidth);     cont + padding + 可以滚动的距离

	 - console.log(obox.offsetLeft);      margin + position 
	 - console.log(obox.offsetTop);       margin + pasition		
	  - 以上都是只能获取，不能设置
	  - document.onclick = fucntion（）{
			即可获取有能设置
			obox.scrollTop=666;}

3.元素操作 ：元素是什么？标签操作
	3.1 增加： 通过js增加标签
		- 创建
		  - var p = document.createElement（‘p’）
		- 插入
		  - obox.appendChild（p）
		  - obox.insertBefore（p，span）
		 功能：插入到指定元素的前面
		 参数1：新元素
		 参数2：插入到哪个元素之前
		 一次创建只能得到一个元素，不会随着多次插入，出现多个元素
	3.2删除：通过js删除标签
		 - 要删除的元素：.remove（）
		 - 父元素.removeChild（要删除的子元素）
		 - 一次只能删除一个，要想删除多个，循环
	
	3.3改：修改，比如把div改span
		 - 获取或设置标签的全部内容，包括标签自身
			关键字：outerHTML

	3.4查：选择器就是查询（获取）元素

4.补充
	- 创建文本节点
		var a = document.createTextNode（‘文本’）
	- obj.cloneNode（）
		克隆obj的节点，可以传一个布尔值为参数，参数为ture，连同obj子元素一起克隆
	- obj.repChild（新加的节点，被替换的节点）