BOM(window)和Dom
一、 BOM
1、 BOM介绍
-
JavaScript 由三大部分组成
ES:语法标准,函数,对象。
BOM:borwser object model 浏览器对象模型 操作浏览器部分功能的
DOM:docment object model 文档对象类型, 操作网页上的元素。 -
常见的BOM对象:
1.window 代表整个浏览器窗口,window对象是BOM中的顶级对象。
2.Navigator 表示浏览器的一些信息。
3.Location 表示浏览器当前的地址信息。
4.History 浏览器的历史记录信息。
5.Screen 表示用户的屏幕信息。
2、 window对象
1.是JavaScript中的顶级对象。
2.全局变量,自定义函数都属于window的属性或方法。
3.我们在使用window对象下的属性或方法时,可以省略window.
window对象的常用方法:
(1)弹出系统对话框。
(1) alert();弹出框
(2) prompt();弹出输入框
(3) confirm();弹出确认对话框
<script>
var flag = confirm("请确认");
if (flag) {
alert("您点击了确认");
} else {
alert("您点击了取消");
}
</script>
(2)打开新窗口window.open
- window.open(“url,target,param”);
window.open(“地址”);—打开新窗口
url :要打开的地址
target:新窗口的位置。 _blank,_self,_parent(父框架下)
param:新窗口的一些设置。
name:新窗口的名字,可以为空
【注意】name需要写在target前面。
返回值:新窗口的句柄。
(3)关闭窗口
- window.close(“地址”);—关闭当前窗口
open返回值.close(); 关闭新窗口
例如:
newOpen = window.open(“地址”);
newOpen.close(“地址”);----关闭新窗口
【注意】地址中可以设置:要打开的新网页的网址url,网址名称,宽、高、行、列、是否可以滚动。
<title>Document</title>
<script>
var newOpen = null;
function func() {
// url,name,宽、高、位置(left、top),
newOpen = window.open("https://www.baidu.com", "baidu",
"width=400,height=400,top=200,left=300,scrollbars = yes");
}
function closeWindows() {
//关闭打开的新窗口
newOpen.close();
//关闭当前窗口
// window.close();
}
</script>
</head>
<body>
<button onclick="func()">打开新窗口</button>
<button onclick="closeWindows()">关闭窗口</button>
</body>
3、 代码在线编辑器
<title>Document</title>
<script>
// 法一:会打开一个新的窗口。
function windowHandle() {
// window.open()表示打开一个新的窗口
var opener = window.open();
// 如果是获取html中的内容,用document.getElementById("code").innerHTML
// 如果是获取html中需要用户输入的内容,用document.getElementById("code").value
var code = document.getElementById("code").value;
//在打开的新页面输出用户输入的内容
opener.document.write(code);
}
// 法二:会在当前页面打开窗口(不用记)
// function windowHandle() {
// var code = document.getElementById("code").value;
// document.write(code);
// }
</script>
</head>
<body>
<textarea id="code" cols="30" rows="10"></textarea>
<button onclick="windowHandle()">运行</button>
</body>
4、 location
https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
(1) http https 传输协议
(2) www.baidu.com 域名
(3) ?fr=aladdin 查询字符
(4) #2_1 hash(锚点定位)
- location对象:
里面存储了和网页地址所有内容有关的信息。 - 属性:href、search
(1)属性 href
href:地址信息。
跳转页面:location.href = “XXX”;
<script>
// (1)location.href="地址(网络地址或文件地址)";-----跳转页面
//2s后跳转到小米页面
window.onload = function() {
setInterval(href2, 2000);
}
function href2() {
location.href = "https://www.mi.com/";
}
</script>
<script>
//(2)console.log(location.href);--------在控制台上输出本html文档的本地文件地址。
console.log(location.href);
</script>
(2)属性 search
- split(分割字符串)
返回值:分割好的字符串组成的数组: 苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐] - search:查询字符串 一般是用于传输数据,需要进行解析。
解析查询字符
1.""
2.?name=zhangsan&age=18
步骤:
1.需要准备一个函数进行解析,这个函数还需要一个参数。
参数:要解析的字符串
2.开始解析
(2.1)判断如果为空字符串,直接返回 空对象。
(2.2)如果不是空字符串,解析字符串,并将结果放入对象中。
(1)截取掉第一个字符。
(2)剩余字符按照&进行分割,得到一个数组。
(3)遍历数组,得到 “属性名=属性值”这样格式的字符串。
(4)对每一个字符串,按照=分割,得到一个属性和属性值组成的数组。
(5)将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
(6)返回对象。 - 方法:
assign():改变浏览器地址栏中的地址,并记录到历史中。
【注意】设置location.href 就会调用assign方法。
replace() 替换浏览器地址栏中的地址。
reload() 重新加载 F5
reload(true) 强制加载,不适用缓存。
//运行之后,在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18
//解析字符串第一步:删除第一个元素?
<script>
window.onload = function() {
console.log(location.search);
var objj = resolverSearch(location.search);
console.log(objj);
// ?name=zhangsan&age=18 (字符串)
function resolverSearch(search) {
// 生成空的对象。
var obj = {};
if (search) {
//步骤1:删除第一个元素?
var obj = search.slice(1);
}
return obj;
}
}
</script>
运行之后,在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18 ,刷新。
控制台上会输出1、粘贴的字符串。2、删除带第一个元素?之后的字符串。
//运行之后,在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18
//解析字符串第二步:剩余的字符串从&隔开
<script>
window.onload = function() {
console.log(location.search);
var objj = resolverSearch(location.search);
console.log(objj);
// ?name=zhangsan&age=18 (字符串)
function resolverSearch(search) {
// 生成空的对象。
var obj = {};
if (search) {
//步骤1:删除第一个元素?
var obj = search.slice(1);
//步骤2:剩余的字符串从&隔开
obj = search.slice(1).split("&");
}
return obj;
}
}
</script>
输出结果:
//运行之后,在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18
//解析字符串第三步:(代码全) 遍历数组中元素、使数组中的元素从=隔开、获取对象obj的元素
<script>
window.onload = function() {
console.log(location.search);
var objj = resolverSearch(location.search);
console.log(objj);
alert(objj.name);
alert(objj.age);
// ?name=zhangsan&age=18 (字符串)
function resolverSearch(search) {
// 生成空的对象。
var obj = {};
if (search) {
//步骤1:删除第一个元素?
//步骤2:剩余的字符串从&隔开
var temp = search.slice(1).split("&");
//步骤3:(1)遍历数组中元素
for (var key in temp) {
//步骤3:(2)使数组中的元素从=隔开,如["name=zhangsan" ,"age=18"]
var t = temp[key].split("=");
//t=["name","zhangsan"]
//t=["age","18"]
//步骤3:(2)获取对象obj的元素:对于t=["name","zhangsan"],
//则t[0]=="name",t[1]=="zhangsan",即"name"="zhangsan"
obj[t[0]] = t[1];
}
}
return obj;
}
}
</script>
输出结果:
5、navigator
navigator:获取浏览器客户端的一些信息。
<script>
console.log(navigator.userAgent);
console.log(navigator.appName);
console.log(navigator.platform);
</script>
6、 history
history:保存当前窗口的历史记录 ,里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录
-
1.属性:
length:返回历史记录的条数。
语法:history.length; -
2.方法:
(1) back():语法:history.back(); 作用:类似浏览器上面的后退键,回退到上一条历史记录中。
(2) forward():
语法:history.forward(); 作用:类似浏览器上面的前进键,前进到下一条历史记录中。
(3) go(n):
语法:history.go(n); n表示整数 正整数:表示前进 0:刷新当前页面 负整数:表示后退 作用:跳转n条历史记录。
<title>Document</title>
<script>
window.onload = function() {
// 前进
btn.onclick = function() {
history.forward();
}
hlen.onclick = function() {
alert(history.length);
}
gobtn.onclick = function() {
history.go(2);
}
}
</script>
</head>
<body>
<h1>我是a页面</h1>
<a href="b.html">跳转到b页面</a>
<button id="btn">前进</button>
<button id="hlen">历史记录条数</button>
<button id="gobtn">go</button>
</body>
<title>Document</title>
<script>
window.onload = function() {
// 前进
btn2.onclick = function() {
history.forward();
}
// 后退
btn.onclick = function() {
history.back();
}
hlen.onclick = function() {
alert(history.length);
}
gobtn.onclick = function() {
history.go(-1);
}
}
</script>
</head>
<body>
<h1>我是b页面</h1>
<a href="c.html">跳转到c页面</a>
<button id="btn">后退</button>
<button id="btn2">前进</button>
<button id="hlen">历史记录条数</button>
<button id="gobtn">go</button>
</body>
<title>Document</title>
<script>
window.onload = function() {
// 后退
btn.onclick = function() {
history.back();
}
hlen.onclick = function() {
alert(history.length);
}
}
</script>
</head>
<body>
<h1>我是c页面</h1>
<button id="btn">后退</button>
<button id="hlen">历史记录条数</button>
</body>
7、 浏览器卷曲的高宽
当页面的宽或高比较大时,会出现滚动条,一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的部分叫做:卷去的高度
左边隐藏的部分,叫做:卷去的宽度。
(1)获取卷去的高度/宽度 使用时页面中必须要有DOCTYPE标签。
document.documentElement.scrollTop
document.documentElement.scrollLeft
(2)获取卷去的高度或宽度,使用时,页面中没有DOCTYPE标签。
document.body.scrollTop
document.body.scrollLeft
(3) 兼容写法:
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
<title>Document</title>
<style>
body {
width: 3000px;
height: 2000px;
}
</style>
<script>
window.onload = function() {
// 方法一
// 卷去的高度
console.log(document.documentElement.scrollTop);
// 卷去的宽度
console.log(document.documentElement.scrollLeft);
//方法二
// 卷去的高度
// console.log(document.body.scrollTop);
// 卷去的宽度
// console.log(document.body.scrollLeft);
// 方法三 兼容写法
// 卷去的高度
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
}
</script>
//点F12,滑动横向和纵向滚动条,刷新页面。控制台上会输出卷去的高度和宽度。
8、浏览器滚动
可以通过js代码来指定浏览器滚动到什么位置上。
- 第一种方式:
格式:window.scroll(横坐标,纵坐标);
【注意】不需要书写单位,瞬间定位。
<script>
// 方式一
window.onload = function() {
btn.onclick = function() {
window.scroll(200, 600);
}
}
</script>
- 第二种方式:
格式: window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式,默认为 auto 瞬间定位,可以设置为smooth 平滑过渡。
<script>
// 方式二
window.onload = function() {
btn.onclick = function() {
window.scroll({
top: 600,
// left:200,
behavior: "smooth",
})
}
}
</script>
- 示例:
<title>Document</title>
<style>
body {
width: 3000px;
}
</style>
<script>
// 方式一
// window.onload = function() {
// btn.onclick = function() {
// window.scroll(200, 600);
// }
// }
// 方式二
window.onload = function() {
btn.onclick = function() {
window.scroll({
top: 600,
// left:200,
behavior: "smooth",
})
}
}
</script>
</head>
<body>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>三十功名尘与土,八千里路云和月</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="btn">滚动</button>
</body>
9、自定义滚动的速度
<script>
var timer = null;
window.onload = function() {
btn.onclick = function() {
// 设置一个定时器,让页面往上滚动
timer = setInterval(function() {
// 每次减少20px;
document.documentElement.scrollTop -= 20;
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 50);
}
}
// 记录上一次的位置
var st = 0;
// 当用户向相反的方向滚动页面,计时器应该停止。
// 当页面滚动时,执行。
window.onscroll = function() {
// 一旦本次滚动时得到的高度比上一次滚动时得到的高度要大时,说明反方向移动,应该停止计时器.
if (st < document.documentElement.scrollTop) {
clearInterval(timer);
}
st = document.documentElement.scrollTop;
}
</script>
二、DOM
1、DOM介绍
dom:docment object model 文档对象模型
DOM 都是由节点组成的。
-
节点可以分为三大类:
元素节点:html标签
文本节点 :标签中的文字(空格,换行)
属性节点: 标签的属性 -
学习dom,就是学习对节点的操作
修改:修改DOM节点的内容。
遍历:遍历DOM节点下的子节点,方便下一步操作。
添加:在DOM节点下添加一个子节点。
删除:将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。 -
DOM可以做什么:
1.找对象(元素节点)
2.设置元素节点的属性值
3.动态删除和创建节点。
4.事件的响应触发
<title>Document</title>
<script>
window.onload = function(){
//获取html文档中的第一个h1标签
var h1 = document.getElementsByTagName("h1")[0];
console.log(h1);
//动态给h1标签添加id
h1.id="h1";
//给h1标签添加点击事件
h1.onclick = function(){
alert("你点了我一下");
}
}
</script>
</head>
<body>
<h1>我是一级标题</h1>
<a href="history/a.html">123</a>
</body>
2、获取节点的方式
1.getElementById()
格式:node.getElementById(“ID”)
功能:从node节点开始,通过ID查找节点。
2.getElementsByTagName()
通过标签名查找节点
格式:node.getElementsByTagName(“标签名”);
3.getElementsByClassName
通过类名去查找节点
格式:node.getElementsByClassName(“类名”);
4.getElementsByName()
通过name属性值去获取节点
最常用在 表单元素中。
--------------------------------------------------
低版本的IE不支持。
5.querySelector()
格式:node.querySelector(css选择器)
返回值:
如果找到选择器匹配的元素,则返回第一个元素。
如果没找到,则返回null
6.querySelectorAll()
格式:node.querySelectorAll(css选择器)
返回值:
如果找到选择器匹配的元素,则返回全部。
如果没找到,则返回null
- nodelist 伪数组 常规的数组方法对伪数组是无效的 length 【下标】
【注意】
直接获取节点时,都可以使用。
嵌套获取节点时,不能使用getElementById()、不能使用getElementsByName(),
<title>Document</title>
<script>
window.onload = function() {
//一、获取最外层div
//1、通过Id
// var box2 = document.getElementById("box1");
//2、通过类名
// var box2 = document.getElementsByClassName("box2")[0];
//3、通过标签名
// var box2 = document.getElementsByTagName("div")[0];
// console.log(box2);
//二、直接获取h1
// 1、通过Id(唯一)
// var h1 = document.getElementById("h1");
//2、通过标签名(下标)
// var h1 = document.getElementsByTagName("h1")[0];
//3、通过类名(下标)
// var h1 = document.getElementsByClassName("title")[0];
//4、通过选择器(下标)
// var h1 = document.querySelector(".title");
//5、通过name属性(下标)
var h1 = document.getElementsByName("hh")[0];
console.log(h1);
//三、嵌套获取h1
// var box2 = document.getElementById("box1");
//1、通过标签名嵌套获取
// var h1 = box2.getElementsByTagName("h1")[0];
//2、通过类名嵌套获取
// var h1 = box2.getElementsByClassName("title")[0];
//3、通过.title选择器嵌套获取
// var h1 = box2.querySelector(".title");
// console.log(h1);
//【注意】不能嵌套Id,不能嵌套name属性获取,错误写法
// var h1 = box2.getElementById("h1");
//var h1 = box2.getElementsByName("hh")[0];
}
</script>
<body>
<div id="box1" class="box2">
<h1 id="h1" class="title" name="hh">h1标题</h1>
</div>
</body>