Java Web 7 JavaScript 7.6 DOM

Java Web 7 JavaScript 7.6 DOM
Java Web

【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】

7 JavaScript
文章目录
- Java Web
  7 JavaScript
  7.6 DOM
  7.6.1 概述
  7.6.2 获取 Element对象
  7.6.3 HTML Element 对象的使用
7.6 DOM

7.6.1 概述

DOM：Document Object Model 文档对象模型。

也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要写代码解析，而 HTML 文档是浏
览器解析。

封装的对象分为
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
【比如】

【作用】

JavaScript 通过 DOM，就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
【DOM 相关概念】

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。

该标准被分为 3 个不同的部分：
1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
1. XML DOM：针对 XML 文档的标准模型
2. HTML DOM：针对 HTML 文档的标准模型
  该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
- 例如：标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
- 例如：标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是
  Element 对象。
7.6.2 获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数：
- getElementById() ：根据id属性值获取，返回单个Element对象
- getElementsByTagName() ：根据标签名称获取，返回Element对象数组
- getElementsByName() ：根据name属性值获取，返回Element对象数组
- getElementsByClassName() ：根据class属性值获取，返回Element对象数组
【举个栗子】
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>
    <div class="cls">传智教育div> <br>
    <div class="cls">黑马程序员div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
<script>
//在此处书写js代码
script>
body>
html>
```
1. 根据 id 属性值获取上面的 img 元素对象，返回单个对象
```
var img = document.getElementById("light");
alert(img);
```
2. 根据标签名称获取所有的 div 元素对象
```
var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象
// alert(divs.length); //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}
```
3. 获取所有的满足 name = ‘hobby’ 条件的元素对象
```
//3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
    alert(hobbys[i]);
}
```
4. 获取所有的满足 class=‘cls’ 条件的元素对象
```
//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
    alert(clss[i]);
}
```
7.6.3 HTML Element 对象的使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。

【举个例子】
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <img id="light" src="../imgs/off.gif"> <br>
    <div class="cls">传智教育div> <br>
    <div class="cls">黑马程序员div> <br>
    <input type="checkbox" name="hobby"> 电影、
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
<br>
<script>
//在此处写js代码
script>
body>
html>
```
需求：
1. 点亮灯泡
```
//1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";
```
2. 将所有的 div 标签的标签体内容替换为呵呵
```
//1，获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML：设置元素内容
*/
//2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
for (let i = 0; i < divs.length; i++) {
    //divs[i].style.color = 'red';
    divs[i].innerHTML = "呵呵";
}
```
3. 使所有的复选框呈现被选中的状态
```
//1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}
```
相关阅读:
Mindomo Desktop for Mac(免费思维导图软件)下载
 11-【数据库】定义表结构的时间字段的两种方式
 Ion Stoica：做成Spark和Ray两个明星项目的秘笈
 web打印页面加载数据耗时
 ROS（1）话题模型
 springboot使用logback进行日志记录
 【已解决】pyqt5的打包exe软件图标菜单栏/任务栏/小图标/窗口图标未显示
 Redis实现分布式锁
 网工内推 | 售后工程师，IP认证优先，最高15薪，年底有分红
 高校会议管理系统毕业设计
原文地址：https://blog.csdn.net/weixin_44226181/article/details/127117048

Java Web

7 JavaScript

文章目录

7.6 DOM

7.6.1 概述

7.6.2 获取 Element对象

7.6.3 HTML Element 对象的使用