BOM
一、BOM介绍：
1、BOM（ Browser Object Model）---> 浏览器对象模型。
2、BOM 作用：主要提供了访问和操作浏览器各组件的方式。
二、window对象常用的方法
浏览器窗口对象是js中最大的对象,因此它可以省略不写。其他所有的对象，都是window的子对象
window.console.log('我是window下的对象的方法')
window.document.write('<h1>window</h1>')
window.alert('hello')
window.prompt('hello')
window.print()
window.close() 关闭浏览器窗口
window.confirm()
提示信息，带有确认和取消，没有输入框，介于alert和prompt中间的
window.open('https://www.jd.com', '_self')
打开一个窗口
参数1：表示打开窗口的地址
参数2：表示是否在新窗口打开
参数3：表示窗口样式，存在兼容问题，有些浏览器起作用，有些不起作用
定时器 setInterval
每隔一段时间程序会自动执行
- 语法：
-
setInterval(callback, 毫秒) -
clearInterval('定时器的序号')
-
- 注意点
- 1秒 === 1000毫秒
- 每一个定时器都会返回一个唯一的序号（定时器的id号，用于关闭定时器）
- 定时器的序号默认都是从1开始的，但是由于浏览器内置的插件或者咱们主动安装的一些插件的影响，导致开启定时器的序号有可能不是从1开始的
- 定时器累加问题: 当连续点击开起定时器按钮时，相当于一次性开启了很多个定时器，当你点击关闭按钮时关闭的是当前的定时器，之前的定时器是没有被关闭的，因此形成定时器累加问题
- 解决方案: 先清除，再开启
<button>开始</button> <button>结束</button> <script> var aBtn = document.getElementsByTagName('button') var timer = null var i =0 aBtn[0].onclick = function(){ // 先清除，再开启 clearInterval(timer) timer = setInterval(function(){ i += 1 console.log('值：', i) }, 1000) } aBtn[1].onclick = function(){ clearInterval(timer) } </script>
特别提醒：fn()有两层含义：表示函数调用 表示接收函数的返回值，当通过定时器调用函数时，需要给函数加引号，例如："fn()",此时定时器内部会默认去执行eval函数,如果不加引号，就是函数自己执行，只会执行一次。
延时器 setTimeout
只会执行一次，类似于生活的定时炸弹
- 语法
setTimeout(callback, 毫秒)clearTimeout('延时器的序号')
- 注意点
- 1秒 === 1000毫秒
- 每一个定时器都会返回一个唯一的序号（延时器的id号，用于关闭定时器）
- 延时器的序号默认都是从1开始的，但是由于浏览器内置的插件或者咱们主动安装的一些插件的影响，导致开启延时器的序号有可能不是从1开始的
var timer = null timer = setTimeout(function(){ console.log('炸了') }, 3000) clearTimeout(timer)
小广告
body{
background-color: black;
}
.hot{
width: 500px;
height: 300px;
background:url('pic.ong');
background-size: 100% 100%;
position: fixed;
bottom: 0;
right: 0;
opacity: 0;
transition: all 1s;
}
.hot span{
position: absolute;
width: 12px;
height: 12px;
background-color: #fff;
text-align: center;
font-size: 12px;
line-height: 12px;
cursor: pointer;
opacity: .2;
right: 0;
top: 0;
}
.hot marquee{
font-size: 20px;
color: red;
font-weight: 900;
margin-top: 50px;
}
<div class="hot" id="hot">
<span id="del">×</span>
<marquee>点击更多精彩....</marquee>
</div>
<script>
var hot = document.getElementById('hot')
var del = document.getElementById('del')
setTimeout(function(){
hot.style.opacity = 1
}, 3000)
del.onclick = function(){
hot.style.opacity = 0
}
</script>
三、location地址栏对象
地址栏对象，对地址栏的操作一些方法
location.href
location.pathname
location.protocol: 获取协议
location.port: 获取端口号
location.hash: hash表示哈希值 例如：#pic1
reload([true])：刷新网页
location.search: search 拿到查询字符串 username=zhanhgsan&password=123
meta表示源信息：专门用来配置网页头部信息的
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta表示元信息：专门用来配置网页头部信息的 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 表示刷新页面，和几秒后跳转到某个网页 -->
<!-- <meta http-equiv = 'refresh' content = '5;url=http://www.sina.com.cn' /> -->
<meta name="description"
content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
<title>Document</title>
</head>
</html>
四、history对象
历史记录对象，可以对浏览器的历史记录进行相关的操作
1、back（） 后退
2、forward（） 前进
3、go（）
4、history.back（）=== history.go（-1） 浏览器中的 后退
5、history.forward() === history.go ( 1 ) 浏览器中的 前进
<h1>我是主页面</h1>
<a href="./pages/first.html">Go first</a>
<button>去第一个页面</button>
<script>
var aBtn = document.getElementsByTagName('button')
aBtn[0].onclick = function(){
// 前进
// history.forward()
history.go(1)
}
</script>
./pages/first.html
<h1>我是第一个页面，但是我不是主页面</h1>
<a href="./two.html">最后一个页面</a>
<button>返回</button>
<script>
var aBtn = document.getElementsByTagName('button')
aBtn[0].onclick = function(){
// 返回
// history.back()
history.go(-1)
}
</script>
./two.html
<h1>我是第二个页面，也不是主页面</h1>
<button>返回1</button>
<button>返回2</button>
<script>
var aBtn = document.getElementsByTagName('button')
aBtn[0].onclick = function(){
history.go(-1)
}
aBtn[1].onclick = function(){
history.go(-2)
}
</script>
五、screen屏幕对象
屏幕对象，可以获取屏幕相关的信息
console.log(screen.width)
// 不包括任务栏
console.log(screen.availWidth)
console.log(screen.height)
// 不包括任务栏
console.log(screen.availHeight)
六、navigator对象
navigator对象：指的是浏览器软件信息
浏览器软件对象，主要用来判断用户用的是什么浏览器，可以解决兼容性问题
1、appName：浏览器软件名称 appCodeName 浏览器软件名称现在没有多大参考意义了
2、appVersion：浏览器软件的核心版本号。
3、platform：平台
4、userAgent浏览器版本信息（记住）
七、window对象事件
window.onload
当网页加载完成，指标记的所有内容全部加载完成，才触发该事件(条件)
onscroll滚动事件
当网页的滚动条滚动的时候触发这个事件
- scrolltop 垂直滚动条滚动的距离
- scrollleft 水平滚动条滚动的距离
- window.innerHeight - 浏览器窗口的可见高度
- window.innerWidth - 浏览器窗口的可见宽度
兼容写法： var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;
onscroll = function(){
// 滚动距离
// 正常的获取，但是在没有声明文档类型的时候是获取不到的
// console.log(document.documentElement.scrollTop)
// 只有在没有声明文档类型的时候才能获得到
// console.log(document.body.scrollTop)
// 短路运算符 ||
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
}
吸顶效果
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background-color: hotpink;
}
nav{
width: 100%;
height: 80px;
background-color: #ccc;
}
main{
width: 100%;
height: 2000px;
background-color: yellow;
}
.fd{
position: fixed;
top: 0;
}
<header>网页头部区域</header>
<nav>网页导航区域</nav>
<main>主要内容区域</main>
<script>
var nav = document.getElementsByTagName('nav')[0]
onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 表示横向的滚动条
// var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
if(scrollTop>=100){
// 吸顶，给元素设置固定定位
// nav.style.position = 'fixed'
// nav.style.top = '0'
// className 通过这个属性添加一个类名
nav.className = 'fd'
}else{
// 取消吸顶
// nav.style.position = ''
nav.className = ''
}
}
</script>
onresize 窗口事件
当浏览器的窗口大小发生改变的时候触发这个事件
var box = document.getElementsByTagName('div')[0]
onresize = function(){
// console.log(window.innerWidth)
// console.log(window.innerHeight)
// if(window.innerWidth <= 750){
// console.log('你进入移动端了')
// box.style.width = '50%'
// box.style.backgroundColor = 'hotpink'
// }
if(window.innerWidth <= 1024){
document.documentElement.style.fontSize = '80px'
}else if(window.innerWidth <= 750){
document.documentElement.style.fontSize = '50px'
}
}
</script>
侧边栏效果
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background-color: hotpink;
}
main{
width: 100%;
height: 2000px;
background-color: yellow;
}
aside{
width: 150px;
height: 300px;
background-color: yellowgreen;
position: fixed;
right: 0;
top: 200px;
opacity: 0;
transition: all 1s;
}
.sy{
opacity: 1;
}
<div class="header">网页头部区域</div>
<main>内容区域</main>
<aside>侧边栏</aside>
<script>
var aside = document.getElementsByTagName('aside')[0]
onscroll = function(){
var scrollTop = document.documentElement.scrollTop
if(scrollTop >= 200){
aside.className = 'sy'
}else{
aside.className = ''
}
}
</script>
document
文档对象，代表一个网页
DOM
一、DOM对象介绍
1、DOM Document Object Model，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
2、DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。
3、DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。
二、DOM的分类
1、核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
2、HTML DOM：针对HTML文档提供的专用的属性方法。
3、XML DOM：针对XML文档提供的专用的属性和方法。(了解)
4、CSS DOM：提供了操作CSS的属性和方法。
5、Event DOM：事件对象模型。如：onclick、 onload等。（讲事件时再说）
DOM 详细
document 表示的是文档、网页 详讲
<!DOCTYPE html>
element元素节点
<html lang="en">
<head>
attribute属性节点 lang、charset、name、content
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
comment注释节点
text文本节点（最底层的）在网页中的文字、空格、换行
<div class="box" id="box">
<p>hello，我是p标记，我看看王成有没有好好学习！</p>
<!-- 哈哈、呵呵、嘻嘻、嘤嘤 -->
<h1>我是崔傑瑜，我可以督促王成学习</h1>
<span>潘子和强子</span>
</div>
<script>
// console.log(document)
var box = document.getElementById('box')
注意点： 以下的操作里面获取到的节点包含所有类型的节点（element、comment、text、attribute...）
// 访问第一个节点
// console.log(box.firstChild)
// 访问最后一个节点
// console.log(box.lastChild)
// 访问所有的节点，结果是一个伪数组
// console.log(box.childNodes)
// console.log(box.childNodes[1])
// console.log(box.childNodes[2])
// console.log(box.childNodes[3])
- nodeName 节点名称，元素节点的名称返回的是大写的字母（重点）
- nodeType 节点类型，都是以一个数字的形式返回，表示某个节点类型
- nodeValue 节点的值，并不是所有的节点都能返回一个值，有些有，有些没有
console.log(box.childNodes[0].nodeName)
console.log(box.childNodes[0].nodeType) // 3 text
console.log(box.childNodes[0].nodeValue)
console.log(box.childNodes[1].nodeName) // P
console.log(box.childNodes[1].nodeType) // 1 element
console.log(box.childNodes[1].nodeValue)
console.log(box.childNodes[3].nodeName) // comment
console.log(box.childNodes[3].nodeType) // 8 comment
console.log(box.childNodes[3].nodeValue) // 哈哈、呵呵、嘻嘻、嘤嘤
</script>
</body>
</html>
访问第一个元素节点
console.log(box.firstElementChild)
访问最后一个元素节点
console.log(box.lastElementChild)
访问所有的子元素节点，结果是一个伪数组
console.log(box.children)
console.log(box.children[0])
console.log(box.children[1])
获取兄弟元素
获取上一个兄弟元素节点
console.log(h1.previousElementSibling)
获取下一个兄弟元素节点
console.log(h1.nextElementSibling)
通过子元素获取父元素
console.log(h1.parentElement)
console.log(h1.parentNode)
- parentElement 结果是一样的，语义化上的区别。专门获取元素节点的父节点
- parentNode 结果是一样的，语义化上的区别。可以获取到所有节点的父节点（目前只有元素节点才有父节点）
Attribute
-
设置属性节点
pic.setAttribute('width', '50')- 注意点：设置属性的时候，必须是这个标记自身支持的html属性
box.setAttribute('style', 'width:200px;height:200px;background-color:hotpink;')
-
获取属性：获取到的是属性值
console.log(pic.getAttribute('width'))- 获取到的是整个属性节点
console.log(pic.getAttributeNode('width'))- 通过属性节点，再获取属性值
console.log(pic.getAttributeNode('width').nodeValue)-
```js console.log(pic.getAttributeNode('width').nodeName) // width console.log(pic.getAttributeNode('width').nodeType) // 2 attribute console.log(pic.getAttributeNode('width').nodeValue) // 50 ``` - 删除属性节点:
pic.removeAttribute('width')
