方才简单说明了BOM与DOM,本篇进一步了解一下。
BOM
window 对象属性
- name:指浏览器窗口的名字或框架的名字;(这个名字是给 <a> 标记的 target 属性来用的)
- top:代表最顶层窗口;
- parent:代表父级窗口,主要用于框架;
- self:代表当前窗口,主要用于框架;
- innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏);
- innerHeight:指浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏);
window 对象方法
- alert():弹出一个警告对话框;
- prompt():弹出一个输入对话框;
- confirm():弹出一个确认对话框;
- close():关闭窗口;
- print():打印窗口;
- open():打开一个 新的浏览器窗口;
- 语法:var win = window.open(url,name,options);
- 说明:参数可有可无。如果没有指定参数,则打开一个选项卡式的窗口(大小是最大化)。
- 参数:
- url:准备在新窗口中显示哪个文件;url 可以为空字符串,表示显示一个空的页面。
- name:新窗口的名字;该名字给 <a> 标记的 target 属性用。
- options:窗口的规格(属性)。
- 返回值:返回一个 window 对象的变量,可以通过该名称跟踪窗口。
screen(屏幕对象)
- width:屏幕的宽度;(只读属性)
- height:屏幕的高度;(只读属性)
- availWidth:屏幕的有效宽度,不包含任务栏;(只读属性)
- availHeight:屏幕的有效高度,不包含任务栏;(只读属性)
navigator 对象
- appName:浏览器软件名称,用来判断用户使用的是什么核心的浏览器;
- 如果是 IE 浏览器的话,返回值为:Microsoft Internet Explorer
- 如果是 Firefox 浏览器的话,返回值为:Netscape
- appVersion:浏览器软件的核心版本号;
- systemLanguage:系统语言;
- userLanguage:用户语言;
- platform:平台;
location 地址栏对象
- href:获取地址栏中完整的地址。可以实现 JS 的网页跳转;
- host:主机名(域名);
- hostname:主机名;
- pathname:文件路径及文件名;
- search:查询字符串;
- protocol:协议;
- hash:锚点名称;如:#top
- reload(true):刷新网页;true 参数表示强制刷新
注意:所有的属性,重新赋值后,网页将自动刷新。
history 浏览历史对象
- length:历史记录的个数;
- go(n):同时可以实现“前进”和“后退”;(n:表示整数)
- history.go(0) 刷新网页;
- history.go(-1) 后退;
- history.go(1) 前进一步;
- history.go(3) 前进三步;
- forward():相当于浏览器的“前进”按钮;
- back():相当于浏览器的“后退”按钮;
延时器
- setTimeout():设置一个延时器,换句话说:时间一到,就执行 JS 代码一次;
- 语法:var timer = window.setTimeout(code,millisec);
- 参数:code 是任何合法的 JS 代码,一般情况下是 JS 函数。该函数要放到引号("code")中;
- 返回值:返回一个延时器的 id 变量,这个 id 变量给 clearTimeout() 用来清除。
- clearTimeout():清除延时器 id 变量;
- 语法:window.clearTimeout(timer);
- 参数:timer 就是由 setTimeout() 设置的延时器的 id 变量。
定时器
- setInterval():设置一个定时器,重复不断的执行 JS 代码(周期性);
- 语法:var timer = window.setInterval(code,millisec);
- 参数:code 是任何合法的 JS 代码,一般情况下是 JS 函数。该函数要放到引号("code")中;
- 返回值:返回一个延时器的 id 变量,这个 id 变量给 clearInterval() 用来清除。
- clearInterval():清除定时器 id 变量;
- 语法:window.clearInterval(timer);
- 参数:timer 就是由 setInterval() 设置的定时器的 id 变量。
定时器总是调用其他函数,延时器总是调用自己所在的函数。
onload 事件:当网页加载完成(指<body>标记的所有内容全部加载完成),才触发该事件(条件)。通过 onload 事件属性,去调用 JS 的函数。onload 属性只有<body>标记才有。
onclick 事件:当单击时,去调用 JS 代码。所有 HTML 标签都具有该事件属性。
DOM
DOM 的分类
- 核心 DOM:提供了同时操作 HTML 文档和 XML 文档的公共的属性和方法;
- HTML DOM:针对 HTML 文档提供的专用的属性和方法;
- XML DOM:针对 XML 文档提供的专用的属性和方法;
- CSS DOM:提供了操作 CSS 的属性和方法;
- Event DOM:时间对象模型;如:onclick、onload 等。
DOM 中节点类型
- document 文档节点:代表整个网页,不代表任何 HTML 标记。但它是 HTML 节点的父节点;
- element 元素节点:指任何 HTML 标记。每一个 HTML 标记就称一个“元素节点”,他可以有文本节点和属性节点;
- attribute 属性节点:指 HTML 标记的属性;
- text 文本节点:是节点书的最底层节点;
节点访问
- nodeName:节点名称;
- nodeValue:节点的值。只有文本节点才有值,元素节点没有值;nodeValue 的值只能是“纯文本”,不能含有任何的 HTML 标记或 CSS 属性;
- firstChild:第1个子节点;
- lastChild:最后1个子节点;
- childNodes:子节点列表,是一个数组;
- parentNode:父节点;
对节点的属性操作
- setAttribute(name,value):给某个节点添加一个属性;
- getAttribute(name):获取某个节点属性的值;
- removeAttribute(name):删除某个节点的属性。
节点的创建
- document.createElement(tagName):创建一个指定的 HTML 标记(一个节点);
- tagName:是指不带尖括号的 HTML 标记名称
- parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下;
- parentNode:代表父节点,父节点必须存在
- childNode:代表创建的一个子节点
- parentNode.removeChild(childNode):删除子节点;
- parentNode:代表父节点,父节点必须存在
- childNode:代表要删除的一个子节点
HTML DOM 访问 HTML 元素的方法
- getElementById():查找网页中指定 id 的元素对象,返回一个元素对象;
- 语法:var obj = document.getElementById(id)
- 参数:id 是指网页中标记的 id 属性的值
- getElementsByTagName(tagName):查找指定的 HTML 标记,返回一个数组;
- 语法:var arrObj = parentNode.getElementsByTagName(tagName)
- 参数:tagName 是要查找的标记名称,不带尖括号的
元素对象的属性
tagName:标签名称,与核心 DOM 中 nodeName 一样;
className:CSS 类的样式;
id:同 HTML 标记 id 属性一样;
title:同 HTML 标记 title 属性一样;
style:同 HTML 标记 style 属性一样;
innerHTML:包含 HTML 标记中的所有的内容,包括 HTML 标记;
offsetWidth:元素对象的宽度(不带 px 单位);
offsetHeight:元素对象的高度(不带 px 单位);
scrollWidth:元素对象的总宽度,包括滚动条中的内容(不带 px 单位);
scrollHeight:元素对象的总高度,包括滚动条中的内容(不带 px 单位);
scrollTop:指内容向上滚动了多少距离(有滚动条时才有效);
scrollLeft:指内容向左滚动了多少距离(有滚动条时才有效);
Event DOM:事件 DOM
- 事件简介:主要实现“用户与网页的交互”;当事件发生时,去执行 JS 功能代码。
- 常用事件:
- onload:当网页加载完成时;(只能给 <body> 用)
- onclick:当点击时;
- onscroll:当拖动滚动条时;
- onmouseover:当鼠标放上时;
- onmouseout:当鼠标移开时;
- onsubmit:当提交表单时;
- onreset:当重置表单时;
- onfocus:当获得焦点时(把光标定位到文本框中);
- onblur:当失去焦点时(把光标从文本框中移开);
- onchange:当下拉列表内容改变时;(用在下拉列表、上传文件)
- onselect:当选中文本时;
- onresize:当改变窗口大小时;
- . . . . . .
DOM 中 Event 对象属性
- type:当前的事件类型;
- clientX 和 clientY:距离窗口左边和上边的距离;
- pageX 和 pageY:距离网页左边和上边的距离;
- screenX 和 screenY:距离屏幕左边和上边的距离;
style 对象属性与 CSS 属性的转换
- 如果是一个单词,style 对象属性与 CSS 属性一样;
- 如果是多个单词,第一个单词全小写,后面每个单词首字母大写,并去掉中划线。
【标记(HTML中的叫法) 】
【节点(DOM中的叫法)】
【对象(JS中的叫法)】