BOM与DOM
一，BOM（Browser Object Model浏览器对象模型）
1.history对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面1</title>
</head>
<body><a href="page02.html">去下一个页面</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面2</title>
</head>
<body><a href="javascript:history.back()">返回上一个页面</a><a href="javascript:history.forward()">去下一个页面1</a><a href="page03.html">去下一个页面2</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面3</title>
</head>
<body><a href="javascript:history.go(-2)">返回第一个页面</a><a href="javascript:history.back()">返回上一个页面</a>
</body>
</html>2.location对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>location对象</title>
</head>
<body><a href="javascript:void(0)" onclick="showAdgress()">显示地址栏信息</a><a href="javascript:void(0)" onclick="refresh()">刷新页面</a><a href="javascript:void(0)" onclick="changepage()">替换新页面</a>
</body><script type="text/javascript">function showAdgress(){console.log(location.host)console.log(location.hostname)console.log(location.href)}function refresh(){location.reload();}function changepage(){location.replace("page01.html")}</script>
</html>3.document对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>document对象</title>
</head>
<body><div id="a" >a</div><div id="b" class="c">b</div><div class="c">c</div><div name="d">d</div>
</body><script type="text/javascript">let div=document.getElementById("a");console.log(div);console.log("=================");let divarr=document.getElementsByTagName("div");console.log(divarr);console.log("=================");let arr=document.getElementsByClassName("c");console.log(arr);console.log("=================");let namearr=document.getElementsByName("d");console.log(namearr)console.log("=================");</script>
</html>4.date对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>日期类</title>
</head>
<body></body>
<script type="text/javascript">let now=new Date();let year=now.getFullYear();let month=now.getMonth()+1;let date=now.getDate();let hour=now.getHours();let minute=now.getMinutes();let second=now.getSeconds();let time=year+"-"+fillzero(month,2)+"-"+fillzero(date,2)+" "+fillzero(hour,2)+":"+fillzero(minute,2)+":"+fillzero(second,2);console.log(time);function fillzero(num,targetlen){let str=num+"";if(str.length<targetlen){str="0"+str;}return str;}
</script>
</html>5.周期函数和延迟函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>周期函数和延迟函数</title>
</head>
<body>
<div id="time"></div>
</body>
<script type="text/javascript">function fillzero(num,targetlen){let str=num+"";if(str.length<targetlen){str="0"+str;}return str;}//写法1/*setInterval(function(){let now=new Date();let year=now.getFullYear();let month=now.getMonth()+1;let date=now.getDate();let hour=now.getHours();let minute=now.getMinutes();let second=now.getSeconds();let time=year+"-"+fillzero(month,2)+"-"+fillzero(date,2)+" "+fillzero(hour,2)+":"+fillzero(minute,2)+":"+fillzero(second,2);let div=document.getElementById("time");div.textContent=time;},1000);*///写法2let count=0;function showtime(){let now=new Date();let year=now.getFullYear();let month=now.getMonth()+1;let date=now.getDate();let hour=now.getHours();let minute=now.getMinutes();let second=now.getSeconds();let time=year+"-"+fillzero(month,2)+"-"+fillzero(date,2)+" "+fillzero(hour,2)+":"+fillzero(minute,2)+":"+fillzero(second,2);let div=document.getElementById("time");div.textContent=time;/*count++;if(count===3){clearInterval(T);}*/}//setInterval(showtime,1000);//写法3/*let T=setInterval('showtime()',1000)*/let ti=setTimeout(showtime,3000);//延迟执行函数clearTimeout(ti);
</script>
</html>二，DOM（Document Object Model文档对象模型）
1.节点和元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点</title>
</head>
<body><div id="box"><div><input type="text"></div><a href="javascript:void(0)">超链接1</a><a href="javascript:void(0)">超链接2</a><a href="javascript:void(0)">超链接3</a><a href="javascript:void(0)">超链接4</a><a href="javascript:void(0)">超链接5</a></div><a href="javascript:void(0)">超链接5</a>
</body>
<script type="text/javascript">let box=document.getElementById("box")/*//节点：enter键、注释都算节点console.log(box.parentNode);console.log(box.childNodes);console.log(box.firstChild);console.log(box.lastChild)console.log(box.firstChild.nextSibling);console.log(box.lastChild.previousSibling)*///元素console.log(box.parentElement);let child=box.children;console.log(child)console.log(box.firstElementChild.nextElementSibling)console.log(box.lastElementChild.previousElementSibling)</script>
</html>