[TOC]

JavaScript DOM

3.1、DOM介绍

DOM(Document Object Model)：文档对象模型。
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

DOM介绍.png

3.2、Element元素的获取操作

具体方法

DOM的获取方式.png

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>
</html>

3.3、Element元素的增删改操作

具体方法
代码实现
```html <!DOCTYPE html>
```
<a name="3defdf9d"></a>
## 3.4、Attribute属性的操作

-  **具体方法**<br />![Attribute属性的操作.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629610786277-02b3ddde-bd40-42ce-99a5-733a27b27e5d.png#clientId=u16b8ca02-3dfd-4&from=drop&id=ud08b1cd0&margin=%5Bobject%20Object%5D&name=Attribute%E5%B1%9E%E6%80%A7%E7%9A%84%E6%93%8D%E4%BD%9C.png&originHeight=196&originWidth=640&originalType=binary&ratio=1&size=29148&status=done&style=none&taskId=u9495eb4f-ae9f-4ea8-b90d-3f26348e232)
-  **代码实现**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";

</script>
</html>
```
3.5、Text文本的操作
- 具体方法
- 代码实现
```html <!DOCTYPE html>
```
  
  3.6、DOM小结
  - DOM(Document Object Model)：文档对象模型
    - Document：文档对象
  - Element：元素对象
    - Attribute：属性对象
  - Text：文本对象
  - 元素的操作
    - getElementById()
    - getElementsByTagName()
    - getElementsByName()
    - getElementsByClassName()
    - 子元素对象.parentElement属性
    - createElement()
    - appendChild()
    - removeChild()
    - replaceChild()
  - 属性的操作
    - setAtrribute()
    - getAtrribute()
    - removeAtrribute()
    - style属性
  - 文本的操作
    - innerText
    - innerHTML

JavaScript DOM

JavaScript DOM

3.1、DOM介绍

3.2、Element元素的获取操作

3.3、Element元素的增删改操作

3.5、Text文本的操作

3.6、DOM小结