您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript学习笔记-DOM加载
发布时间：2018-04-05 18:26:03编辑：雪饮阅读（）
DOM加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*
//传统dom加载是在dom树出来后还要加载每个节点引入的外部资源，然后才能操作该节点
window.onload=function(){
var box=document.getElementById("box");
alert(box.innerHTML);
}
*/
//现代dom加载是当dom树结构出来后就立马可以操作了
document.addEventListener("DOMContentLoaded",function(){
var box=document.getElementById("box");
alert(box.innerHTML);
},false);
</script>
<title> dom加载</title> </head>
<body>
<div id="box">
<iframe src="http://www.xynes.cn/" width="509" height="428"></iframe>
<img src="https://xkws.xynes.cn/Public/images/channelLogo/1521106601.jpg" />
</div>
</body>
</html>
匿名函数绑定的移除
一般如果我们给一个元素绑定了函数，若是有名称则移除的时候可以通过函数名来移除，若是匿名则无法直接移除
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雪饮个人博客</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
box.addEventListener('click',function(){
alert("被点中了");
box.removeEventListener('click',arguments.callee,false);
},false);
}
</script>
<button id="box">只能点我一次</button>
</body>
</html>
通过setInterval实时获取dom加载状态
状态为complete则表示加载完毕，在某些浏览器上setInterval若没有第二个参数（毫秒数）会自动添加上毫秒数，为了保障最好都自己加上毫秒数。
<script type="text/javascript">
var timer=null;
timer=setInterval(function(){
try{console.log(document.readyState);}
catch(e){console.log(e);}
},10);
</script>
关键字词：javascript,dom