web开发学习总结之原生js零散知识点

1 IIFE

IIFE就是immediately-invoked function expression，即时调用函数表达式

如果一个函数，在定义的时候，我们就想直接调用它，就是一个IIFE。
我们试图在定义函数的后面，直接写圆括号：

/* 直接在后面写()会报错 */
function fun(){
	alert("哈哈")
}();

控制台报错，这是因为函数是一个函数体，并不是表达式，只有表达式能够用()来执行。
所以就要把function fun(){}“降级”， 从函数体降级为表达式。方法有很多：

+function fun(){
	alert("哈哈")
}();

-function fun(){
	alert("哈哈")
}();

但这样写有点特立独行，标准的IIFE写法如下，括号把函数定义给括起来然后再调用。

(function(){
	alert("哈哈");
})();

IIFE里面的函数，都是匿名函数。

2 DOM

2.1 获取元素

/* 下面两个全线兼容 */
document.getElementById();				// 通过id得到元素
document.getElementsByTagName();		// 通过标签名得到元素们

/* 这两个不是全线兼容的 */
document.getElementsByClassName();	通过类名得到元素
document.querySelector();			通过选择器得到元素

2.2 innerHTML

ele.innerHTML属性就是HTML标签内部的文本。可以读，可以设。

2.3 获取样式

2.3.1 行内样式

行内样式（就是直接在标签上设置style=""这种）的获取直接用.style，用.style设置属性的时候用驼峰命名法。如下面的backgroundColor，fontSize。
对应的css是background-color，font-size。

var oP = document.getElementById("pp");
oP.style.backgroundColor = "skyblue";
oP.style.fontSize = "100px";

2.3.2 计算后样式

.style只能获取行内样式，那如何获取内联样式（style标签对中的样式）或外联样式（link引入的样式）呢？使用js中的计算后样式。

高级浏览器：
window.getComputedStyle(oDiv).getPropertyValue("padding-left");
getComputedStyle(oDiv).getPropertyValue("padding-left");
getComputedStyle(oDiv)["padding-left"];	//注意 写的是padding-left
	
IE6、7、8：
oDiv.currentStyle.paddingLeft;
oDiv.currentStyle["paddingLeft"]; //注意 写的是paddingLeft
/*  */

注意： 当盒子没有设置高度时，高度完全是靠文字撑的，用currentStyle.height获得的值是auto字符串，不是对应的像素值。（ps: 这中情况可使用2.4.2的offsetHeight获得）

2.4 位置和尺寸

2.4.1 offsetLeft和offsetTop

都是数值。

一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离。

那么谁是自己的offsetParent呢？不同浏览器有差异，如图。

	IE6、7	IE8	IE9、IE9+、高级浏览器
offsetParent	如果自己没有定位，那么就是自己父亲中有width或者有height或者有定位的元素。如果自己有定位，那么就是和高级浏览器一致。	和高级浏览器一致	自己祖先元素中，离自己最近的已经定位的元素
offsetLeft	和高级浏览器一致	多算一条border	自己的border外到offsetParet对象的border内

最好的使用方式：
自定位，父无边 (父亲也要定位，但是为了顺口，就不多说了)
这样使用，所有浏览器的值都是一样的。

2.4.2 offsetWidth和offsetHeight

全线兼容。都是数值。
一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度。

特别注意，IE6、7、8下，盒子没有高度，文字撑的，用currentStyle.height是auto，体现出了offsetHeight的好用。

2.4.3 clientWidth和clientHeight

都是数值。
clientWidth就是自己的width+padding的值。 也就是说，比offsetWidth少了border。