JavaScript操作BOM对象

window对象的常用属性
  history   有关客户访问过的URL的信息
  location  有关当前 URL 的信息
  window.属性名= "属性值" 
  window.location="http://www.bdqn.cn" ;      

window对象的常用方法
prompt( )   显示可提示用户输入的对话框
alert( )      显示带有一个提示信息和一个确定按钮的警示框 
confirm( )  显示一个带有提示信息、确定和取消按钮的对话框 
close( )   关闭浏览器窗口
open( )   打开一个新的浏览器窗口，加载给定 URL 所指定的文档     window.open("弹出窗口的url","窗口名称","窗口特征”)

setTimeout( )   在指定的毫秒数后调用函数或计算表达式
setInterval( )   按照指定的周期（以毫秒计）来调用函数或表达式

 
history对象
常用方法
back()     加载 history 对象列表中的前一个URL
forward()  加载 history 对象列表中的下一个URL 
go()      加载 history 对象列表中的某个具体URL

 

location对象
host    设置或返回主机名和当前URL的端口号
hostname   设置或返回当前URL的主机名
href     设置或返回完整的URL

常用方法
reload()    重新加载当前文档
replace()   用新的文档替换当前文档

 

Document对象
常用属性
referrer  返回载入当前文档的URL  
URL    返回当前文档的URL
document.referrer
document.URL

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

 

JavaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间

Date对象2-1
var 日期对象=new Date(参数)
参数格式：MM  DD,YYYY,hh:mm:ss

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日）以来的毫秒数

οnlοad="" 加载

 

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
setTimeout("调用的函数",等待的毫秒数)

定时函数2-2
setInterval("调用的函数",间隔的毫秒数)

清除函数
clearTimeout(setTimeOut()返回的ID值)
clearInterval(setInterval()返回的ID值）

 

 

访问节点
使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、getElementsByTagName()

根据层次关系访问节点2-1
节点属性
parentNode     返回节点的父节点
childNodes      返回子节点集合，childNodes[i]
firstChild         返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild         返回节点的最后一个子节点
nextSibling     下一个节点
previousSibling  上一个节点

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

节点信息
    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)属性attr         用其他的节点替换指定的节点

 

style属性
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

背景     backgroundColor、backgroundImage、backgroundRepeat
文本     fontSize、fontWeight、textAlign、textDecoration、font、color
边距      padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
边框      border、borderTop、borderBottom、borderLeft、borderRight

onclick             当用户单击某个对象时调用事件
onmouseover    鼠标移到某元素之上
onmouseout     鼠标从某元素移开
onmousedown   鼠标按钮被按下
function out(){
        document.getElementById("cart").style.backgroundColor="#f9f9f9";
        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
        document.getElementById("cartList").style.display="none";
    }

className属性
HTML元素.className="样式名称"
function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

 

获取元素的样式
HTML元素.style.样式属性;
alert(document.getElementById("cartList").display);

document.defaultView.getComputedStyle(元素,null).属性;
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);

HTML元素. currentStyle.样式属性;
alert(document.getElementById("cartList").currentStyle.display);

 

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

 

元素属性应用
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
var sTop=document.documentElement.scrollTop||document.body.scrollTop;