JavaScript操作BOM ，DOM对象 -笔记

JavaScript BOM ，DOM对象

window对象
           浏览器对象模型(BOM)是JavaScript的组成之一.它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互.

bom模型结构
window包括:history ,document ,location
document包括:link ,form ,anchor
form包括: button ,checkbox ,text ,textarea ,radio ,select,等.

BOM实现的功能一般有:
弹出新的浏览器窗口.
移动关闭浏览器窗口及调整窗口的大小.
在浏览器窗口中实现页面的前进,后退功能.

window对象也称为浏览器对象,常用属性有
history 有关客户访问过的URL的信息
location 有关当前URL的信息
scree 只读属性,包含有关客户端显示屏幕的信息
使用格式:window.属性名=“属性值”

window对象的常用方法
prompt() 显示课题室用户输入的对话框
alert() 显示带有提示信息和一个确定按钮的警示对话框
confirm() 显示带有提示信息,确定和取消按钮的对话框
close() 关闭浏览器窗口
open( “弹出窗口的URL”,“窗口名称”,“窗口特征”) 打开一个新的浏览器窗口,加载给定URL所指的文档
窗口特征:
  height,width 窗口文档显示区的高度,宽度
  left,right 窗口的x坐标 y坐标
setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval() 按照指定的周期(以毫秒计)来调用函数或表达式
使用格式:window.方法名();也可以直接使用: 方法名();

history对象和location对象
history提供用户最近浏览过的URL列表
history对象的方法
back() 加载history对象列表中的前一个URL
forward() 加载history对象列表中的后一个URL
go(1),代表前进
go(-1),代表后退

location对象提供当前页面的URL信息,并且可以重新装载当前页面或载入新页面
location对象的属性
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
location对象的方法
reload() 重新加载当前文档
replace() 用新的文档替换当前文档

document对象
document对想既是window对象的一部分,又代表了整个HTML文档,可以用来访问页面中的所有元素.
document对象的常用属性
referrer 返回载入当前稳当的URL
URL 返回当前文档的URL
使用语法:document.referrer

document对象的常用方法
getElementById() 返回对拥有指定id的第一个对象进行引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
write() 向文档写文本,HTML表达式或JavaScript代码

定时函数和Date对象

JavaScript内置对象
Date 用于操作日期和时间
存储当前日期
var today=new Date();
存储时间日期
var 日期实例=new Date(参数)
参数格式: “MM DD , YYYY,hh:mm:ss”
常用方法:
getDate() 返回date对象的一个月中的某一天 ,其值为1~31
getDay() 返回Date对象的星期中的某一天,其值为0~6 0为星期日
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

Array 用于在单独的变量名中存储一系列的值
String 用于支持对字符串的处理
Math 执行常用的数字任务,包含了若干个数字常量和函数
常用方法:
ceil() 对数字进行上舍入
floor(x) 对 x 进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。

定时函数
setTimeout(“调用函数的名称”,“等待的毫秒数”)

setInterval(“调用函数的名称”,“周期多少毫秒调用一次函数”)

clearTimeout() 清除setTimeout()函数设置的定时器

clearInterval() 清除setInterval()函数设置的定时器

JavaScript访问 DOM 节点

DOM是Document Object Model的缩写及文档对象模型
DOM操作分类:

1.DOM core

使用DOM core来获取表单对象的方法：

document.getElementByTagName(“form”);
使用DOM Core来获取某元素的src的方法:

document.getAttribute(“src”);

2、HTML_DOM

使用HTML_DOM来获取表单对象的方法：

document.forms //HTML-DOM提供了一个forms对象
使用HTML_DOM来获取某元素的SRC的方法：

documemt.src;

3、CSS_DOM

设置某元素style对象字体颜色的方法：

element.style.color = “red”;

节点的创建,添加,删除,替换等

节点和节点的关系
DOM是以树状结构组织的HTML文档.
整个文档是一个文档节点
每个html标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个html属性是一个属性节点
注释属于注释节点

访问节点
节点属性
parentNode 返回节点的父节点
childNodes 返回子节点集合,childNodes[i]
firstchild 返回节点的第一个节点,最普遍的用法是访问该元素的文本节点
lastchild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点

element属性
firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementsibling 下一个节点
previousElementSibling 上一个节点

节点信息
节点是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含节点某些信息的属性.
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)

节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

操作节点
操作节点的属性
getAttribute(“属性名”):用来获取属性的值
setAttribute(“属性名”,“属性值”) 用来设置属性的值

创建和插入节点
createElement(tagName) 创建一个标签为tagName的新元素节点
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入B节点之前
cloneNode(deep) 复制某个指定的节点

删除和替换节点
removeChild(node) 删除指定的节点
replaceChild(newNode,oldNode) 用其他的节点替换指定的节点
newNode是替换新节点,
oldNode 是要被替换的节点

设置元素的样式

操作节点的样式
style属性
可以操作:背景(background),文本(text),边距(padding),
边框(border)

常用事件
onclick 当用户单机某个对象时调用事件
onmouseover 鼠标指针移到某元素之上
onmouseout 鼠标指针从某元素上移开
onmousedown 鼠标按钮被按下

className属性可设置返回元素的class样式
HTML 元素.className=“样式名称”

获取元素的样式
HTML 元素.style.样式属性

JavaScript获取元素位置的属性

offsetLeft 返回当前元素左边界到它上级元素的左边界的距离,只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离,只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
sffsetParent 返回元素的偏移容器,即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回元素的滚动条的水平位置
clientWidth 返回元素的可见高度
clientHeight 返回元素的可见高度