Javascript基础五（BOM和DOM）

1.BOM概念

什么是BOM？

        BOM是Browser Object Model的缩写，简称浏览器对象模型。这个对象就是window

        BOM提供了独立于内容而与浏览器窗口进行交互的对象

        BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

        BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C

        BOM最初是Netscape浏览器标准的一部分

 

    由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

 

 

    JavaScript的组成：ECMAScript、BOM、DOM，其中ECMAScript为JavaScript的核心，但是如果要在浏览器中使用JavaScript，那么BOM才是JavaScript的核心。

    

        在什么地方就得遵循什么地方的规则。也就是说，无论ECMAScript有多权威，进了浏览器，就得遵守浏览器的规则。

 

2.window对象介绍，内置对象（location／history／navigator）及方法

    什么是window对象，window对象是浏览器内置的一个对象，相当于BOM的一个抽象

 

    window对象是js中全局对象的寄存地。

 

    window对象的常见方法：

    alert(要显示的文本);      //弹出信息框
    prompt(提示对话框信息);   //弹出输入框，点击确定，返回字符串，点击取消，返回null
    confirm(提示文字);        //点击确定返回true，点击取消返回false

    close();                //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭
                            //不允许关闭非脚本打开的页面

    open(url,name,feature,replace);
        //open('http://www.baidu.com','_blank','width=300,height=300')
        //谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页   

 

window对象下内置的子对象：

    1.history对象：该对象包含浏览器访问过的url。

        该对象的属性：

        history.length;         //返回历史记录的数量

        该对象的方法：

        history.back();         //后退，加载前一个url。
        history.forward();      //前进，需要后退一下之后，才有前进的方向
        history.go(num);        //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新

        

    2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。

        该对象的属性：

        location.href;          //设置或返回完整的url
        location.search;        //返回url?后面的查询部分
        location.hash;          //是一个可读写的字符串，是url的锚部分（从#开始的部分）哈希

        该对象的方法：

        location.reload();      //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？
        location.assign(url);   //加载新页面，当url为空字符时，加载当前页面

 

    3.navigator对象：浏览器信息

        navigator.appName;      //返回当前浏览器名
        navigator.appCodeName;  //返回当前浏览器的代码名
        navigator.appVersion;   //返回当前浏览器的版本号和平台
        navigator.platform;     //返回当前计算机的操作系统

 

        以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：

        navigator.userAgent;    //返回浏览器信息

 

    拓展：4.frames对象：包含当前页面所有的框架信息。

             　　frames.length;                  //返回当前页面的框架数量
            　　 frames[0].location;             //修改第一个框架的地址

            5.screen对象：包含当前显示屏信息

             　　screen.width/height             //屏幕总宽高度
             　　screen.availWidth/availHeight   //屏幕的宽高（不包括任务栏）

 

3.定时器

    延时器：

　　　　　　setTimeout(function(){
               console.log(1);        //1000毫秒后，打印1
           },100)

    语法：setTimeout(函数或者代码串，指定的时间(毫秒));

    在指定的毫秒数后只执行一次函数或代码。

    清除延迟器：clearTimeout();

 

 

    定时器：

　　　　　　setInterval(function(){
               console.log(1);        //每隔1000毫秒，打印一次1
           },100)

    语法：setInterval(函数或者代码串，指定的时间(毫秒));

    按照指定的周期(毫秒)不断的执行函数或者是代码串。

       表示每隔指定的时间，执行一次函数

    清除定时器：clearInterval();

 

 

    注意思考：为什么要清除计时器或延时器呢？

　　　　　　　　防止计时器越跑越快，清除计时器

    

    功能：一定时间后调用

    参数：两个参数，一个函数，一个毫秒

    返回值：数字，当前定时器的唯一编号，用于关闭定时器

 

 

window.onload / onscroll／onresize 事件

    onload当文档加载完成后执行一些操作

    window.onload = function(){
        console.log("页面加载完成")
    }

 

    onscroll当页面发生滚动时执行一些操作

    window.onload = function(){
        console.log(1)            //当页面发生滚动时，打印1
    }

 

    onresize当窗口大小发生改变时执行一些操作

    window.onresize = function(){
        console.log(1)            //当窗口大小发生改变时，打印1
    }

 

    页面滚动条距离顶部的距离

    document.documentElement.scrollTop

 

    页面滚动条距离左边的距离

    document.documentElement.scrollLeft

    

 

1.DOM的概念和作用

    DOM是document Object Model的缩写，简称文档对象模型。他给文档提供了一种结构化的表示方式，可以改变文档的内容和呈现方式，我们最关心的是，DOM把网页和脚本以及其他的编程语言联系了起来

 

    所谓的DOM是以家族的形式描述HTML。父子节点，兄弟节点

 

    JS用来做行为的，如何产生行为，当发生改变的时候，就产生了行为

    改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)

    改变之前，至少应该先选择到要改变的元素

 

    DOM中的选择器

 

    1.getElementById(id)        //获取指定元素的ID元素

    

    2.getElementsByTagName()    //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组

 

    3.getElementsByName()       //通过name值获取元素，返回值是数组，通常用来获取有name的input的值

 

    4.getElementsByClassName()  //通过class名获取元素，返回值是数组n

 

    注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

 

 

    ES5选择器：

    document.querySelectorAll();    //强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的

    //返回一个数组，哪怕只有一个元素

    document.querySelector();

    //返回单个元素

    

 

    根据父级，选择子级：

        oDiv.children;        //返回一个数组

 

    根据子级，选择父级：

        oSpan.parentNode;     //返回一个元素

 

