BOM Browser Object Model浏览器对象模型
window 顶级对象
常用的属性:
innerWidth: 获取窗口显示内容的宽度
innerHeigth: 获取窗口显示内容的高度
name: 获取新打开窗口的name
常用的方法:
alert():
prompt();
close();
confirm();
print();
open(url,name,options);
options:
width: 设置宽度
height: 设置高度
left: 设置右
top: 设置下
resizeable: yes|no
menubar:
scrollbar:
toolsbar:
defaultstatus:
var myWin=window.open(“http://www.234.com”,”window01”,”width=100,height=100”);
myWin.close()
setInterval(函数名,毫秒数);
设置定时器,在指定的”毫秒数”时间间隔重复执行
返回一个定时器对象
clearInterval(定时器对象名);
清除指定的定时器
setTimeout(函数名,毫秒数);
设置延时器,在指定的”毫秒数”后,执行一次
claerTimeout(延时器名);
清除指定的延时器
screen:显示器对象
availWidth: 当前分辨率下屏幕的宽度
availHeight: 当前分辨率下屏幕的高度
colorDepth: 屏幕的颜色深度
navigator:浏览软件对象
appName: 浏览器内核软件名
appVersion: 浏览器内核版本号
userAgent: 浏览器软件的完整信息
location: 记录了URL完整信息
http://www.234.com/admin/good/index.html?name=lisi&age=28#map1
protocol: 协议 http:
hostName: 主机名 www.234.com
host: 主机名:端口号
port: 端口号
pathName: 路径名 admin/good/index.html
search: 查询字符串 ?name=lisi&age=28
hash: 锚点名 #map1
href:设置页面跳转
window.location.href=http://www.234.com
histroy: 记录了当前进程内用户浏览过的网页的记录
常用的属性:
length:
常用的方法:
back(); go(-1)
forward(); go(1)
go(); go(3)
DOM Document Object Model文档对象模型
获取一个DOM中的节点:
核心DOM操作:适合操作XML与HTML文档
DOM节点树中节点类型:
document node: 文档节点
element node: 元素节点,HTML各种标签
attribute node: 属性节点 HTML标签的属性
text node: 文本节点 内容
comment node: 注释节点<!- - 内容- ->
var nodeHtml=document.firstChild html
var nodeHead=nodeHtml.firstChild head
var nodeBody=nodeHtml.lastChild body
table的相关方法:
tBodies: 获取一个table中的tbody集合
rows: 返回tr的集合(类似数组,可以使用操作数组的方法进行操作)
cells: 返回td的集合
对节点属性的操作:
getAtrribute(“属性名”);
setAttribute(“属性名”,”属性值”);
removeAttribute(“属性名”);
注意:IE 需要DTD的声名以上对节点属性的操作才会生效。
对节点的操作:
var objNew=document.createElement(“标签名”); 创建一个节点对象
注意:只有document才有创建节点的权利,新创建的节点们于内在中,并不在页面上
父对象.appendChild(节点对象名);
父对象.removeChild(节点对象名);
关于节点通用的属性:
nodeName:
nodeValue:
firstChild:
lastChild:
nextSibling:
previousSibling:
parentNode:
childNodes:
document.write();
DOM 操作
id、class、name
获取一个节点(对象)
方法1:通标签的id值获取一个对象
document.getElementById(“id值”);
只能是document的方法
方法2:通过标签的标签名获取一组对象
父对象.getElementsByTagName(“标签名”);
通过标签名获取对象,就算只获取到一个对象,也会组织成集合(数组)
父对象.getElementsByTagName(“*”);
获取父对象下的所有子对象
方法3:通过标签的name值获取一组对象
name属性一般是用于form表单元素,name是为了向前兼容,id是向后兼容
document.getElementsByName
IE只能获取到指定name值的表单元素
FF可以获取到指定name值的任意元素
方法4:通过标签的class值获取一组对象()
自行封装getByClass方法(此方法不是系统自带)
<script type="text/javascript">
window.onload=function(){
//你需要在所有文档加载完毕后执行的代码
function getByClass(objParent,clsName){
//根据外部传递进来父对象obj和clsName属性值,获取所有的class属性为clsName的所有的
var objs=objParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<objs.length;i++){
if(objs[i].getAttribute("class")==clsName){
arr.push(objs[i]);
}
}
return arr;
}
var obj=document.getElementById("box");
alert(getByClass(obj,'cls1'));
}
</script>
width: 设置html标签的属性
objTab.width=””;
objTab.border=”1”
height:
objTab.heigth=”300”
style: 设置行内样式
objTab.style.width=””
<div style=”width:200px;height:300px;border:1px solid red;”></div>
objDiv.style.width=”300px”;
objDiv.style.height=”400px”;
objDiv.style.border=”2px solid red”;
objDiv.sytle=”border:1px solid red”; //此种写法存浏览器不兼容问题
CSS样式的相应脚本
如果是由二个及以上的单词组成,对应的js脚本为小驼峰
background-color | backgroundColor | font-famly | fontFamily |
border-color | borderColor | background-image | backgroundImage |
className: 为对象设置样式类名
objDiv.className=”样式类名”;
联系客服