BOM：Browser Object Model 浏览器对象模型
BOM思想就是把浏览器的各个组成部分，看做一个对象
BOM 由
window 视口对象 （常用）
location 地址栏对象 （常用）
history 历史记录对象 （常用）
screen 屏幕对象（了解）
navigator 整个浏览器对象（了解）
特点：BOM对象不能自己创建，当HTML文档加载进内存，浏览器自动创建。
属性:location history navigator screen 这些属性，可以获取其他BOM对象。
var loc=window.location;
var his=window.history;
var nav=window.navigator;
var sc=window.screen;
//获取整个文档对象
var doc=window.document;
//window中提供的 location history navigator screen 可以获取其他BOM对象。
//window对象可以省略不写
window.location.reload();
loc.reload();
window对象中的方法
关于弹框的方法
//window.alert("弹一个警告框");这里的window也可以不写 也就是一个警告框
//弹出一个确认取消框 返回true 表示确定，返回false表示取消
var f=window.confirm("你确定吗？");
if(f){
document.write(f);
}else{
document.write(f);
}
//弹出一个输入框，然后让用户输入内容，返回值就是用户输入的内容
var text=window.prompt("请输入你的电话号码");
document.write(text);
<script type="text/javascript">
function openBaidu(){
//alert("调用了");
if(confirm("你确定要进入吗")){//这里省略没有写window，判断一下是否要进入
//open（）打开一个窗口 返回的是新打开的窗口对象
var win=window.open("http://www.baidu.com");//win就是新打开的窗口
}
}
</script>
</head>
<body>
<!-- void()拦截跳界面 -->
<a href="http://www.baidu.com" target="_blank">进入百度</a>
<a href="javascript:void(openBaidu())">进入百度</a>
<script type="text/javascript">
function closeThis(){
//alert("调用了");
if(window.confirm("你确定要关闭吗")){
window.close();
}
}
function into(){
//返回的是新打开的窗口对象
baidu=window.open("http://www.baidu.com");
}
function gb(){
if(window.confirm("你确定要关闭百度的窗口吗？")){
/* window.close(); 这个是关闭当前的窗口 不是关闭的百度的窗口*/
baidu.close();
}
}
</script>
</head>
<body>
<a href="javascript:void(closeThis())">关闭本窗口</a><!-- //用函数来打开 -->
<a href="javascript:void(gb())">关闭新打开的窗口</a>
<a href="javascript:void(into())">打开百度</a>
</body>
<script type="text/javascript">
var i=1;
var show=function(){
console.log(i++)//打印在控制台
//alert("定时器执行了");
}
//延迟3秒执行一次函数
//设置，执行一次的定时器 返回值是定时器的id
//var timeID=window.setTimeout(show,3000);
//清除定时器 通过定时器的id来清除定时器。
//window.clearTimeout(timeID);
//设置循环定时器
var timeID=window.setInterval(show,1000);
//取消定时器
function quxiao(){
window.clearInterval(timeID);
}
</script>
</head>
<body>
<a href="javascript:void(quxiao())">取消定时器</a>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="time">2020-09-15 11:09:30</h1>
</body>
</html>
<script type="text/javascript">
var h1Obj = document.getElementById("time");
//var timeStr=new Date().toLocaleString();
function showTime() {
var timeStr = moment().format('YYYY-MM-DD HH:mm:ss');
h1Obj.innerText = timeStr;
}
showTime();
//alert(text);
window.setInterval(showTime, 1000);
</script>
<script type="text/javascript">
//地址栏对象，通过window 对象中的 location 属性可以获取到
//var loc=window.location;
//因为window对象，可以省略不写，所以我们可以简写
// host 设置或返回主机名和当前 URL 的端口号。 4 1 9
// hostname 设置或返回当前 URL 的主机名。 4 1 9
// href 设置或返回完整的 URL。 4 1 9
// pathname 设置或返回当前 URL 的路径部分。 4 1 9
// port 设置或返回当前 URL 的端口号。 4 1 9
// protocol 设置或返回当前 URL 的协议。 4 1 9
// search 设置或返回从问号 (?) 开始的 URL（查询部分）。
//获取地址栏当中的值
// var url=location.href;
// alert(url);
// alert(location.hostname);
// alert(location.pathname);
// alert(location.port);
//alert(location.protocol);
function into(){
//window.open("http://www.baidu.com");
//通过location对象中的href属性，来进行页面的跳转
location.href="http://www.baidu.com";
}
function flush(){
//重新加载页面
location.reload();
}
</script>
</head>
<body>
<a href="javascript:void(into())">进入百度</a>
<!-- ?后面的叫做请求参数 也就是把这个带到请求参数页面进行使用格式 username=zhangsan&password=123456 请求参数 -->
<a href="demo.html?username=zhangsan&password=123456">进入demo页面</a>
<a href="javascript:void(flush())">刷新页面</a>
</body>
<script type="text/javascript">
//获取上个页面跳转过来时，携带的请求参数
var v=location.search;
alert(v);
var text=v.replace("?","");
var t1=text.split("&");
alert(t1);
var arr1=t1[0].split("=");
alert(arr1[0]);
alert(arr1[1]);
var arr2=t1[1].split("=");
alert(arr2[0]);
alert(arr2[1]);
</script>
</head>
<body>
<h1>dome页面</h1>
</body>
history.back();后退页面
history.forward();前进页面，也就是下个页面；
history.go(-1);后退页面
history.go(1);前进页面
执行这里的方法，前提是要有浏览记录
DOM： Document Object Model 文档对象模型
DOM:思想：将HTML文档的各个组成部分，看做对象。
Element:标签对象
Comment:注释对象
Text:文本对象
Attribute:属性对象
Node:节点对象 页面上的 元素的通常为节点，这些节点会有父子兄弟关系（可以把标签，文本，注释，属性 都可以看做解决）
Document:整个HTML文档对象，那么这个Document对象，可以获取或创建其他的DOM对象
<!-- 当你要操作DOM时，这个上下顺序，有关系，所以你把script标签，就放到页面的最下面 确保DOM元素能够拿到 -->
<script type="text/javascript">
//文档对象,通过window对象中的document属性来获取
//var doc=window.document;
// 获取body标签对象，就要放在body标签下面。
var bd = document.body;
alert(bd);
//lastModified 获取文档的最后一次修改时间
document.write(document.lastModified)
//title 返回当前文档的标题。 4 1 9 Yes
//URL 返回当前文档的 URL。
window.document.title="我的网站";
alert(location.href);
alert(document.URL);//获取地址栏里面的内容
//write() 向文档写 HTML 表达式 或 JavaScript 代码。
window.document.write("<b>加粗效果</b>")
window.document.write("<br>")
window.document.writeln("<b>加粗效果</b>")//这个换行是不起作用的
window.document.writeln("<b>加粗效果</b>")
</script>
<body>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h1>asdfasdf </h1>
<h2 class="myclass">asdfasfd222222222</h2>
<h3 class="myclass">asdfasfd222222222</h3>
<h4 class="myclass">asdfasfd222222222</h4>
<h5 class="myclass">阿斯顿发斯蒂芬</h5>
<input type="text" name="username" id="" value="" />
<input type="password" name="password" id="" value="" />
<input type="checkbox" name="hobby" id="" value="aa" />aa
<input type="checkbox" name="hobby" id="" value="bb" />bb
<input type="checkbox" name="hobby" id="" value="cc" />cc
</body>
</html>
<script type="text/javascript">
//根据标签名，来获取所有的标签对象数组
var arr = document.getElementsByTagName("h1");
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.color="red";//偶数行 红色
}else{
arr[i].style.color="yellow";//奇数行 黄色
}
}
//根据标签的class属性值，来获取多个标签对象的数组
var arr2=document.getElementsByClassName("myclass");
arr2[0].style.background="magenta";
//针对input标签，有一个专门的方法，来获取input标签对象。
//注意返回的是个数组
var arr3=document.getElementsByName("username");
alert(arr3[0]);
var arr4=document.getElementsByName("hobby");
alert(arr4[0]);
alert(arr4[1]);
alert(arr4[2]);
</script>
<body>
<h1 id="myh">
<span id="">
aaaaaaaaa
</span>
</h1>
<h2 id="myh2"></h2>
</body>
</html>
<script type="text/javascript">
var v=document.getElementById("myh");
//获取标签之间的文本
var text=v.innerText;
//alert(text);
// innerHTML和 innerText 的区别？
//innerText 只是获取标签之间的文本，不会获取子标签
//innerHTML 获取该标签之间的子标签以及文本
var v2=document.getElementById("myh2");
//v2.innerText="22222222" 给标签设置文本
v2.innerHTML="<span style='color: red;'>333333333</span>";
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="aqua">
<h2 id="h">写死的h2标签</h2>
</body>
</html>
<script type="text/javascript">
//动态的创建dom元素
var h1=document.createElement("h1");
//获取body标签对象
var bd=document.body;
//appendChild(h1);给父标签对象，添加子标签对象
bd.appendChild(h1);//父标签.appendChild(子标签对象)
//创建文本对象
var text=document.createTextNode("这是一段文本");
h1.appendChild(text);
//创建注释对象
var comm=document.createComment("这是一行注释");
bd.appendChild(comm);
//创建属性对象
var attri=document.createAttribute("style");
//给属性对象设置值
attri.value="color:red;font-size:50px";
//把属性对象设置给h1标签
h1.setAttributeNode(attri);
//给标签直接设置属性的方法 参1：属性名 参数2：属性值
bd.setAttribute("bgcolor","yellow");
//删除标签对象：
var h=document.getElementById("h");
//自己把自己干掉。
//h.remove();
//站在父标签的角度，删除他里面的子元素
//bd.removeChild(h1);
//删除标签上的属性 根据属性名来删除这个标签上的属性
//bd.removeAttribute("bgcolor"); //传入的是个属性名。
//删除属性对象 传入的是属性对象
//h1.removeAttributeNode(attri);
//获取标签上属性的值
var value=bd.getAttribute("bgcolor");
alert(value);
//动态的创建dom元素
var h4=document.createElement("h4");
//替换子元素
//bd.replaceChild(h4,h);
var h5=document.createElement("h5");
//站在父标签的角度，给h1前面添加一个h5这个元素对象。
bd.insertBefore(h5,h1);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>啊啊啊啊</h1>
<h2>aaaaaaaaaa</h2>
<input type="text" name="username" id="uname" value="" />
</body>
</html>
<script type="text/javascript">
//标签对象.style.css属性名="值";
document.body.style.background="red";
//如果CSS属性名有-横杠拼接，把横杠去掉，横杠后面的第一个字母变大写。
var myH1=document.getElementsByTagName("h1")[0]
myH1.style.fontSize="50px";
myH1.style.fontFamily="楷体";
myH1.style.background="yellow";
myH1.align='center';
//给标签对象，设置Style属性方式2
var myH2=document.getElementsByTagName("h2")[0];
//标签对象.style.cssText="css内联样式代码"
myH2.style.cssText="font-size: 20px;background: green;font-family: 华文彩云;font-size: 50px;"
//给标签自带属性设置值:语法： 标签对象.自带属性名='值';
var uname=document.getElementById("uname");
uname.value="张三";
</script>
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
