BOMDOMWord下载.docx

1、 onmouseout 当用户将鼠标指针移出对象边界时触发。 onmousemove 当用户将鼠标划过对象时触发。 焦点相关的： onblur 在对象失去输入焦点时触发。 onfocus 当对象获得焦点时触发。 其他： onchange 当对象或选中区的内容改变时触发。 onload 在浏览器完成对象的装载后立即触发。 onsubmit 当表单将要被提交时触发。location 对象 Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。location中的重要方法： href属性 设置或获取整个 URL 为字符串。 relo

2、ad（） 重新装入当前页面1.3.2. screen 对象 Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。属性： availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 height 获取屏幕的垂直分辨率。 width 获取屏幕的水平分辨率。示例： document.write（屏幕工作区: + screen.availHeight + , + screen.availWidth + ）;屏幕分

3、辨率: + screen.height + + screen.width + 1.3.3. document对象 该对象代表整个文档页面对象的集合： all 获取页面所有元素对象 forms 获取页面所有表单对象 images 获取页面所有图片对象 links 获取所有超链接或area对象具体的内容会在学习DOM时学习。2. DOM2.1. DOM简介 全称Document Object Model，即文档对象模型。 DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。 浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的， 而是将HTML页面中的每一个标记

4、按照顺序在内存中组建一颗DOM树， 组建好之后，按照树的结构将页面显示在浏览器的窗口中。2.2. 节点层次 HTML网页是可以看做是一个树状的结构，如下： html |- head | |- title | |- meta | . |- body | |- div | |- form | | |- input | | |- textarea . . . 这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。 节点最多有一个父节点，可以有多个子节点。HTML DOM 定义了访问和操作HTML文档的标准方法。 document 代表当前页面的整个文档树。 访问属性 all forms i

5、mages links body 访问方法（最常用的DOM方法） headscript type=text/javascript/ 获取dom 树, 获取document 对象.var dom = window.document;/ all 获取页面中所有的标签节点 ,注释和文档类型约束.function testAll（） var allArr = dom.all; alert（allArr.length）; for （var i = 0; i meta http-equiv=Content-Type content=text/html; charset=utf-8 /titlejavasc

6、ript/headbody onmousemove=test（this）img src=xxx alt=这是一个美女/ a href=XX一下XX两下百谷一下 姓名:/label!-默认不写type 就是文本输入框-input type=text/form/body/html2.3. 获取节点对象案例 document.getElementById（html元素的id） document.getElementsByTagName（标签名 document.getElementsByName（html元素的name 示例： 1，得到所有的div元素并显示信息（innerHTML）。 2，得到所有

7、div元素中id为test的结果。Var dom = window.document;function testByTagName（） var iptArr = dom.getElementsByTagName（input iptArr.length; alert（iptArri.value）;/ window 对象提供了一个事件, onload 事件 onload（页面加载完毕执行该代码） 是一个事件, 给事件一个方法,/window.onload = testByTagName;/2，得到所有标签id为username获取旧value值并设置value值function testById（

8、） var user = dom.getElementById（ alert（user.value）; user.value = rose;/testById（）;/3. 获取所有标签name 为like的元素.获取value值.function testByName（） var likeArr = dom.getElementsByName（like likeArr.length; alert（likeArri.value）;testByName（）;2.3.1. 案例显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue2.3.2. 属性操作练习 1，

9、写一个form，其中有多个checkbox。 2，获取所有选中的数量。 3，实现全选与全不选的效果。DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd无标题文档function getSum（） /* 需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。 思路： 1，先获取所有的checkbox对象。 2，对这些对象进行遍历。判断哪个对象被选中。 3，对被选中对象的金额进行累加。 4，显示在按钮右边。 */ v

10、ar items = document.getElementsByName（item var sum = 0; for（var x=0; x商品列表checkbox name= onclick=checkAll（this） 全选 value=3000笔记本电脑3000元2.4. 通过节点关系查找节点 从一个节点出发开始查找： parentNode 获取当前元素的父节点。 childNodes 获取当前元素的所有下一级子元素。 firstChild 获取当前节点的第一个子节点。 lastChild 获取当前节点的最后一个子节点。 nextSibling 获取当前节点的下一个节点。（兄节点） pr

11、eviousSibling 获取当前节点的上一个节点。（弟节点） 示例1： firstChild属性最普遍的用法是访问某个元素的文本： var text=x.firstChild.nodeValue; 示例2： parentNode 属性常被用来改变文档的结构。 假设您希望从文档中删除带有 id 为 maindiv 的节点： var x=document.getElementById（ x.parentNode.removeChild（x）;2.4.1. 获取节点对象的信息 每个节点都包含的信息的，这些属性是： nodeType 节点类型 nodeName 节点名称 nodeValue 节点值

12、 nodeType nodeType 属性可返回节点的类型。 - 元素类型 节点类型 - 元素 1 就是标签元素，例.哈哈/*创建节点：document.createElement（添加节点到文档树上:elt.appendChild（e） 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。elt.insertBefore（new, child）;要插入的节点 参数2： */function add（） / var inputNode = document.createElement（ / 创建一个节点的对象 inputNode.setAttribute（type,file /给新节点设置type的属性值。 var body = document.getElementsByTagName（body）0; body.appendChild（inputNode）; /把新节点添加到body体中。var count = 1; var trNode = document.createElement（tr var tdNode = document.createElement（td var inputNode = document.createEl