BOM小结以及文档节点基础
Posted wanghuanl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BOM小结以及文档节点基础相关的知识，希望对你有一定的参考价值。
在之前学习过程中，由于某些原因，先去看了DOM相关，而略过了BOM，在昨天终于是把BOM这部分补上。
BOM的概念就不多说，BOM的核心是window对象，window对象定义了3个【alert()，confirm()，prompt()】人机交互的接口方法方便开发人员进行调试。
其中alert()包含一个可选的提示信息参数，用于向用户弹出提示性信息。
confirm()包含两个按钮（确定与取消）如果点击”确定“则该方法返回true；点击“取消”则该方法返回false
prompt()可以接受用户输入的信息，并把用户输入的信息返回。
一，alert()
下面是一个自定义的alert()方法，并没有完成所有代码，可以继续编辑
编辑框架
<!--编写一个alert()--> <style type="text/css"> /*对话框设置在中央显示*/ #alert_box { position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; display: none; } /*设置外框样式并固定宽和高*/ #alert_box dl{ position:absolute; left:-200px; top:-100px; width:400px; height:200px; border:solid 1px #999;/*设置外框为实线，宽度为1px，颜色编号为#999*/ border-radius:8px;/*圆角*/ overflow:hidden; } /*设计对话框标题栏样式*/ #alert_box dt{ background-color:#ccc; height:30px; text-align:center; line-height:30px; font-size:15px;/*可缩小的字体缩小为15px*/ } /*对话框内容框基本样式*/ #alert_box dd{ padding:6px; margin:0; font-size:12px; } </style> </head>
调用及内容
<script> window.alert = function(title,info){ var box = document.getElementById("alert_box"); var html=‘<dl><dt>‘+title+‘</dt><dd>‘+info+‘</dd></dl>‘; if(box){/*窗口中已存在提示对话框，则直接显示内容*/ box.innerHTML = html; box.style.display = "block"; } else {//不存在对话框，则创建新的对话框，并显示内容 var div = document.createElement("div"); div.id = "alert_box"; div.style.display = "block"; document.body.appendChild(div); div.innerHTML = html; } } alert("这里是标题君", "我是内容xxx"); </script>
二，框架集
在每一个框架中，window对象始终指向的都是那个框架实例，而非最高级的框架；top对象始终指向最高级的框架，也就是浏览器窗口；paernt对象始终指向当前框架的上层框架。（在某些情况下，paernt=top）
在框架集中可以将不同层次的window对象连接起来，进行一些操作
先建立一个框架集，
<title>框架集</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<frameset rows="50%,50%"cols="*" frameborder="yes" border="1" framespacing="0"> //第一行占50%，第二行占50%，cols（列数），框架之间是否有边框。边框宽度，框架之间是否有间距
<frameset rows="*" cols="33%,*,33%" framespacing="0" frameborder="yes" border="1">
<frame src="事件.html" name="left" id="left" />
<frame src="节点.html" name="middle" id="middle" />
<frame src="正则表达式.html" name="right" id="right" />
</frameset>//第一行
<frame src="闭包函数.html" />
</frameset>
在进行编辑交互时需要在框架原代码块处添加代码
<script> window.onload=function(){ document.body.onclick=f; } var f=function(){//改变第三个框架文档的背景色为红色 parent.frames[2].document.body.style.backgroundColor="red"; } </script>
三，定时器的使用
主要为延时处理以及计时器，还有就是以一定时间间隔去执行某些代码块
<body>
<h1>标题君</h1>
<p>段落文本</p>
<input type="text" />
<script>
var p=document.getElementsByTagName("p")[0];
p.onmouseover=function(i){
setTimeout(function(){
alert(p.tagName)
},500);
}
</script>
</body>
<!--为集合中每个元素都绑定一个事件延迟处理函数-->
<script>
var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所有子元素
for(var i=0;i<o.length;i++){//遍历元素集合
o[i].onmouseover=function(i){//注册鼠标滑过事件
return function(){ //返回闭包函数
f(o[i]) //调用函数f，并传递当前对象引用
}
}(i);//调用函数并传递循环序号，实现在闭包中存储对象序号值
}
// for(var i=0;i<o.length;i++){
// o[i].onmousemove=function(i){
// return function(){
// clearTimeout(o[i].out)//清除已注册的延迟处理函数
// }
// }(i)
// }
//定义f函数
function f(o){
var out=setTimeout(function(){
//alert(o.tagName);
},500); //显示当前元素名称
o.out=setTimeout(function(){
//为了防止混淆多个注册的延迟处理函数，分别把不同元素的延迟处理函数的引用储存到该对象的out属性中
alert(o.tagName);
},500);
}
var t=document.getElementsByTagName("input")[0];
var i=1;
function s(){
var out=setTimeout(function(){
t.value=i++;
s();
},1000);
if(i>10){
clearTimeout(out);
alert("10秒")
}
} //setTimeout()方法
s();
这里是一个延迟半秒后弹出鼠标所滑过的元素的元素标签名，以及一个简易的计时功能。
三，navigator对象
这个对象包含了浏览器的基本信息，可以通过此对象查询浏览器名称，版本，系统等
这里是一个检测浏览器类型，版本号和window系统版本的代码块
<script>
if(document.getElementsByName){
var a=document.getElementsByName("a");
}else if(document.getElementsByTagName){
var a=document.getElementsByTagName("a");
}
var s=window.navigator.userAgent;
alert(s);
</script>
四，location对象
此对象储存当前页面与位置（URL）相关信息，主要用途为跳转到指定界面
五，screen对象
存储客户端屏幕信息，在用于居中以及计算坐标时常用
<script> var w=screen.availHeight; console.log(w); var n=screen.availWidth; console.log(n); </script>
六，document对象
在浏览器窗口中，每个window对象都会包含一个document属性，该属性引用窗口中显示HTML文档的document对象。
<img name="img" src="../img/备1.jpg" /> <form name="form" method="post" action="navigator.html"></form> <script> alert(document.img.src); alert(document.images[0].src); alert(document.images["img"].src); </script>
这里为插入一个图片，然后以name属性，文本下标，文档对象集合三种方式来获得图片位置。
利用open（）可以给某个框架创建文档，也可以用write（）方法来为其添加内容。在添加后需要用close（）方法来结束创建过程。
在接下来呢，就是关于文档节点的了
首先，是元素添加
<div id="box1"><p>beforebegin</p></div> <script> document.getElementById("box1").insertAdjacentHTML("beforebegin", "<h2>lalalalallalala</ h2>");//在当前元素之前插入一个同级元素 document.getElementById("box1").insertAdjacentHTML("afterbegin", "<h2>qwq</ h2>");//在当前元素之下或者第一个元素之前插入一个新的元素（子元素） document.getElementById("box1").insertAdjacentHTML("beforeend", "<h2>0.0 0.0</ h2>");//当前元素之下，或第一个元素之后插入一个元素（子元素） document.getElementById("box1").insertAdjacentHTML("afterend", "<h2>略略略</ h2>");//在当前元素后插入一个同级元素 </script>
其次，outerHTML和innerHTML，outerText和innerText的区别
<ul> <li>你好</li> <li>你叫什么？</li> <li>你干什么</li> <li>你喜欢JS么？</li> </ul> <script> var ul = document.getElementsByTagName("ul")[0];//获取列表结构 var lis = ul.getElementsByTagName("li");//获取所有列表项 lis[1].onclick = function () {//为第一个列表项绑定事件处理函数 this.innerHTML = "<h2>我是一名初学者</h2>"; //替换HTML文本 } lis[3].onclick = function () { this.outerHTML = "<h2>当然喜欢</h2>";//用HTML文本覆盖列表项标签及包含内容 } function getInnerText(element){ return (typeof element.textContent == "string") ? element.textContent : element.innerText;//接收一个元素作为参数，检查是否有textContent属性。如果没有， //就使用innerText } function setInnerText(element,text) { if (typeof element.textContent == "string") { element.textContent = text; } else { element.innerText = text; } } lis[0].onclick = function () { this.innerText = "谢谢";//替换文本 } lis[2].onclick = function () { this.outerText = "我是学生";//覆盖列表标签及其包含内容 } </script>
最后，是一个添加项目的代码块
每次使用js文件都会重新加载页面，可以使用遍历的方法减少刷新次数
<input type="button" value="添加项目" onclick="addItems"/> <ul id="mylist"></ul> <script> function addItems() { var fragment = document.createDocumentFragment(); var ul = document.getElementById("mylist"); var li = null; for (var i = 0; i < 12; i++) { li = document.createElement("li"); li.appendChild(document.createTextNode("项目" + (i + 1))); fragment.appendChild(li); } ul.appendChild(fragment); } </script> <div id="box"> document.createAttribute(name)</div> <script> var element = document.getElementById("box"); var attr = document.createAttribute("align");//创建一个属性节点 attr.value = "center";//值为center element.setAttributeNode(attr);//把attr添加到元素中 //访问属性(三种方式） alert(element.attributes["align"].value); alert(element.getAttributeNode("align").value); alert(element.getAttribute("align")); </script>
以上是关于BOM小结以及文档节点基础的主要内容，如果未能解决你的问题，请参考以下文章