1.DOM（一）document.getElementById(‘id名‘)、~ClassName(‘class名‘)、~TagName(‘标签名如li,div‘)、~Name(‘name属性值‘)

目录

一：DOM(Document Object Model) 文档对象模型

   1.文档（Document）： 文档指整个网页 （一个文档就是一个网页）

          网页由三个部分组成：①结构（HTML）②表现（CSS）③行为（JavaScript）

       ②  DOM中为我们提供了大量的对象，使我们可以通过JS来完成对网页操控

   2.对象（Object）：DOM将网页中的所有的东西都转换为了对象

   3.模型（Model）                    - 模型由n个节点组成，体现节点的关系

                 ①模型图：

                      ​

                  ②节点：一个网页可以称为节点（一个项目由多个网页组成），网页里的各个标签也可以称为节点（网页由各个标签组成）。但是这些节点的类型不同 ：

                        （1）文档节点：表示整个网页

                        （2）元素节点：各种标签都属于元素节点

                        （3）属性节点：标签中的属性称为属性节点

                        （4）文本节点：标签中的文字

4.简单案例：通过JS来修改button按钮，用模型里面最大的docunment修改

①语句：let a = document.getElementById('id名')：文档.得到标签的id

②语句：a.innerHTML='此id名内部的html代码'     用来获取或设置标签内的HTML代码

二：事件

1.事件就是（用户和网页的交互瞬间）例如：点击鼠标，鼠标移动，键盘按下...

2.我们通过响应用户的事件来完成和用户的交互 ————事件点击属性大全：

①W3C   ②MDN

3.交互案例两种：

①在元素中设置事件的响应

②写在script标签里，通过js代码来设置事件的响应

 4.关于      script位置问题     与    解决方法：

 问题：但是我们的script点击事件的代码如果写在button按钮代码的上面就无法运行，因为我们的浏览器是从上到下读取的，运行script代码时我们的button代码还没有执行，获取的是空

解决办法：

                ①在button后面写js代码

                ②给windows设置事件，让我们的浏览器从上到下加载完以后再来执行代码 

                ③在外部定义一个js文件，html文件里引用，

                                      👉引用也要放在button后面，

                                      👉或者js里面添加windows事件，

                                          👉或者在script标签里面设置defer 用来让网页加载后再读取代码

 三：DOM查询：获取到我们想要的对象

getElementsXxx一系列总会返回一个类数组对象

1.根据id获取单个： let btn = document.getElementById('btn')

2.根据class名获取（一组）：let item = document.getElementsByClassName('class名')

3.①根据标签名li获取对象（如上图所示）：let item = document.getElementsByTagName('li')

   ②根据标签名*循环页面全部标签

4.根据name属性值获取一组元素节点对象（主要用来对付表单项）

let um = document.getElementsByName('username');

①举例：

 ②用name属性值获取一组元素节点对象再修改此对象里面的value

---

一：DOM(Document Object Model) 文档对象模型

   1.文档（Document）： 文档指整个网页 （一个文档就是一个网页）

          网页由三个部分组成：①结构（HTML）②表现（CSS）③行为（JavaScript）

       ②  DOM中为我们提供了大量的对象，使我们可以通过JS来完成对网页操控

   2.对象（Object）：DOM将网页中的所有的东西都转换为了对象

   3.模型（Model）                    - 模型由n个节点组成，体现节点的关系

                 ①模型图：

                      

                  ②节点：一个网页可以称为节点（一个项目由多个网页组成），网页里的各个标签也可以称为节点（网页由各个标签组成）。但是这些节点的类型不同 ：

                        （1）文档节点：表示整个网页

                        （2）元素节点：各种标签都属于元素节点

                        （3）属性节点：标签中的属性称为属性节点

                        （4）文本节点：标签中的文字

4.简单案例：通过JS来修改button按钮，用模型里面最大的docunment修改

①语句：let a = document.getElementById('id名')：文档.得到标签的id

②语句：a.innerHTML='此id名内部的html代码'     用来获取或设置标签内的HTML代码

二：事件

1.事件就是（用户和网页的交互瞬间）例如：点击鼠标，鼠标移动，键盘按下...

2.我们通过响应用户的事件来完成和用户的交互 ————事件点击属性大全：

①W3C   ②MDN

3.交互案例两种：

①在元素中设置事件的响应

②写在script标签里，通过js代码来设置事件的响应

 

 4.关于      script位置问题     与    解决方法：

•  问题：但是我们的script点击事件的代码如果写在button按钮代码的上面就无法运行，因为我们的浏览器是从上到下读取的，运行script代码时我们的button代码还没有执行，获取的是空

• 解决办法：

                ①在button后面写js代码

                ②给windows设置事件，让我们的浏览器从上到下加载完以后再来执行代码 

                ③在外部定义一个js文件，html文件里引用，

                                      👉引用也要放在button后面，

                                      👉或者js里面添加windows事件，

                                          👉或者在script标签里面设置defer 用来让网页加载后再读取代码

 三：DOM查询：获取到我们想要的对象

getElementsXxx一系列总会返回一个类数组对象

1.根据id获取单个： let btn = document.getElementById('btn')

2.根据class名获取（一组）：let item = document.getElementsByClassName('class名')

3.①根据标签名li获取对象（一组）（如上图所示）：let item = document.getElementsByTagName('li')

   ②根据标签名*循环页面全部标签

4.根据name属性值获取一组元素节点对象（主要用来对付表单项）

let um = document.getElementsByName('username');

①举例：

 ②用name属性值获取一组元素节点对象再修改此对象里面的value