JavaScript进阶篇之二-原创手记-慕课网

JavaScript之事件驱动 DOM操作 BOM模型

拙见：JavaScript之所以与用户实现互动，
一方面是因为事件驱动能够捕捉用户的行为。
一方面便是通过DOM模型将捕捉的用户行为通过js代码处理后显示在网页中。

事件响应：捕捉用户行为

事件： 
      是可以被JavaScript侦测到的行为(如点击鼠标)。
      这些事件都是被JavaScript语言内置的。
      网页中的每个元素都可以绑定触发JavaScript函数或程序的事件。
类型：
    onlick:鼠标单击
    onmouseover:鼠标经过
    onmouseout:鼠标经过
    onchange:文本框等内容改变时
    onselect:文本框等内容被选中时
    onfocus:光标聚集，如输入框中的闪烁的竖直的直线光标
    onblur:光标离开
    onload:网页载入完毕
    onunload:当用户退出网页时(页面关闭或页面刷新),触发onunload事件
             同时执行被调用函数。
注意：绑定时，绑定的不仅仅是函数名带有小括号，并对整体用括号括起来。

DOM模型：操作网页元素

拙见：DOM模型可分为节点的特殊属性和节点的增删查改,两个方面理解和使用。

节点的特殊属性

    nodeName: 节点名称

        元素节点的nodeNmae与标签名一致。
        属性节点的nodeName是属性的名称
        文本节点的nodeName永远是#text

    nodeValue: 节点的值

        元素节点的nodeValue是undefined或null
        属性节点的nodeValue是属性值
        文本节点的nodeValue是文本内容

    nodeType:节点类型(数字表示)

        元素节点     1
        属性节点     2
        文本节点     3

    注意：该节点是DOM模型的节点，而HTML文档标签中的属性。

节点的增删改查

增

首先：通过document方法增加新的元素对象
其次：通过调用元素对象的方法，为其添加节点即可

生成新的元素：
    document.createElement("tagName"):创建一个新的元素对象并将其返回

    document.createTextNode("文本内容"):创建一个新的文本节点，并将其返回

添加节点：
    appendChild(newnode):为该节点在最后子节点列表最后添加一个新的节点
    insertBefore(newnode):将一个给定节点插入到一个给定元素节点的前面

删

语法：NODE.removeChild(node):将删除NODE的node子节点。
返回值
     如果删除成功将返回被删除的节点。否则返回null。

改

更改元素的属性
    获取
        elementNode.getAttribute(name)
    更改
        elementNode.setAttribute(name,value)
        注意：如果不存在指定名称的属性，该方法将创建一个新的属性。

    注意：也可直接修改elementNode.attributeName=newValue来更改

替换元素节点
    node.replaceChild(newnode,oldnode):
          将node的子节点oldnode更换成nownode.

查

通过DOM元素对象的属性即可实现

    childNodes: 返回一个由该节点的子节点构成数组
    firstChild: 元素第一个子节点
    lastChild: 元素最后一个子节点
    parentNode: 元素的父节点
    nextSibling: 元素的下一个节点
    previousSibling: 元素的上一个节点

    注意：若没有对应的节点将返回null

    补充：
        获得节点对象
        getElementsByName():返回带有指定名称的节点对象集合
            语法：document.getElementsByName("name")
            注意：
                因为文档中的name属性可能不唯一
                所以该方法返回的是一个数组.对应的元素对象依次排列在数组中。

                同时注意Element的单复数。
        getElementsByTagName():
        getElementById():

     巧记:
         ID就像一个人的身份证号是唯一的，所以就用Element,返回单个元素对象。

         Name就像一个名字可以重复，所以用Elements返回一个元素数组。

         Tagname就像一个类名，类中有很多相同的人，所以用Elements返回一个元素数组。

浏览器对象BOM：控制浏览器

window对象

    window对象即当前的浏览器窗口，
          通过它的属性和方法可以控制和获取浏览器的各种信息。

    window对象方法：
        alert():
        prompt():
        confirm():
        open():
        close():
        print():
        setInterval():每隔指定时间执行代码
        clearInterval():取消setInterval()的设置
        setTimeout():在指定的时间延迟后执行代码
        clearTimeout():取消setTimeout()的设置

    JavaScript计时器：
        间隔触发计时器

            setInterval(代码,时间间隔)
                代码：要调用的函数或要执行的代码
                时间间隔：周期性执行或调用表达式的时间，以毫秒计。                
                返回值：一个可以传递给clearInterval(),从而取消计时器的作用的特殊值

            clearInterval("setInterval()的返回值")

        一次性计时器

            setTimeout(代码,延迟时间)
            代码：要调用的函数或要执行的代码
            返回值：一个可以传递给clearTimeout(),从而取消计时器的作用的特殊值

History对象

history对象记录了用户曾经浏览过的url，并可以实现浏览器的前进与后退。

语法：window.history.[属性或方法]
     window可以省略.
属性：
    length:返回历史列表中的URL数量
方法：
    back():加载列表中相对于当前URL的前一个URL
    back():加载列表中相对于当前URL的后一个URL
    go(number):加载URL列表中的第number个URL

location对象

    location用于获取或设置窗体的URL，并且可以解析URL

    语法：window.location.[属性|方法]
         window可以省略
    属性：
        host:设置并返回主机名和端口号
        hostname:当前URL的主机名
        href:设置并返回完整的URL
        pathname:当前URL的路径部分
        port:当前URL的端口号
    方法：
        assign("URL"):加载新的文档
        reload("URL"):重新加载新的文档
        replace("URL"):用新的文档代替当前文档

Screen对象

    获取用户的屏幕信息

    语法：window.screen.属性
         window可以省略
    属性：
        availHeight:窗口可以使用的屏幕高度，单位像素
        availWidth:
        colorDepth:颜色的位数，精确度通常为32
        pixelDepth:颜色的位数
        height:屏幕的高度
        width:屏幕的宽度

navigator对象

    该对象包含了有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

    语法： navigator.属性
    属性：
        appCodeName:浏览器代码名的字符串
        appName:浏览器的名称
        appVersion:浏览器的平台和版本信息
        platform:运行该浏览器的操作系统的信息
        userAgent:返回有客户机发送给服务器的user-agent头部信息。