• 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属性:

     1 <ul id-"ul">
     2     <li>11111</li>
     3     <li>22222</li>
     4     <li>33333</li>
     5     <li>44444</li>
     6 </ul>
     7 
     8 <script>
     9 var oUl=document.getElementById("ul");
    10 alert(oUl.childNodes.length);
    11 //标准情况下返回9,IE8以下返回4
    12 //因为标准下返回的节点包括文本节点(ul下的回车换行符算一个文本节点)
    13 </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对象

  • 相关阅读:
    在线合并多个Excel
    http3了解
    LPC55S16的Classical CAN 测试
    LPC55xx:DCDC供电电路分析及检测方法
    LPC55xx+PAJ7620手势传感器实现USB PPT翻页器
    使用I.MXRT单芯片配置双路以太网
    RT1052同时开两路ADC要怎么做
    基于LwIP实现在一个网口上同时支持IPv6+IPv4通信
    RT1010SDK上手I2C,GXHT30温湿度传感器
    i.MX RT1050 ADC2调试工作总结
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5487107.html
Copyright © 2020-2023  润新知