锐客网

  1. 首页 > it技术 > >

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(参数)
参数格式：MMDD,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); 返回26Math.ceil(-25.5); 返回-25
floor()对数进行下舍入Math.floor(25.5); 返回25Math.floor(-25.5); 返回-26
round()把数四舍五入为最接近的数Math.round(25.5); 返回26Math.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值
元素element1
属性attr2
文本text3
注释comments8
文档document9

操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")

创建节点
createElement( tagName)创建一个标签名为tagName的新元素节点
A.appendChild( B)把B节点追加至A节点的末尾
insertBefore( A,B )把A节点插入到B节点之前
cloneNode(deep)复制某个指定的节点
【JavaScript操作BOM对象】删除和替换节点
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;






    推荐阅读


    上一篇：c++（求严格上升子序列长度）

    下一篇：当年受了三年校园冷暴力的那姑娘，现在……