Javascript的组成——EMACScript、DOM、BOM

EMACScript:一种规范，JS必须准守它的约定，JS的核心。

DOM:文档对象模型，W3C标准，JS访问HTML文档的接口。

BOM:浏览器对象模型，没有统一的标准。JS访问浏览器的接口。

EMACScript

1、什么是EMACScript？

EMACScript可以为不同种类的宿主环境提供核心的脚本编程能力

浏览器对于EMACScript来说是一个宿主环境，但并不是唯一的宿主环境。另外的宿主环境比如Flash,其上的编程语言是ActionScript.

个人理解：

1、遵循EMACScript这一标准的语言很多。因此，它只是组成JS的一部分，但也是核心部分

2、核心的脚本语言(EMACScript)与特定的宿主环境(浏览器BOM)是分开进行规定的

3、浏览器之于JavaScript，相当于Flash之于ActionScript

4、JavaScript是EMACScript在浏览器上的扩展

2、EMACScript规定了什么？

EMACScript仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。其他语言，如JavaScript、ActionScript等

，将其作为功能的基准，结合不同的宿主环境进行扩展：

每个浏览器都有它自己的 ECMAScript 接口的实现，然后这个实现又被扩展，包含了 DOM 和 BOM

 3、ECMAScript 的版本

 

DOM

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。

DOM包含12种节点，一般用前三种：元素节点[1]、属性节点[2]、文本节点[3]。

nodeType属性：当前元素的节点类型。元素.nodeType,返回类型编号，如文本节点，返回1。

子节点操作：

childNodes属性：

<ul id-"ul">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

<script>
var oUl=document.getElementById("ul");
alert(oUl.childNodes.length);
//标准情况下返回9，IE8以下返回4
//因为标准下返回的节点包括文本节点（ul下的回车换行符算一个文本节点）
</script>

 childNodes属性只返回子元素节点和子元素节点下的文本节点，不返回孙级元素节点。

对于非法嵌套（ul下嵌套p）标准下，p算作子元素节点，IE7以下不算。

children属性：不包含文本元素，上述返回4，推荐使用

firstChild属性：获取元素的第一个子节点，问题：标准下会包含文本节点。

解决办法：在标准下获取元素第一个子节点的属性：firstElementChild，但非标准下没有这个属性，要做好兼容处理。

if(oUl.firstElementChild){//标准下
    oUl.firstElementChild.style.background='red';
}
else{    //非标准
    oUl.firstChild.style.background='red';
}

更简单的兼容处理：
var oFirst=oUl.firstElementChild ||oUl.firstChild;
oFirst.style.background='red';

更好的替换方法：
oUL.children[0].style.background='red';

类似属性

lastChild属性

lastElementChild属性

nextSibling属性

nextElementSibling属性

previousSibling属性

previousElementSibling属性

父节点操作：

parentNode属性：没有兼容问题。

offsetParent属性：返回最近的positioned父元素。存在较大的兼容性问题。

IE7以下，若当前元素不存在定位，则它的offsetParent默认是body，有定位则返回html（标准下无论是否有定位都返回body）

IE7以下，若当前元素的某个父级触发了layout（比如设置了zoom属性），则offsetParent定位到该父级

 什么是layout和zoom？

layout即为布局

zoom：IE浏览器专用属性，检索或设置对象缩放比例。

除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

IE的hasLayout属性(http://blog.sina.com.cn/s/blog_57e7d45a0100vb94.html)

其他常用属性：

offsetLeft[Top]属性:

标准下：返回当前元素到最近positioned父元素的距离

IE7及以下：若当前元素无定位，则返回它到body的距离；若有定位，则返回到它最近positioned父元素的距离

各种宽度属性：

width：样式宽

clientWidth：可视区宽=样式宽+padding

offsetWidth：样式宽+padding+border

//获取元素到页面绝对距离的函数
function getPos(obj){
var pos={left:0;top:0};
    while(obj){
        pos.left+=obj.offsetLeft;
        pos.top+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return pos;
}    　

属性操作：

//可以操作自定义属性，而一般的点操作和中括号操作无法操作自定义属性

getAttributte()  

setAttributte()

removeAttributte()

元素添加方法：

appendChild()属性：父元素.appendChild(子元素)      //插入到子元素列表最后

insertBefore()属性：父元素.insertBefore(新元素，参考元素)    //插入到参考元素的前面

replaceChild()属性：父元素.replaceChild(新元素，旧元素)   //相当于剪切——粘贴，原来位置的“新元素”不存在了

removeChild()属性：父元素.removeChild(子元素)

BOM

浏览器对象模型，提供了很多对象，用于对浏览器窗口进行访问和操作，这些功能与具体网页内容无关；没有相关的标准，因此每个浏览器都有自己的BOM实现

window对象

navigator对象

screen 对象

history对象

location对象