JavaScript操作BOM、DOM对象

BOM模型

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

BOM可实现功能

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口的大小

页面的前进、后退

window对象的常用属性

常用的属性

属性名称	说      明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

 

 window对象的常用方法

常用的方法

方法名称	说      明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

confirm()方法

 

 confirm()：将弹出一个确认对话框

confirm()与alert ()、 prompt()区别

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

open()方法

window.open("弹出窗口的url","窗口名称","窗口特征”)

窗口特征

属性名称	说      明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes | no  |1 | 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes | no  |1 | 0	是否显示滚动条。黙认是yes
location=yes | no  |1 | 0	是否显示地址地段。黙认是yes
status=yes | no  |1 | 0	是否添加状态栏。黙认是yes
menubar=yes | no  |1 | 0	是否显示菜单栏。黙认是yes
resizable=yes | no  |1 | 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes | no  |1 | 0	是否显示标题栏。黙认是yes
fullscreen=yes | no  |1 | 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

history对象

常用方法

名称	说      明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

 location对象

常用属性

名称	说      明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说      明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用

主页面使用href实现跳转和刷新本页

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  

<a href="javascript:location.reload()">刷新本页</a>

<a href="javascript:history.back()">返回主页面</a>

Document对象

常用属性

名称	说      明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

 Document对象应用2-2

判断页面是否是链接进入

自动跳转到登录页面

 Document对象的常用方法2-1

Document对象的常用方法

名称	说      明
getElementById()	返回对拥有指定id的第一个对象的引用                对象的id唯一
getElementsByName()	返回带有指定名称的对象的集合                         相同name属性
getElementsByTagName()	返回带有指定标签名的对象的集合                      相同的元素
write()	向文档写文本、HTML表达式或JavaScript代码

Document对象的常用方法2-2

 动态改变层、标签中的内容

document.getElementById("book"). innerHTML="现象级全球畅销书"; 

访问相同name的元素

var aInput=document.getElementsByTagName("input");

var sStr="";

for(var i=0;i<aInput.length;i++){        

      sStr+=aInput[i].value+"&nbsp;&nbsp;";

}

document.getElementById("replace").innerHTML=sStr;

访问相同标签的元素

var aInput=document.getElementsByName("season");  

      var sStr="";      

  for(var i=0;i<aInput.length;i++){    

        sStr+=aInput[i].value+"&nbsp;&nbsp;";      

  }        

document.getElementById("replace").innerHTML=sStr;

JavaScript内置对象

Array：用于在单独的变量名中存储一系列的值

String：用于支持对字符串的处理

Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

Date：用于操作日期和时间

Date对象

使用Date对象获得时、分、秒

 Date对象的方法

常用方法

方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

Math对象

方法	说 明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

定时函数2-1

 清除函数

          

 操作DOM

DOM：Document Object Model（文档对象模型）

                  

 节点和节点关系

                   

 访问节点

使用getElement系列方法访问指定节点

        getElementById()

        getElementsByName()

        getElementsByTagName()

根据层次关系访问节点

根据层次关系访问节点2-1

节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

根据层次关系访问节点2-2

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

 节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

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

操作节点

      操作节点的属性

          创建和插入节点

                删除和替换节点

                      操作节点样式

                              获取元素的样式

操作节点的属性

 删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

var delNode=document.getElementById("first");

delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");

var newNode=document.createElement("img");

newNode.setAttribute("src","images/f03.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode);

操作节点样式

                   

 改变样式的属性

        style属性

        className属性

 style属性

 HTML元素.style.样式属性＝"值"

 document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

className属性

HTML元素.className="样式名称"

            

 获取元素的样式

HTML元素.style.样式属性;

alert(document.getElementById("cartList").display);

document.defaultView.getComputedStyle(元素,null).属性;

 HTML中元素属性

元素属性应用

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

元素属性应用

 总结

JavaScript操作BOM对象                                          JavaScript操作DOM对象

    window对象                                                                          DOM操作

          alert( )、…open( )                                                                 DOM分类、…节点信息

    history对象与location对象                                                  操作节点

          back( )、forward( )、go( )                                                     操作节点的属性

    document对象                                                                            …

         getElementById( )                                                                  获取元素的样式

    JavaScript内置对象                                                             获取元素位置

                                                                                                       currentStyle                                                                                                                                       getComputedStyle()