1、BOM
window为BOM的顶级对象,其顶级对象下的document和evet在
HTML中经常用到
window对象常用的属性和方法:
三个弹出框:
alert("内容") :弹出框
confirm(“提示信息”) :确认框 确定返回ture,取消返回false
prompt(“提示信息”,“默认值”):输入框 返回数值为字符串
两个定时器:
setInterval(执行任务,间隔时间): 连续执行定时器
clearInterval()为取消定时器
setTimeout(执行任务,间隔时间):用法同上只执行一次
clearTimeout()取消定时器
案例:延迟关闭
<style>
#box{width:200px;height:200px;
backgroundColor: red}
</style>
<body>
<input type="text" value="开始" id="begin">
<input type="text value="结束" id=“end”>
<div id="box"></div>
</body>
<script>
var a=document.getElementById("box");
var b=document.getElementById("begin");
var c=document.getElementById("end");
var t=null;//注意全局变量定时器的作用域;
b.onclick=function(){
t=setTimeout((funtion){
a.style.display="none";
},3000)};
c.onclick=function(){
clearTimeout(t)}
</script>
几种重要选择器
getElementById():返回对有指定id的第一个对象的引用
getElementsByName():返回带有指定名称的对象集合。
getElemntsByTagName():返回带有指定标签名的对象集合
getElementsByClassName():通过类名返回
querySelector() 通过选择器
DOM
文档对象模型:
根据层次关系访问节点:(包括文本和元素)
parentNode:返回节点的父节点
childNodes:返回子节点集合,数组名[i]访问子节点
firstChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild:返回节点的最后一个子节点
nextSibling:下个节点
previousSibling :上一个节点
根据层级关系访问元素节点
firstElementChild:获取第一个给元素节点
lastElementChild:获取最后一个元素节点
nextElementSibling: 下一个元素节点
previousElementSibling:上一个元素节点
判断节点类型
nodeType:
eg:
<p id="_p">123<p>;
var p=document.getElementById("_p");
//元素类型
document.write(p.nodeType) //值为1;
//文本类型
document.write(p.firstChild.nodeType)//值为3
//属性节点
document.wrtie(p.getAttributeNode("id").nodeType)// 2
节点的操作
创建节点: 先创建在链接
var op=document.creatElement("op")
op.innerHTML="床前明月光";
链接:document.body.appendChild(op);
var oop=document.creatElement("oop");
链接:document.body.appendChild(oop);
删除节点
节点.remove(无参) 直接删除 以后这个用的跟多一些
eg:list.lastElement.remove()