一.BOM的screen对象:返回当前窗口与屏幕相关的信息
1.属性:
(1)width/height:屏幕的宽度和高度
<script>
console.log('当前窗口屏幕宽度',screen.width)
console.log('当前窗口屏幕高度',screen.height)
</script>
(2)availWidth/availHeight:浏览器在屏幕中水平/垂直空间
<script>
console.log('浏览器在屏幕中水平空间',screen.availWidth)
console.log('浏览器在屏幕中垂直空间',screen.availHeight)
</script>
(3)colorDepth:屏幕颜色深度
<script>
console.log('屏幕颜色深度',screen.colorDepth)
</script>
(4)pixelDepth:色彩深度
<script>
console.log('色彩深度',screen.pixelDepth)
</script>
二.BOM的总结
1.浏览器对象模型:Browser Object Model
2.作用:提供了对浏览器进行操作的方法、属性
3.核心对象:window对象(重点)
4.其他对象:document、location、history、navigator、screen(既可以作为BOM对象独立使用,也可以作为window对象的属性使用)
三.JavaScript
1.ECMAScript:JavaScript的语法标准---ECMAScript5.0(简称ES5)、ECMAScript2015(简称ES6)
2.BOM:浏览器对象模型
3.DOM:文档对象模型
四.DOM
1.什么是DOM?
Document Object Model:文档对象模型
2.DOM的核心:document对象
3.DOM的作用:可以访问和操作XML和HTML文档中标签、属性、节点的属性和方法
4.在DOM中将整个HTML文档看作是一个倒立的树(树状结构):一个html页面就是一个DOM对象,是一颗DOM HTML树
(1)DOM HTML的根节点:html
(2)元素(Element):html文档中的标签
(3)节点(Node):html文档中的内容
5.DOM树中节点的分类:
(1)标签节点:所有的标签
(2)属性节点:标签的属性---内置属性、自定义属性
(3)文本节点:标签中的文本、换行、空格等
(4)注释节点:<!-- 注释内容
6.基本概念
(1)根节点:html,有且只能有一个
(2)子节点:某个节点的下一级节点
(3)父节点:某个节点的上一级节点
(4)兄弟节点:拥有相同父节点的节点
<body>
<div id="box"></div>
<script>
let div = document.getElementById('box')
console.log(div)
console.log(div.__proto__)//__proto__:表示元素的原型
</script>
</body>
五.通过document对象来操作html页面中的元素
1.getElementById('id值'):通过标签的id属性来获取标签
2.getElementsByName('name值'):通过标签的name属性来获取标签,返回值的是NodeList
3.getElementsByTagName('标签名'):通过标签名获取标签,返回值的类型是HTMLCollection
4.getElementsByClassName('class值'):通过标签的class值来获取标签,返回的类型是HTMLCollection
5.querySelector('#id值/.class值/标签名'):
#id值:返回一个指定id属性值的标签
.class值:返回第一个指定class属性值的标签
标签名:返回第一个指定标签名的标签
6.querySelectorAll(&