BOMDOM.docx

BOMDOM.docx

《BOMDOM.docx》由会员分享，可在线阅读，更多相关《BOMDOM.docx（38页珍藏版）》请在冰豆网上搜索。

BOMDOM

1.BOM编程

1.1.BOM编程基础

全称BrowserObjectModel，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

1.2.BOM对象：

1.3.window对象

Window对象是JavaScript层级中的顶层对象。

Window对象代表一个浏览器窗口或一个框架。

Window对象会在或每次出现时被自动创建。

1.3.1.window中的方法

document对Document对象的只读引用

location用于窗口或框架的Location对象

history对History对象的只读引用。

document.tilte设置网页的标题

moveto（）将窗口左上角的屏幕位置移动到指定的x和y位置。

moveby（）相对于目前的位置移动。

resizeTo（）调整当前浏览器的窗口。

open（）打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）

setTimeout（vCode,iMilliSeconds）超时后执行代码。

setInterval（vCode,iMilliSeconds）定时执行代码，第一次也是先待，到时再执行。

2.事件

a）事件说明

基本上所有的HTML元素中都可以指定事件属性。

每个元素支持什么样事件应查询文档。

所有的事件属性都是以on开头，后面的是事件的触发方式，如：

onclick，表示单击

onkeydown，表示键按下

...

b）常用的事件类型：

鼠标点击相关：

onclick在用户用鼠标左键单击对象时触发。

ondblclick当用户双击对象时触发。

onmousedown当用户用任何鼠标按钮单击对象时触发。

onmouseup当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseout当用户将鼠标指针移出对象边界时触发。

onmousemove当用户将鼠标划过对象时触发。

焦点相关的：

onblur在对象失去输入焦点时触发。

onfocus当对象获得焦点时触发。

其他：

onchange当对象或选中区的内容改变时触发。

onload在浏览器完成对象的装载后立即触发。

onsubmit当表单将要被提交时触发。

location对象

Location对象是由JavaScriptruntimeengine自动创建的，包含有关当前URL的信息。

location中的重要方法：

href属性设置或获取整个URL为字符串。

reload（）重新装入当前页面

1.3.2.screen对象

Screen对象是由JavaScriptruntimeengine自动创建的，包含有关客户机显示屏幕的信息。

属性：

availHeight获取系统屏幕的工作区域高度，排除MicrosoftWindows任务栏。

availWidth获取系统屏幕的工作区域宽度，排除Windows任务栏。

height获取屏幕的垂直分辨率。

width获取屏幕的水平分辨率。

示例：

document.write（"屏幕工作区:

"+screen.availHeight+","+screen.availWidth+"
"）;

document.write（"屏幕分辨率:

"+screen.height+","+screen.width+"
"）;

1.3.3.document对象

该对象代表整个文档页面

对象的集合：

all获取页面所有元素对象

forms获取页面所有表单对象

images获取页面所有图片对象

links获取所有超链接或area对象

具体的内容会在学习DOM时学习。

2.DOM

2.1.DOM简介

全称DocumentObjectModel，即文档对象模型。

DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，

而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，

组建好之后，按照树的结构将页面显示在浏览器的窗口中。

2.2.节点层次

HTML网页是可以看做是一个树状的结构，如下：

html

|--head

||--title

||--meta

|...

|--body

||--div

||--form

|||--input

|||--textarea

.........

这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。

节点最多有一个父节点，可以有多个子节点。

HTMLDOM定义了访问和操作HTML文档的标准方法。

document

代表当前页面的整个文档树。

访问属性

all

forms

images

links

body

访问方法（最常用的DOM方法）

//www.w3.org/1999/xhtml">

//获取dom树,获取document对象.

vardom=window.document;

//all获取页面中所有的标签节点,注释和文档类型约束.

functiontestAll（）{

varallArr=dom.all;

alert（allArr.length）;

for（vari=0;i

//获取节点名称

alert（allArr[i].nodeName）;

}

}

//anchors获取页面中的所有的锚连接.

functiontestAnchors（）{

varanArr=dom.anchors;

alert（anArr.length）;

}

//froms获取所有的form表单对象

functiontestForms（）{

varformArr=dom.forms;

alert（formArr.length）;

alert（formArr[0].nodeName）;

}

//images

functiontestImages（）{

varimageArr=dom.images;

alert（imageArr.length）;

}

//links获取页面的超链接.

functiontestLinks（）{

varlinkArr=dom.links;

//alert（linkArr.length）;

for（vari=0;i

//alert（linkArr[i].nodeName）;

}

for（variinlinkArr）{

alert（i）;

}

}

//testLinks（）;

//获取页面的Body

varbody=dom.body;

alert（body.nodeName）;

XX一下

XX两下

百谷一下

2.3.获取节点对象案例

document.getElementById（"html元素的id"）

document.getElementsByTagName（"标签名"）

document.getElementsByName（"html元素的name"）

