JavaScript（核心、BOM、DOM）

http://www.flyne.org/article/407

JavaScript（核心、BOM、DOM）

JavaScript是基于对象和事件驱动的客户端脚本语言。有如下特点：

交互性
安全性（不可以直接访问本地硬盘）
跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

1、JavaScript和Java不同！ ①所属：NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行，Java需先编译在运行 ④JavaScript是一种弱类型的语言，Java是强类型的语言。

2、JavaScript的实现包括以下3个部分：

1）核心（ECMAScript）：描述了JS的语法和基本对象。

2）文档对象模型 ☆（DOM）：处理网页内容的方法和接口

3）浏览器对象模型（BOM）：与浏览器交互的方法和接口

ECMAScript扩展知识：

① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。

② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash。

③ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。

3、在HTML中使用JavaScript

1）在<script></script>标签内部直接编写JS代码

2）通过script标签的src属性直接引入外部js文件

注意：若以上两种方式同时存在，则标签内部定义的JS代码不会被执行。

JS核心

4、JS的数据类型（☆）

在JS中使用var关键词声明变量，变量的类型会根据其所赋值来决定。JS中数据类型分为原始数据类型（5种）和引用数据类型（Object类型）。

1）5种原始数据类型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字符串属于原始数据类型。

2）typeof运算符：查看变量类型，对变量或值调用typeof运算符将返回下列值之一：

undefined – 如果变量是 Undefined 类型的
boolean – 如果变量是 Boolean 类型的
number – 如果变量是 Number 类型的
string – 如果变量是 String 类型的
object – 如果变量是一种引用类型或 Null 类型的

3）通过instanceof 运算符解决引用类型判断问题

4）JS中对类型的定义：一组值的集合。如Boolean类型的值有两个：true、false。Undefined和Null 类型都只有一个值，分别是undefined和null。

5）null 被认为是对象的占位符，typeof运算符对于null值返回“object”。

6）原始数据类型和引用数据类型变量在内存中的存放如下：

5、局部变量和全局变量

在函数中声明的变量只能在函数中使用，当你退出函数时，变量就会被释放，这种变量被称为局部变量。因为每个局部变量只在各自的函数中有效，所以你可以在不同的函数中使用名称相同的变量。

如果在函数之外声明变量，那么页面中所有的函数都可以使用它。在全局变量被声明后，它们就开始生效了。在网页被关闭后，变量才会失效。

注意：JS语言中，在代码块中声明的变量属于全局变量。

6、数组（两种创建方式）

1）var arr = [123,”abc”,true,null]

2）var arr = new Array(4); //创建数组长度为4的数组

var arr = new Array(123,”abc”,true,null);//等同于1）

注意：

①js中，数组元素类型可以不一致。

②js中，数组长度可以动态改变。

③接着上述代码，typeof arr 和 arr instanceof Array 分别输出object和true。

7、函数

特点：关键字function；无需指定返回值类型；参数列表声明不需var关键字；无函数重载；函数内部可以直接调用arguments数组（隐式定义），该数组存储了实参列表；函数名代表一种引用类型，可用（函数名 instanceof Function）测试；打印函数引用会输出整个函数定义。

8、动态函数和匿名函数

1）动态函数是通过js的内置对象Function定义。形式为：new Function(arg1 , arg2)，由于arg1和arg2为变量，所以可以动态指定。如：

var run = new Function(“x,y”,”return x+y;”);

2）匿名函数：没有函数名，形如：var run = function(x,y){return x+y;};

注：打印动态函数的引用可以发现动态函数也是匿名函数。

9、JS对象（需要new一个对象）

1）String对象，方法分为两类：①与Html有关的 ②同java中的String相似的。具体查文档。

2）Array对象，一些常用方法：

concat() 同String的concat()方法。
join() 同String的split()方法相反。
pop()、push() 同栈中的弹栈、压栈。
sort() 对数组元素排序。

3）Date对象

getTime()、Date.parse(dateString)方法返回时间戳。

钟表例子：在body中加入onload=”startTime();”则可以在#div_1块中动态显示当前时间

function startTime(){

var date = new Date();

var h = date.getHours();

var m = date.getMinutes();

var s = date.getSeconds();

document.getElementById("div_1").innerHTML=h+" : "+m+" : "+s;

setTimeout("startTime()",500);

}

4）Math对象，主要是一些静态方法，常用的有random()、ceil(x)/floor(x)/round(x)方法。

5）RegExp对象：该对象代表正则表达式，用于字符串匹配

① 两种RegExp对象创建方式：

方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);

方式二，通过直接量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;

② 正则表达式的具体写法使用时查询文档。

③ 常用方法：test(string)，返回true或false。

10、全局函数

encodeURI / decodeURI：编码解码URI

进行url跳转时可以整体使用encodeURI

encodeURIComponent / decodeURIComponent：编码解码URI组件

传递参数时需要使用encodeURIComponent

escape / unescape：对字符串进行unicode编码

isNaN：检查某个值是否为NaN（Not a Number，非数字）

parseInt、parseFloat：将字符串解析为整数和浮点数

eval：计算JS字符串，并把它作为脚本代码来执行。

BOM（浏览器对象模型）

11、BOM（浏览器对象模型）

1）window对象：浏览器中打开的窗口

① 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

② window.frames 返回窗口中所有命名的框架

③parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）

top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）

self是当前窗口（等价window）

opener是用open方法打开当前窗口的那个窗口

④与消息框有关的方法：alert(String)、confirm(String)、prompt(String)

