JavaScript 认识DOM和BOM
前端 JavaScript DOM 和 BOM 学习目录
4. DOM attribute property style属性 className属性 classList属性 Data
-
首先我们前面的那些只是我们的前端
JavaScript中的学习部分——ECMAScript,这个是属于JavaScript本身的 -
但是如果真真的想要实现我们的前端开发，这个时候就需要学习我们的操作
网页的 DOM, 和操作浏览器的 BOM- 只要了解过历史的都知道，我们的 JavaScript 就是实现的是我们的操作的网页的一种脚本语言
- 但是只不过我们的 JavaScript 是可以实现我们的 前端开发的，以及node的后端开发的
- 前端的原生开发就是实现的是使用一些 API
(application programming interface) 应用程序编程接口 - 然后这些接口的话，就是通过的我们的浏览器提供给
Javascript接口，其他语言中是没有这个接口支持的
-
首先了解我们的这个DOM和BOM的话，我们是需要先了解我们的 window 对象的
- DOM 和 BOM 都是在我们的 window 对象上面的
-
DOM 就是我们的 （
DOcument Object Model）- 就是实现的是我们的将所有的内容表示为可以修改的对象
-
BOM 就是 （
Browser Object Model）- 就是用来实现的处理文档（document）之外的其他内容的对象
navigator location history等对象-
DOM 初步开始
-
首先我们的一个网页的展示是不需要使用我们的 JavaScript 的，但是我们的具体的一些网页上面的交互功能还是需要使用我们的JS
-
比如说我们得的搜索框的实现的时候，我们搜索东西的时候，我们是需要进行的是将我们的 搜索的东西先传递给服务器，然后服务器根据我们的传递的数据实现将对应的数据进行返回
-
DOM 就是实现的是将我们的网页中的所有的内容表示为可以修改的文档对象
- 在我们的网页中所有的 ELement 都是可以实现修改的对象模型
- 我们是可以通过 DOM 对象提供的 API 实现我们的对一个网页实现具体的操作的
-
-
DOM Tree-
可以这么理解，我们的一个 html 文件的话实际上都是处于这个 DOM 对象中的
-
就可以实现通过我们的 document 实现获取我们的所有的内容以及元素
-
document.body就是实现的是获取我们的body元素 -
document.head就是实现的是获取我们的head元素 -
document可以实现理解成就是我们的html | :root根节点 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log(document) </script> </body> </html> -
-
HTML Tree和我们的DOM Tree的结构是一一对应，所以说后面实现书写的时候，我们也是可以实现的是将我们的DOM Tree实现雷同HTML Tree实现书写， 同样的CSS Tree也是可以通过层级的书写实现一样的结构书写
-
-
学习 DOM 的基本思路
-
- 首先需要了解我们的 元素和元素之间的关系
- 然后了解我们如何通过 DOM 中的 API 实现获取元素节点的方法
- 学习如何实现获取元素中的一些 tag, content, type等等的操作
- 学习如何获取节点中的 properies
- 学习如何 创建， 插入， 克隆， 删除 DOM 节点
- 学习节点的样式或者类
- 实现获取元素节点的坐标，滚动，大小等等的操作
-
-
-
DOM 继承关系图
-
这一篇是临时赶出来的，有点水了 😄 😄 😄
