全称 Browser Object Model,浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一
window 对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在
或 每次出现时被自动创建。
window方法:
document 对Document对象的只读引用
location 用于窗口或框架的 Location 对象
history 对 History 对象的只读引用。
document.tilte 设置网页的标题
moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveby() 相对于目前的位置移动。
resizeTo() 调整当前浏览器的窗口。
open() 打开新窗口显示指定的URL(有的浏览器中是打一个新的选项卡)
setTimeout(vCode, iMilliSeconds) 超时后执行代码。
setInterval(vCode, iMilliSeconds) 定时执行代码,第一次也是先待,到时再执行。
基本上所有的HTML元素中都可以指定事件属性。每个元素支持什么样事件应查询文档。所有的事件属性都是以on开头,后面的是事件的触发方式,如:
onclick,表示单击
onkeydown,表示键按下
常用事件类型
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
Location 对象是由 JavaScript runtime engine 自动创建的,包含有关当前 URL 的信息。
location中的重要方法:
href属性 设置或获取整个URL为字符串。
reload() 重新装入当前页面
Screen 对象是由 JavaScript runtime engine 自动创建的,包含有关客户机显示屏幕的信息。
属性:
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
示例:
document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "
");
document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "
");
该对象代表整个文档页面
对象的集合:
all 获取页面所有元素对象
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象
具体的内容会在学习DOM时学习。
一些方法:
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
全称Document Object Model,即文档对象模型。
DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的窗口中。
HTML网页是可以看做是一个树状的结构,如下:
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。
节点最多有一个父节点,可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树。
访问属性
all
forms
images
links
body
访问方法(最常用的DOM方法)
document.getElementById(“html元素的id”)
document.getElementsByTagName(“标签名”)
document.getElementsByName(“html元素的name”)
示例:
1.得到所有的div元素并显示信息(innerHTML)。
2.得到所有div元素中id为"test"的结果。
Var dom = window.document;
function testByTagName() {
var iptArr = dom.getElementsByTagName("input");
for (var i = 0; i < iptArr.length; i++) {
alert(iptArr[i].value);
}
}
// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2,得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() {
var user = dom.getElementById("username");
alert(user.value);
user.value = "rose";
}
//testById();
//3. 获取所有标签name 为like的元素.获取value值.
function testByName() {
var likeArr = dom.getElementsByName("like");
for (var i = 0; i < likeArr.length; i++) {
alert(likeArr[i].value);
}
}
testByName();
1.写一个form,其中有多个checkbox。
2.获取所有选中的数量。
3.实现全选与全不选的效果。
商品列表
全选
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
笔记本电脑3000元
全选
从一个节点出发开始查找:
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
示例1:
firstChild属性最普遍的用法是访问某个元素的文本:
var text=x.firstChild.nodeValue;
示例2:
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
每个节点都包含的信息的,这些属性是:
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素,例
..
文本 3 标签元素中的文本 注释 8 表示为注释 nodeName nodeName 属性含有某个节点的名称。 -------------------------------- 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document nodeValue 对于文本节点,nodeValue 属性是所包含的文本。 对于属性节点,nodeValue 属性是属性值。 对于注释节点,nodeValue 属性注释内容。 nodeValue 属性对于文档节点和元素节点是不可用的。