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>