⑤两种定时器：setTimeout(code,latency) 和 setInterval(code,period)

注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。

2）location对象：包含当前URL信息。重点掌握location对象的href属性，用于设置或返回完整的URL。

3）history对象：主要是back()/forward()和go()方法，几乎用不到。

第 2 页（共 2 页）

DOM（文档对象模型）

DOM是W3C组织制定的一套用于访问和操作XML和HTML文档的标准。W3C DOM被分为3个不同的部分 / 级别（parts / levels）：

核心DOM：用于任何结构化文档的标准模型（不作研究）
XML DOM：用于XML……
HTML DOM：用于HTML……

12、XML DOM和HTML DOM

HTML和XML：
HTML：超文本标记语言，标记是有限的，每个标记有自己固定的含义，主要用于信息的显示。
XML：可扩展标记语言，可以自定义标记，扩展性很强，主要用于信息的存储和传送

1） XML DOM和HTML DOM分别定义了访问和操作XML和HTML文档的标准方法（接口）。

2）HTML文档符合XML语法标准，所以可以使用XML DOM API解析HTML（比较麻烦），后面的例子会分别使用HTML DOM和XML DOM进行解析。

3）如果把HTML当做XML对待，不会忽略回车、空格和制表符。

13、DOM节点树模型（以HTML DOM树为例）

1）DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。

2）DOM规定文档中的每个成分都是一个节点（Node）：

文档节点（Document）：代表整个文档

元素节点（Element）：文档中的一个标记

文本节点（Text）：标记中的文本

属性节点（Attr）：代表一个属性，元素才有属性

3）Node为所有节点的父接口，其定义了一组公共的属性和方法，如下：

14、DOM节点三大属性（XML DOM）

1）nodeName：元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。

2）nodeType：元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、

3）nodeValue：元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。

15、Document对象常用属性和方法

属性：

documentElement：返回文档根元素的引用。如HTML文档中返回<html>标签元素

方法：

getElementById()：☆根据id获取元素

getElementsByName()：根据name属性获取元素，没有name时，根据id获取。

getElementsByTagName()：根据标签名获取

createElement()、createTextNode()：创建元素节点、文本节点。

16、练习

Eg1、获取代码<h1 id=”test”>明天休息</h1>中的文本内容。

var eleNode = document.getElementById("test");

alert(eleNode.firstChild.nodeValue);

alert(eleNode.childNodes[0].nodeValue);

var h1Obj = document.getElementById("test");

alert(h1Obj.innerHTML);

alert(h1Obj.innerText);

Eg2、将下图中的文本内容打印出来

function printNode(node){

if(node.nodeType == 3){

alert(node.nodeValue.trim());

}else if(node.nodeType == 1){

var nodes = node.childNodes;

for(var i = 0;i <nodes.length;i ++){

printText(nodes[i]);

}

var liNodes = document.getElementsByTagName("li");

for(var i = 0;i < liNodes.length;i ++){

printNode(liNodes[i]);

}

17、DOM常见操作（XML DOM）☆

1）获取节点

① 获取元素节点：通过document对象的三个方法获取

② 获取属性节点：属性节点附属于元素节点，可通过元素节点的getAttributeNode(attrName)方法获取属性节点，也可通过getAttribute(attrName)直接获取属性值。（与之相对的是Element接口的setAttribute(attrName , attrValue)方法，如果属性不存在，则直接添加到元素节点上）

③ 获取文本节点：文本节点为元素节点的子节点，可通过元素节点（Element接口）提供的childnodes()[index] 方法获得。

2）改变节点

① 改变属性节点的值：可以通过属性节点的nodeValue直接修改属性值，也可通过元素节点的setAttribute()方法改变（17.1.2节）。

② 改变文本节点的值：通过文本节点的nodeValue直接修改。

3）删除节点

① 删除元素节点：要想删除元素节点A，需获得A的父节点B，父节点可通过17.1.1中的方法获得，也可以直接通过A的parentNode属性获得（推荐）。调用B的removeChild(A) 即可删除A节点。

② 删除属性节点：可通过属性节点所属的元素节点的removeAttribute(attrName)或removeAttributeNode(node)删除。

③ 清空文本节点：最简单也是最常用的方法就是直接设置文本节点的nameNode属性为空串：textNode.nodeValue = ””。

4）创建和添加节点

① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。

② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法（13节）。

扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一个新的子节点。

5）替换节点：主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）

18、HTML DOM（☆）

1）在HTML DOM中，获取和改变元素内容最简单方法是使用元素的innerHTML属性（innerText属性返回去掉标签的innerHTML）

2）改变HTML样式（style属性）：element.style.color = “red”;

3）DOM事件：当 HTML 元素”有事情发生“时，浏览器就会生成事件，HTML DOM允许JS对HTML事件作出反应。使用方法有两种：

① 将JavaScript 代码添加到 HTML 事件属性中，如onclick = JavaScript

② HTML DOM允许在JS中为HTML元素分配事件，如下面的代码演示了为button元素分配onclick事件：document.getElementById(“myBtn”).onclick = function(){}

常见的JS事件有：

加载事件：onload

鼠标移动事件：onmouseover、onmouseout

鼠标点击事件：onclick

聚焦与离焦事件：onfocus、onblur

键盘事件：onkeypress（一般要配合event.keyCode使用）

提交与重置事件：onsubmit、onreset

域改变事件：onchange

19、DOM操作练习

DOM操作练习请看本博客另外一篇文章：http://www.flyne.org/article/420

20、BOM和HTML DOM关系图（了解）