02 BOM 概述
By Kevin Song
- 02-01 window中常用对象
- 02-02 window中常用方法
- 02-03 window中常用事件
- 02-04 document对象
- 02-05 节点操作
BOM(Browser Object Model)浏览器对象模型
作用:方便操作浏览器
02-01 window中常用对象
- window对象:代表浏览器中一个打开的窗口
- navigator对象:包含关系web浏览器的信息
- appName属性:获取浏览器名字
- appVerson属性:获取浏览器版本
- history对象:包含用户已浏览的URL信息
- back()方法:从历史列表中装入前一个URL
- forward()方法:从历史列表中装入后一个URL
- go()方法:从历史列表总和你装入URL
- Location对象
- navigator对象:包含关系web浏览器的信息
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<!--定义一个事件源,通过对事件源的触发,获取想要的结果-->
<!--定义onclick事件处理方式-->
<script type="text/javascript">
//定义获取浏览器信息函数
function getWindowInfo() {
//想要知道浏览器信息,就需要使用window对象中的navigator对象
var name = window.navigator.appName;
var version = navigator.appVersion;//window.可以省略
println(version+":"+name);
}
//定义前进
function forward() {
history.forward();
}
//定义后退
function back() {
history.back();
}
</script>
<!--定义事件源-->
<input type="button" value="Get Info" onclick="getWindowInfo()">
<input type="button" value="Forward" onclick="forward()">
<input type="button" value="Back" onclick="back()">
</body>
</html>
location对象
- 属性
- href:设置或获取整个URL字符串
- 获取:var text = location.href;
- 设置:location.href = “http://www.baidu.com“。设置后进行连接访问
- href:设置或获取整个URL字符串
<script type="text/javascript">
function getURL() {
//var pro = location.protocol; //file
var text = location.href;
alert(text);
}
function setURL() {
location.href = "http//:www.baidu.com"
}
</script>
<input type="button" value="Get" onclick="getURL()">
<input type="button" value="Get" onclick="setURL()">
02-02 window中常用方法
- window对象
- confirm()方法:弹出一个确认窗口
- setTimeout(“alert(“hi”)”,1000)方法:1000毫秒后运行一次
- setInterval(“alert(“hi”)”,1000)方法:每隔1秒执行一次
- clearInterval(要停止的setInterval)方法:停止循环执行
- moveBy(10,10)方法:移动窗口
- moveTo(30,30)方法:移动窗口到(30,30)坐标
<script type="text/javascript">
function confirmWindow() {
var b = confirm("Please confirm click action");
if(b==ture) {
alert(Confirmed); //点击确认显示
} else {
alert(Abort); //点击取消显示
}
}
</script>
<input type="button" value="" onclick="confirmWindow()">
- window方法二
- open(“ad.html”,”_blank”,”height=300,width=400,status=no,toolbar=no,location=no”);打开一个新的窗口
- close();关闭当前窗口
<script type="text/javascript">
function adPop() {
open("ad.html","_blank","height=300,width=400,status=no,toolbar=no,location=no");
}
</script>
<input type="button" value="AdPop" onclick="adPop()">
ad.html
<html>
<head>
<title>ad</title>
</head>
<body>
<h1>Sale Today!</h1>
<script type="text/javascript">
setTimeout("close()",3000);
</script>
</body>
<html>
02-03 window中常用事件
- onfocus 被激活的窗口
- onload 页面所有内容加载完毕后触发
- onunload 页面所有内容卸载后触发
- onbeforeload 页面所有内容卸载前触发
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<script type="text/javascript">
onunload = function() {
alert("onunload run");
}
onload = function() {
alert("onload run");
}
onbeforeload = function() {
alert("onbeforeload run");
}
</script>
</body>
<html>
流氓广告弹窗练习
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<script type="text/javascript">
onload = function() {
open("ad.html","_blank","height=300,width=400,status=no,toolbar=no,location=no");
}
</script>
</body>
<html>
ad.html
<html>
<head>
<title>ad</title>
</head>
<body>
<h1>Sale Today!</h1>
<script type="text/javascript">
onunload = function() {
open("ad.html","_blank","height=300,width=400,status=no,toolbar=no,location=no");
}
setInterval("focus()",1000);//每隔一秒获取一次焦点,要你老命
</script>
</body>
<html>
02-04 document对象
作用:对标记型文档进行封装,以便于对其操作
节点的三个必备属性:
- 节点名称 nodeName
- 节点类型 nodeType
- 1:标签型节点(没有value)
- 2:属性节点
- 3:文本节点
- 节点值 nodeValue
document对象获取页面中的节点
- getElementById() 通过id获取该标签节点,返回标签节点对象
- getElementsByName(); 通过name属性获取节点,因为name可以重复,所以返回一个数组
- getElementsByTagName(); 通过标签名获取节点。因为tagname可以重复,所以返回一个数组
getElementById
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<script type="text/javascript">
function getNodeDemo() {
var divNode = document.getElementById("divid");//把id="divid"的div封装成对象
alert(divNode.nodeName);//获取节点名称 DIV
alert(divNode.nodeType);//获取节点类型 1
alert(divNode.nodeValue);//获取节点值 null
alert(diveNode.innerHTML)//获取文本值
diveNode.innerHTML = "Changed";//改变文本值
}
</script>
<input type="button" value="document获取节点" onclick="getNodeDemo()" />
<div id="divid">这是一个div区域</div>
</body>
<html>
getElementsByName
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<script type="text/javascript">
function getNodeDemo2() {
var nodes = document.getElementByName("user");//返回一个数组
alert(node[0].value);
var nodes = document.getElementByName(user"")[0];//返回数组0角标的对象
alert(Node.value);
}
</script>
<input type="button" value="document获取节点" onclick="getNodeDemo2()" />
<input type="text" name="user" />
</body>
<html>
getElementsByTagName
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<script type="text/javascript">
function getNodeDemo3() {
var divNode = document.getElementById("mediaweb");//返回一个数组
var aNodes = divNode.getElementsByTagName("a");
for(var x = 0; x < aNodes.length; x++) {
aNodes[x].target = "_blank";
}
}
</script>
<input type="button" value="document获取节点" onclick="getNodeDemo3()" />
<a href="http://www.baidu.com">百度</a>
<div id="mediaweb">
<a href="http://www.acfun.cn">AcFun</a>
<a href="http://www.youku.com">YouKu</a>
</div>
</body>
<html>
通过层次关系获取节点
关系
- 父节点:parentNode 一个节点对象
- 子节点:childNodes 一个节点集合
- 兄弟节点(少用兄弟节点,不同内核的浏览器不同解析方式,会接续出标签间的空白文本节点)
- 上一个兄弟节点: previousSibling 一个节点对象
- 下一个兄弟节点: nextSibling 一个节点对象
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<script type="text/javascript">
function getNodeByLevel() {
//获取页面中的表格节点
var tabNode = document.getElementById("tabid");
//获取父节点。parentNode
var node = tabNode.parentNode;
alert(node.nodeName);//BODY
//获取子节点。childNodes
var node = tabNode.childNodes;
alert(nodes[0].nodeName);//TBODY
//获取兄弟节点
//上一个
var node = tabNode.previousSibling;
alert(node.nodeName);//DIV
//下一个
var node = tabNode.nextSibling;
alert(node.nodeName);//DL
}
</script>
<input type="button" value="通过层次关系获取节点" onclick="getNodeByLevel()" />
<div>div区域</div>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<dl></dl>
</body>
<html>
02-05 节点操作
- 创建节点
- createTextNode()创建一个文本节点对象
- createElement()创建一个元素
- 添加节点
- appendChild(要添加的节点)
- innerHTML属性:node.innerHTML = “要添加的节点”;
- 删除节点
- removeNode() 方法
- removeNode(false) 只删当前节点
- removeNode(true) 删当前节点和所有子节点
- removeChild() 方法(建议使用) 删除子节点
- 删除当前节点的方法:先获取父节点,再使用removeChild()方法
- removeNode() 方法
- 替换节点
- replaceNode(新节点) 方法
- replaceChild(新节点,子节点)方法(建议使用)
- 克隆节点
- cloneNode(false)只克隆当前节点
- cloneNode(true)克隆当前和齐子节点
<html>
<head>
<title>Kevin's Homepage</title>
<style type="text/css">
div {
border:#00ccff 1px solid;
width:200px;
padding:20px
}
#div_1 {
background-color:#00ccff;
}
#div_2 {
background-color:#FFccff;
}
#div_3 {
background-color:#cc00ff;
}
#div_4 {
background-color:#00FF00;
}
</style>
</head>
<body>
<script type="text/javascript">
//添加文本节点
function crtAndAdd() {
var oTextNode = document.createTextNode("这是一个新的文本");
var oDivNode = document.getElementById("div_1");
oDivNode.appendChild(oTextNode);
}
//添加按钮节点
function crtAndAdd2() {
var oButNode = document.createElement("Button");
oButNode.type = "button";
oButNode.value = "A new Button";
var oDivNode = document.getElementById("div_1");
oDivNode.innerHTML("<input type='button' value='A New Good Button'/>");
}
//删除节点
function delNode() {
var oDivNode = document.getElementById("div_2");
oDivNode.removeNode(false);//移除oDivNode节点
oDivNode.removeNode(true);//移除oDivNode节点和所有下面的节点
oDivNode.parentNode.removeChild(oDivNode);
}
//替换节点
function modifyNode() {
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
oDivNode_1.replaceNode(oDivNode_3);
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
</script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd()" />
<input type="button" value="删除节点" onclick="delNode()" />
<input type="button" value="修改节点" onclick="modifyNode()" />
<div id="div_1">
You
</div>
<div id="div_2">
Are
</div>
<div id="div_3">
The
</div>
<div id="div_4">
One
</div>
</body>
<html>