示例：

1，得到所有的div元素并显示信息（innerHTML）。

2，得到所有div元素中id为"test"的结果。

Vardom=window.document;

functiontestByTagName（）{

variptArr=dom.getElementsByTagName（"input"）;

for（vari=0;i

alert（iptArr[i].value）;

}

}

//window对象提供了一个事件,onload事件onload（页面加载完毕执行该代码）是一个事件,给事件一个方法,

//window.onload=testByTagName;

//2，得到所有标签id为"username"的结果。

获取旧value值并设置value值

functiontestById（）{

varuser=dom.getElementById（"username"）;

alert（user.value）;

user.value="rose";

}

//testById（）;

//3.获取所有标签name为like的元素.获取value值.

functiontestByName（）{

varlikeArr=dom.getElementsByName（"like"）;

for（vari=0;i

alert（likeArr[i].value）;

}

}

testByName（）;

2.3.1.案例

显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue

2.3.2.属性操作练习

1，写一个form，其中有多个checkbox。

2，获取所有选中的数量。

3，实现全选与全不选的效果。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

functiongetSum（）

{

/*

需求：

通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。

思路：

1，先获取所有的checkbox对象。

2，对这些对象进行遍历。

判断哪个对象被选中。

3，对被选中对象的金额进行累加。

4，显示在按钮右边。

*/

varitems=document.getElementsByName（"item"）;

varsum=0;

for（varx=0;x

{

if（items[x].checked）

{

sum+=parseInt（items[x].value）;

}

}

varstr=sum+"元";

document.getElementById（"sumid"）.innerHTML=str.fontcolor（'red'）;

}

functioncheckAll（node）

{

/*

需求：

通过全选checkbox，将其他条目都选中。

思路：

只要将全选checkbox的checked状态赋值给其他的itemchecked状态即可。

*/

//varallNode=document.getElementsByName（"all"）[index];

varitems=document.getElementsByName（"item"）;

for（varx=0;x

{

items[x].checked=node.checked;

}

}

全选

笔记本电脑3000元

笔记本电脑3000元

笔记本电脑3000元

笔记本电脑3000元

笔记本电脑3000元

笔记本电脑3000元

全选

"onclick="getSum（）"/>

2.4.通过节点关系查找节点

从一个节点出发开始查找：

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

childNodes获取当前元素的所有下一级子元素。

firstChild获取当前节点的第一个子节点。

lastChild获取当前节点的最后一个子节点。

nextSibling获取当前节点的下一个节点。

（兄节点）

previousSibling获取当前节点的上一个节点。

（弟节点）

示例1：

firstChild属性最普遍的用法是访问某个元素的文本：

vartext=x.firstChild.nodeValue;

示例2：

parentNode属性常被用来改变文档的结构。

假设您希望从文档中删除带有id为"maindiv"的节点：

varx=document.getElementById（"maindiv"）;

x.parentNode.removeChild（x）;

2.4.1.获取节点对象的信息

每个节点都包含的信息的，这些属性是：

nodeType节点类型

nodeName节点名称

nodeValue节点值

nodeType

nodeType属性可返回节点的类型。

---------------------------------

元素类型节点类型

------------------

元素1就是标签元素，例

文本3标签元素中的文本

注释8表示为注释

nodeName

nodeName属性含有某个节点的名称。

--------------------------------

元素节点的nodeName是标签名称

属性节点的nodeName是属性名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

nodeValue

对于文本节点，nodeValue属性是所包含的文本。

对于属性节点，nodeValue属性是属性值。

对于注释节点，nodeValue属性注释内容。

nodeValue属性对于文档节点和元素节点是不可用的。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

//节点和节点之间的关系.

//获取dom树

vardom=window.document;

//获取指定id的标签节点.

functiontest（）{

varform=dom.getElementById（"form1"）;

//获取父节点.

//alert（form.parentNode.nodeName）;

//获取子节点（Node包含文本,注释,标签）

varchildArr=form.childNodes;

//alert（childArr.length）;

/*

for（vari=0;i

alert（childArr[i]）;

}

*/

//获取第一个孩子.

varfirst=form.firstChild;

//alert（first）;

//最后一个孩子.

varlast=form.lastChild;

//alert（last）;

//获取下兄弟（获取弟弟）

varsibling=form.nextSibling;

//alert（sibling.nodeName）;

//获取大哥

varprevious=form.previousSibling;

alert（previous.nodeName）;

}

test（）;

哈哈

姓名:

2.5.节点操作

2.5.1.创建新节点

document.createElement（"标签名"）创建新元素节点

elt.setAttribute（"属性名","属性值"）设置属性

elt.appendChild（e）添加元素到elt中最后的位置

elt.insertBefore（new,child）;添加到elt中，child之前。

//参数1：

要插入的节点参数

2：

插入目标元素的位置

elt.removeChild（eChild）删除指定的子节点

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">