JavaScript(核心BOMDOM)

Posted zzfx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript(核心BOMDOM)相关的知识,希望对你有一定的参考价值。

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块中动态显示当前时间

1

2

3

4

5

6

7

8

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,非数字)

parseIntparseFloat:将字符串解析为整数和浮点数

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>中的文本内容。

1

2

3

4

5

6

7

8

9

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、将下图中的文本内容打印出来

技术分享

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

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关系图(了解)



以上是关于JavaScript(核心BOMDOM)的主要内容,如果未能解决你的问题,请参考以下文章

5.JavaScript操作BOMDOM对象_试题

前端之BOMDOM

前端技术——6——JavaScript-BOMDOM对象

Python之路(二十三):BOMDOM

JavaScript

JS中的函数BomDOM及JS事件