2.DOM属性的基本操作（增／删／改／查）

    改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)

    也就是对DOM进行增删改查

 

    DOM的属性操作，增删改查

    什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等

    元素的属性是什么，分为两种，一种叫内置属性，一种叫非内置属性。

    内置属性可以直接通过点"."进行操作

    tagName               //返回值是当前元素的标签名

 

 

    innerHTML／innerText  //返回值是当前元素的内容

    id                    //返回值是当前元素的ID

    title                 //获取title的标签值，这个title是从document中获取的

    className             //返回值是当前元素的class

    href                  //返回值是当前的href的值

    以上这些属性既可以获取，也可以设置

 

    非内置属性需要通过一些节点的方法进行操作，注意：节点的方法，前缀一定是节点

    getAttribute()        //获取 元素的属性

    setAttribute()        //设置／修改 元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值

    removeAttribute()     //删除 元素的属性，低版本的IE不兼容

    

3.节点

    根据DOM规定，HTML文档中的每个成分都是一个节点。

    DOM是这样规定的：

        整个文档是一个文档节点

        每个HTML标签是一个元素节点

        包含在HTML元素中的文本是文本节点

        每一个HTML属性是一个属性节点

        注释属于注释节点

 

    相当于HTML文档中的所有内容都是节点，元素是节点的别称，节点包含元素，当然节点还有好多细化的种类

 

    如何获取DOM节点：

          对象.parentNode    //获得父元素节点

 

          对象.children      //获得子元素节点的集合，不包含空白节点

                            //但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点

          对象.childNodes    //获得所有子节点的集合，包括空白节点

                            //IE7/8不包含空文本节点，但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点

 

    如何获取属性节点：

          对象.attributes   //获得所有属性节点，返回一个数组

 

 

 

4.childNodes／过滤空白节点

    通过 对象.childNodes 获得所有子节点的集合

 

    节点属性 nodeType 返回值为数值

                　　　　节点类型(nodeType)    　　节点名字(nodeName)    　　节点值(nodeValue)

       元素节点        　　　　 1                  　　　　　　标签名                　　　　 null

       文本节点        　　　　 3                  　　　　　　#text                　　　　 文本

       注释节点        　　　　 8                　　　　　　 #comment             　　注释的文字

       文档节点         　　　　9                 　　　　　　#document              　　　null

       属性节点         　　　　2                  　　　　　　属性名               　　　　 属性值

 

    通过遍历所有子节点，将空白节点过滤掉，得出所有的元素节点

 

5.高级选取firstChild／lastChild／parentNode／previousSibling／nextSibling

    高级选取，（根据某一个节点位置找到它的父子，兄弟节点）

 

     父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟）。

 

 

    对象.childNodes              //获取当前元素节点的所有子节点

 

    对象.ownerDocument           //获取该节点的文档根节点，相当与 document

 

    对象.firstChild              //获得第一个子节点。（IE7/8非空白节点，可能是注释节点）

    对象.firstElementChild       //获得第一个非空白的子节点。（IE7/8不支持）

 

    对象.lastChild               //获得最后一个子节点（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）

    对象.lastElementChild        //获得最后一个非空白的子节点。（IE7/8不支持）

 

    对象.nextSibling             //获得下一个兄弟节点。（包含空白节点和注释，IE7/8包括注释节点，不包括空白节点）

    对象.nextElementSibling      //获得下个兄弟节点。（IE7/8不支持）

 

    对象.previousSibling         //获得上一个兄弟节点。（包含空白节点和注释。IE7/8包括注释节点，不包括空白节点）

    对象.prveiousElementSibling  //获得上一个兄弟节点。（IE7/8不支持）

 

 

    缺点：兼容性不好

 

6.DOM元素的基本操作（增／删／改／查）

    查询：选择器；

 

    创建：createElement()  配合  appendChild()    将创建好的元素，插入到某个标签内的最后

 

    删除：removeChild()  配合  parentNode

                元素.remove()    直接删除当前元素

 

    document.body.removeChild(div)；

 

    修改: outerHTML

    oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"

    

 

    补充：创建文本节点createTextNode(“hello”)

         使用方式同createElement()

 

获取非行内样式（兼容问题）

    function getStyle(obj,attr){             //获取非行间样式，obj是对象，attr是值
        if(obj.currentStyle){                //针对ie获取非行间样式
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];   //针对非ie
        };
    };

 

7.offsetWidth／offsetHeight／offsetLeft／offsetTop

 

    offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body

 

    offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离

 

    offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离

 

    scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离

 

    clientWidth/clientHeight：元素视窗宽度/高度

 

    offsetWidth/offsetHeight：元素实际宽度/高度

 

 

   有关浏览器及元素各项尺寸的图示: