JavaScript基础篇章(总结2)

前言

前篇文章总结javaScript的基本语法和杂七杂八的练习，既然杂，那么再杂一篇吧！事不宜迟，接着总结下javaScript其他的知识点，速度速度~~

Ⅰ.简述

总结之前先贴下昨天的博文JavaScript基础篇章(总结1) 的地址：

Url: http://blog.csdn.net/yk377657321/article/details/53930922

在上篇博文中，知道了js(javaScript的简称)是由三部分组成的，分别是

1. ECMAScript
2. Bom(全称Browser Object Model浏览器对象模型)
3. Dom(全称Document Object Model文档对象模型)

经过上篇博文的记录，已经了解ECMAScript的基础知识点，接着了解并总结剩余两部分的知识点，了解的范围就只限于基础的，详细的可以参考w3c文档

什么是Bom编程?

Bom编程的全称 Browser Object Model，即浏览器对象模型； javaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象，使得开发者可以方便操作浏览器。那么也就是说，Bom编程是封装了浏览器相关信息的各个对象，包括浏览器信息、Url信息等等，这也可以体现js语法基于对象编程的特点.

什么是Dom编程?

Dom编程的全称Document Object Model，即文档对象模型;DOM描绘了一个层次化的树，允许开发人员添加、删除、修改网页页面的某一部分;浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中.Dom的出现主要便于对页面的系列操作.

Ⅱ.学习Bom编程

上面简述中说了Bom编程是封装了浏览器的各个对象，包括浏览器信息、Url信息等等，那么了解下大致的对象就可以了，等需要用到的时候再查查w3c文档，下面开始认识Bom常用的对象.

window对象

• 简述：window对象javaScript层级中的顶层对象，代表一个浏览器窗口或一个框架,遇到body标签、frameset标签都会进行重建;

• window对象的子对象：大致是location对象、history对象、document对象;

• window的主要方法：

  • alert() 显示一个警告框;
  • confirm() 确认框;
  • prompt() 输入框;
  • open() 打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）;
    例如: window.open(“success.html”);
    window.open(“success.html”,”_blank”,”width=600px,height=400px,left=500px,top=500px,fullscreen=no,location=no,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no”);
  • close() 关闭窗口.
    注意: 火狐浏览器的默认配置.导致close方法无效;
  • setTimeout(vCode, iMilliSeconds) 超时后执行代码;

  • setInterval(vCode, iMilliSeconds) 定时执行代码，第一次也是先等待，到时再执行.

  • 关于window 中的事件:

    • onload 页面加载完毕触发;
    • onscroll 页面滚动条触发;
    • onbeforeunload 页面卸载触发(关闭页面).

navigator对象

• 简述：Navigator对象是由 JavaScript runtime engine 自动创建的，代表浏览器对象封装了浏览器相关的信息，如浏览器名称、版本等等;

• 主要属性：

  • appName 获取浏览器名称;
  • appVersion 获取浏览器版本;
  • userAgent : 返回由客户机发送服务器的 user-agent 头部的值.

• other:userAgent 中包含了浏览器的类型等，可能需要根据浏览器做适配，那么userAgent就可派上用场.

location对象

• 简述：Location对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息;

• 主要属性：

  • href属性 设置或获取整个 URL 为字符串;
  • host 设置或获取 location 或 URL 的 hostname 和 port 号码;
  • hostname 设置或获取 location 或 URL 的主机名称部分;
  • href 设置或获取整个 URL 为字符串;
  • pathname 设置或获取对象指定的文件名或路径;
  • port 设置或获取与 URL 关联的端口号码;
  • protocol 设置或获取 URL 的协议部分;
  • search 设置或获取 href 属性中跟在问号后面的部分;
  • reload() 重新加载当前页面.

history对象

• 简述：History对象是由 JavaScript runtime engine 自动创建的，由一系列的URL组成，控制网页前进后退等作用;

• 主要方法：

  • back() 后退，从历史列表中装入前一个 URL;
  • forward() 前进，从历史列表中装入下一个 URL;
  • go() //go(1)是前进，go(-1)是后退，从历史列表中装入 URL.

document对象

• 简述：document对象代表整个文档界面，里面包括标签、属性等等;

• 主要属性：

  • all 获取页面所有元素对象, firfox不兼用该属性;
  • forms 获取页面所有表单对象;
  • images 获取页面所有图片对象;
  • links 获取所有超链接或area对象.

上面都是常用的Bom对象，了解了解，等需要用到时查查文档，文档在手，不怕不怕的~~

Ⅲ.学习Dom编程

Dom编程将页面封装成了一颗有层次化的Dom树，可便于对页面进行修改、增加、删除、查找页面的某部分;
Dom定义了访问和操作HTML文档的标准方法；而其中的document对象就代表整个页面的文档树,和上面Bom中的document对象是同者,下面总结下常用的api，因为贴具体的demo会让文章的篇幅有些长了，所以下篇文章在进行总结.

获取节点

什么是节点？这个首先了解下，其实就是平常画页面用到的body/form/input这些标签，只是换个说话而已，就叫节点对象,标签的属性也叫节点属性.

那么怎么获取节点?下面是获取节点对象的api

• document.getElementById(“id”) 返回对拥有指定 id 的第一个节点对象的引用,id是唯一的;
• document.getElementsByName(“name”) 返回带有指定名称的对象集合;
• document.getElementsByTagName(sTagName) 返回带有指定标签名的对象集合.

那如何获取和设置标签的属性?

• getAttribute(“属性名”) 返回属性值;
• setAttribute(“属性名”, “属性值”); 为节点对象设置属性.

查找节点

查找节点 主要是通过当前节点寻找父节点、子节点、兄弟节点、文本内容等等.

具体的属性

parentNode 获取当前元素的父节点。

• childNodes ———-> 获取当前元素的所有下一级子元素;
• firstChild ————–> 获取当前节点的第一个子节点;
• lastChild —————> 获取当前节点的最后一个子节点;
• nextSibling ————-> 获取当前节点的下一个节点（兄节点）;
• previousSibling ——-> 获取当前节点的上一个节点（弟节点）;
• textContent ————> 设置或返回元素及其后代的文本内容;

添加节点

• document.createElement(“标签名”) 创建新元素节点；
• document.createTextNode(“文本内容”) 创建新文本节点；
• label.appendChild(e) label是节点对象，作用是将e节点添加到label节点力最后的位置,即e是label节点的子节点；
• label.insertBefore(“要插入的节点”, “插入的位置”); 添加到label中，位置在第二个参数节点之前.

删除节点

label.removeChild(child) 删除label节点中指定的子节点child.

Ⅳ.标签事件绑定

其实和Android针对控件的事件绑定及监听是差不多的，那么了解下具体的设置和大致的事件类型;
基本上所有的HTML元素中都可以指定事件属性，每个元素支持什么样的事件应查询文档，所有的事件属性都是以on开头，后面的是事件的触发方式.

     <table border="2dp" align="center" width="30%" cellspacing="0px" cellpadding="5px">
            <tr align="center">
               <td>验证码</td>
                   <td>
                      <input type="text" id="inputCode" onchange="checkCode()"/>
                      <span id="codeSpan"></span>
                      <a href="#" onclick="createCode()">看不清楚</a>
                      <span id="codeSpan1"></span>
                   </td>

           </tr>
     </table>

上面就是针对在元素中写相应的事件属性，而其值指定为一段JS代码，input标签中的onchange、a标签中的onclick这都是标签的属性，那么其值就是类似Android中的一个方法，假如当点击a标签所在的区域，则触发createCode这个js方法.

鼠标点击相关的事件

• onclick 在用户用鼠标左键单击对象时触发;
• ondblclick 当用户双击对象时触发;
• onmousedown 当用户用任何鼠标按钮单击对象时触发;
• onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发.

鼠标移动相关的事件

• onmouseover 当用户将鼠标指针移动到对象内时触发;
• onmouseout 当用户将鼠标指针移出对象边界时触发;
• onmousemove 当用户将鼠标划过对象时触发.
• onmouseleave 当用户将鼠标指针移出对象边界时触发,和onmouseout作用一致，详细的暂待;
• onmouseenter 当用户将鼠标指针移动到对象内时触发，和onmouseover作用一致，详细的暂待;

按键相关的事件

• onkeydown 当用户按下键盘按键时触发;
• onkeyup 当用户释放键盘按键时触发;
• onkeypress 当用户按下字面键时触发.

焦点相关的事件

• onblur 在对象失去输入焦点时触发;
• onfocus 当对象获得焦点时触发.

other事件

• onchange 当对象或选中区的内容改变时触发;
• onload 在浏览器完成对象的装载后立即触发;
• onsubmit 当表单将要被提交时触发.

Ⅴ.总结

关于Dom编程和Bom编程大致的对象和方法属性都在上面总结了，那么下篇文章再总结下练习的小demo，88~~