BOMDOMWord下载.docx
《BOMDOMWord下载.docx》由会员分享，可在线阅读，更多相关《BOMDOMWord下载.docx（36页珍藏版）》请在冰豆网上搜索。
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+"
<
br>
"
）;
屏幕分辨率:
+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方法）
<
htmlxmlns="
http:
//www.w3.org/1999/xhtml"
>
head>
scripttype="
text/javascript"
//获取dom树,获取document对象.
vardom=window.document;
//all获取页面中所有的标签节点,注释和文档类型约束.
functiontestAll（）{
varallArr=dom.all;
alert（allArr.length）;
for（vari=0;
i<
allArr.length;
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）;
linkArr.length;
//alert（linkArr[i].nodeName）;
for（variinlinkArr）{
alert（i）;
//testLinks（）;
//获取页面的Body
varbody=dom.body;
alert（body.nodeName）;
/script>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
javascript<
/title>
/head>
bodyonmousemove="
test（this）"
imgsrc="
xxx"
alt="
这是一个美女"
/>
<
ahref="
XX一下<
/a>
XX两下<
百谷一下<
aname="
one"
two"
form>
<
label>
姓名:
/label>
!
--默认不写type就是文本输入框-->
inputtype="
text"
/form>
/body>
/html>
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"
iptArr.length;
alert（iptArr[i].value）;
//window对象提供了一个事件,onload事件onload（页面加载完毕执行该代码）是一个事件,给事件一个方法,
//window.onload=testByTagName;
//2，得到所有标签id为"
username"
获取旧value值并设置value值
functiontestById（）{
varuser=dom.getElementById（"
alert（user.value）;
user.value="
rose"
;
//testById（）;
//3.获取所有标签name为like的元素.获取value值.
functiontestByName（）{
varlikeArr=dom.getElementsByName（"
like"
likeArr.length;
alert（likeArr[i].value）;
testByName（）;
2.3.1.案例
显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue
2.3.2.属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全不选的效果。
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
无标题文档<
functiongetSum（）
{
/*
需求：
通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。
思路：
1，先获取所有的checkbox对象。
2，对这些对象进行遍历。
判断哪个对象被选中。
3，对被选中对象的金额进行累加。
4，显示在按钮右边。
*/
varitems=document.getElementsByName（"
item"
varsum=0;
for（varx=0;
x<
items.length;
x++）
{
if（items[x].checked）
{
sum+=parseInt（items[x].value）;
}
varstr=sum+"
元"
sumid"
）.innerHTML=str.fontcolor（'
red'
functioncheckAll（node）
通过全选checkbox，将其他条目都选中。
只要将全选checkbox的checked状态赋值给其他的itemchecked状态即可。
//varallNode=document.getElementsByName（"
all"
）[index];
items[x].checked=node.checked;
div>
商品列表<
/div>
checkbox"
name="
onclick="
checkAll（this）"
全选<
br/>
value="
3000"
笔记本电脑3000元<
button"
总金额：
getSum（）"
spanid="
/span>
2.4.通过节点关系查找节点
从一个节点出发开始查找：
parentNode获取当前元素的父节点。
childNodes获取当前元素的所有下一级子元素。
firstChild获取当前节点的第一个子节点。
lastChild获取当前节点的最后一个子节点。
nextSibling获取当前节点的下一个节点。
（兄节点）
previousSibling获取当前节点的上一个节点。
（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
vartext=x.firstChild.nodeValue;
示例2：
parentNode属性常被用来改变文档的结构。
假设您希望从文档中删除带有id为"
maindiv"
的节点：
varx=document.getElementById（"
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属性对于文档节点和元素节点是不可用的。
//节点和节点之间的关系.
//获取dom树
//获取指定id的标签节点.
functiontest（）{
varform=dom.getElementById（"
form1"
//获取父节点.
//alert（form.parentNode.nodeName）;
//获取子节点（Node包含文本,注释,标签）
varchildArr=form.childNodes;
//alert（childArr.length）;
childArr.length;
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（）;
a>
哈哈<
formid="
2.5.节点操作
2.5.1.创建新节点
document.createElement（"
）创建新元素节点
elt.setAttribute（"
属性名"
属性值"
）设置属性
elt.appendChild（e）添加元素到elt中最后的位置
elt.insertBefore（new,child）;
添加到elt中，child之前。
//参数1：
要插入的节点参数
2：
插入目标元素的位置
elt.removeChild（eChild）删除指定的子节点
script>
/*
创建节点：
document.createElement（"
添加节点到文档树上:
elt.appendChild（e）添加元素到elt中最后的位置把元素添加最后一个子节点的后面。
elt.insertBefore（new,child）;
要插入的节点参数2：
*/
functionadd（）{
//
varinputNode=document.createElement（"
//创建一个节点的对象
inputNode.setAttribute（"
type"
"
file"
//给新节点设置type的属性值。
varbody=document.getElementsByTagName（"
body"
）[0];
body.appendChild（inputNode）;
//把新节点添加到body体中。
varcount=1;
vartrNode=document.createElement（"
tr"
vartdNode=document.createElement（"
td"
varinputNode=document.createEl
升级会员 