BOM的screen对象、BOM的总结、JavaScript组成、DOM、通过document对象来操作html页面中的元素、document对象的属性、Element对象的属性和、标签的属元素的样式

m-TT

已于 2022-10-30 17:22:08 修改

阅读量513

点赞数 3

分类专栏： js 文章标签：前端 javascript html

于 2022-10-29 20:30:21 首次发布

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127591314

版权

一.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(&

最低0.47元/天解锁文章

m-TT

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM的screen对象、BOM的总结、JavaScript组成、DOM、通过document对象来操作html页面中的元素、document对象的属性、Element对象的属性和、标签的属元素的样式

BOM的screen对象、BOM的总结、JavaScript组成、DOM、通过document对象来操作html页面中的元素、document对象的属性、Element对象的属性和、标签的属元素的样式
复制链接

扫一扫

专栏目录