BOM DOM
一、BOM
BOM是browser object model的缩写，简称浏览器对象模型
（一）Window
Window对象是顶级对象可以默认不写，可以获取其他BOM的对象
（1）提示框
调试代码的重要手段
1.alert() 警告框:显示带有一段消息和一个确认按钮的警告框
2.confirm() 确认框：显示带有一段消息以及确认按钮和取消按钮的对话框
点击确认返回值为 true，如果点击取消返回值为 false
3.prompt() 提示框：显示可提示用户输入的对话框
点击确认返回值为输入的值，如果点击取消返回值为 null
（2）打开另一个窗口
open() 打开一个新的浏览器窗口或查找一个已命名的窗口
window.open(URL,name,features,replace)
URL:声明了要在新窗口中显示的文档的 URL
name:声明了新窗口的名称
features:声明了新窗口要显示的标准浏览器的特征,如果省略该参数，新窗口将具有所有标准特征
replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目
（3）定时器
1.setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
var v = null;
function start(){
v = setInterval("document.getElementById('1').value = new Date()",1000);
}
2.clearInterval() 取消由 setInterval() 设置的 timeout
function stop(){
clearInterval(v);
}
3.clearTimeout() 取消由 setTimeout() 方法设置的 timeout
4.setTimeout() 在指定的毫秒数后调用函数或计算表达式
（二）Navigator
浏览器信息对象
遍历Navigator对象
for(var i in navigator){
console.debug(navigator[i]);
}
（三）Location
当前访问的网址的相关信息
1.host 设置或返回主机名和当前 URL 的端口号
console.debug(location.host);//127.0.0.1:8020
2.href 设置或返回完整的 URL
length.href = "http://www.baidu.com";//直接跳转到百度页面
（四）History
历史记录对象，用户在浏览器中访问过的URL
1.back() 加载 history 列表中的前一个 URL
<input type="button" id="" onclick="javascript:history.back();" value="上一步" />
2.forward() 加载 history 列表中的下一个 URL
<input type="button" id="" onclick="javascript:history.forward();" value="下一步" />
3.go() 加载 history 列表中的某个具体页面
//数字表示跳转几页，比如-1表示前一页，2表示后面2页
<input type="button" id="" onclick="javascript:history.go(-1);" value="go" />
二、DOM
BOM是Document Object Model的缩写，简称文档对象模型
节点
- 整个文档就是一个文档节点 Document
- 每一个HTML标签都是一个元素节点 Element
- 标签中的文字则是文本节点 Text
- 标签的属性是属性节点 Attribute
- 一切都是节点 Node
（一）Document对象
<input type="text" id="1" value="文本" class="ipt" name="名字"/>
<div id="div">
<span id="span1">span1</span>
<span id="span2">span2</span>
</div>
//domain 返回当前文档的域名
console.debug(document.domain);//127.0.0.1
//getElementById() 返回对拥有指定 id 的第一个对象的引用
var id = document.getElementById(1);
console.debug(id);//<input id="1" class="ipt" type="text" value="文本" name="名字">
//getElementsByName() 返回带有指定名称的对象集合
var n = document.getElementsByName("名字");
console.debug(n);//NodeList
console.debug(n[0]);//<input id="1" class="ipt" type="text" value="文本" name="名字">
//getElementsByClassName() 返回带有指定类名的对象集合
var c = document.getElementsByClassName("ipt");
console.debug(c);//HTMLCollection
console.debug(c[0]);//<input id="1" class="ipt" type="text" value="文本" name="名字">
//document.body：获取document标签的body元素
console.debug(document.body);
//document.body.clientWidth： 获取页面的宽度（body宽度）
console.debug(document.body.clientWidth); //1350
//document.body.clientHeight：获取body元素的高度，页面内容决定高度
console.debug(document.body.clientHeight);//44
//document.documentElement：获取文档元素
console.debug(document.documentElement);
//document.documentElement.clientWidth：获取文档元素的宽度（html宽度）
console.debug(document.documentElement.clientWidth); //1366
//document.documentElement.clientHeight：获取文档元素的高度（拉动控制台可以改变高度）
console.debug(document.documentElement.clientHeight); //248
（1）元素节点
//hasChildNodes() 判断该节点是否有子节点
var div = document.getElementById("div");
console.debug(div.hasChildNodes());//true
//拿到父节点
var span1 = document.getElementById("span1");
console.debug(span1.parentNode);//<div id="div">
//拿到下一个兄弟节点
console.debug(span1.nextSibling);//拿到了span2
//创建新的元素
var input = document.createElement("input")
//把input标签追加到div标签中
div.appendChild(input);
（2）属性节点
//getAttribute() 获取属性值
var ipt = document.getElementById(1);
var v = ipt.getAttribute("value");
console.debug(v);//文本
//setAttribute() 设置属性
var div = document.getElementById("div");
var c = div.setAttribute("class","d");
console.debug(div);//<div id="div" class="d">
//getAttributeNode() 获取指定名称的属性
var gan = ipt.getAttributeNode("id");
console.debug(gan);//拿到了属性节点
//attributes 一个元素的属性对象，返回NamedNodeMap
var map = ipt.attributes;
console.debug(map);//NamedNodeMap(5) [ type="text", id="1", value="文本", class="ipt", name="名字" ]
（3）文本节点
//replaceChild(newnode, oldnode) 从文档对象中获取替换旧的
var oldspan = document.getElementById("span2");
var newspan = document.createElement("span");
div.replaceChild(newspan,oldspan);
console.debug(div);
//innerText 设置或者获取标签中的纯文本
div.innerText="<input type ='text' value = 1>";
console.debug(div.innerText);//把之前的全部替换掉了，
//innerHTML 设置或者获取带有标签的元素
div.innerHTML="<input type ='text' value = 1>";
console.debug(div.innerHTML);
（二）Event对象
Event对象代表事件的状态，比如：事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态事件，通常
与函数结合使用
onabort用户终止页面加载。
onblur 用户离开对象。失去焦点
onchange 用户改变对象的值。
onclick 用户点击对象。
ondblclick 用户双击对象。
onfocus（和onblur相反） 用户激活对象。
onkeydown 按下键盘。
onkeypress 按压键盘。
onkeyup 松开盘。
onload 页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown 用户按鼠标按钮。
onmousemove 鼠标指针在对象上移动。
onmouseover 鼠标指针移动到对象上。
onmouseout 鼠标指针移出对象。
onmouseup 用户释放鼠标按钮。
onreset 用户重置表单。
onselect 用户选取页面上的内容。
onsubmit 用户提交表单。
onunload 用户关闭页面。
（1）第一种注册
直接在元素上绑定对应的方法
缺点：不能被移除，不能绑定多个
<div onmouseover="sopt1()" style="width: 50px;height: 50px;background-color:aquamarine;" id="div"></div>
function sopt1(){
var div = document.getElementById("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "darkorange";
}
（2）第二种注册
通过元素事件名称去动态绑定
缺点：不能绑定多个
<input type="button" value="点一下" onclick="sopt2();"/>
<div style="width: 50px;height: 50px;background-color:aquamarine;" id="div"></div>
function sopt2(){
var div = document.getElementById("div");
div.onclick = sopt1;
}
（3）第三种注册
可以绑定多个函数(参数1 事件名称;参数2 事件函数;参数3 事件冒泡,决定了事件的执行流程)
缺点：逻辑不是很清楚
<input type="button" value="点一下" onclick="sopt2();"/>
<div style="width: 50px;height: 50px;background-color:aquamarine;" id="div">
function sopt3(){
var div = document.getElementById("div");
div.addEventListener("click",s);
div.addEventListener("click",sopt1);
}
function s(){
alert("多种");
}
function sopt1(){
var div = document.getElementById("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "darkorange";
}
三、打字游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div{
width: 70px;
height: 70px;
background-color: powderblue;
text-align: center;/*水平居中*/
line-height: 70px;/*垂直居中*/
font-size: 40px;/*字体大小*/
font: bold;/*字体加粗*/
position: absolute;/*绝对定位*/
background-image: url(img/20180626234221_nmwjx.gif);/*字母块背景颜色*/
background-size:100% 100%;
background-repeat: no-repeat;
}
body{
background-color: pink;/*背景颜色*/
}
</style>
</head>
<body>
<input type="button" value="开始" onclick="startGame()" />
<input type="button" value="结束" onclick="stopGame()" /> <br />
<span id="score"><b><font size="6">0</font></b></span>分
</body>
</html>
<script type="text/javascript">
//使用数组管理已经生成的新的元素
var arr = new Array();
/*设置定时，不断的产生字母块*/
var starid;
var stopid;
function startGame(){
starid = setInterval(createEle,1000);
stopid = setInterval(moveEle,1000);
}
function stopGame(){
clearInterval(starid);
clearInterval(stopid);
}
/*随机生产字母块*/
function createEle() {
//得到一个div标签
var div = document.createElement("div")
//设置div样式
div.className="div"
//得到随机字母
var letter = String.fromCharCode(parseInt(Math.random()*26+65));
//把字母设置到div中
div.innerText = letter;
//设置div的距离最左边的距离
var left = parseInt(Math.random()*1001+200);
div.style.left=left+"px";
div.style.top="0px";
//将新元素添加到父节点中
document.body.appendChild(div);
//添加进数组，统一管理
arr.push(div);
}
/*让字符块移动*/
function moveEle(){
var heigth = document.documentElement.clientHeight;
for(var i in arr){
var div = arr[i];
var oldTop = parseInt(div.style.top);
if(oldTop <= heigth){//高度低于界面，添加字母
div.style.top=(oldTop+30)+"px";
}else{
//删除界面中的div
document.body.removeChild(div);
//删除数组中的div
arr.splice(i,1);
}
}
}
/*敲击键盘消除字母块并且统计分数*/
window.onkeydown=function(e){
var keyword = e.key.toLocaleUpperCase();//转换成大写
for(var i in arr){
//如果div文本信息与键盘敲击一样，删除body中的div再删除数组中的div并且统计分数
var div = arr[i];
if(div.innerText == keyword){
//先删除界面中的div
document.body.removeChild(div);
arr.splice(i,1);
//统计分数
var score = document.getElementById("score");
score.innerText = parseInt(score.innerText)+1;
//背景音乐
var audio= new Audio("img/雲雀.mp3");
audio.play();//播放
return;
}else{//打错扣分
var score = document.getElementById("score");
score.innerText = parseInt(score.innerText )-1;
return;
}
}
}
</script>
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
