文章目录

【JavaScript】DOM 的概念、获取DOM元素和操作元素属性
- 一. 概念
- 二. DOM 操作
- - (1) 获取DOM元素的方式
  - - 1. document 获取元素方法
    - 2. 通过 HTML5 新增的方法获取
    - 案例：登录界面密码显示与隐藏
  - (2) 读写元素内部的结构内容
  - - 1. 改变元素节点里的内容
    - 2. 改变元素节点的文本内容
  - (3) DOM 操作元素的属性
  - - 属性的概述
    - 对应操作每种属性方式

【JavaScript】DOM 的概念、获取DOM元素和操作元素属性

一. 概念

DOM(Document Object Model)文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准 $\color{red}{编程接口}$ ，通过DOM可以来任意来修改网页中各个内容。

(1) 文档（document）

文档指的是网页，一个网页就是一个文档。DOM中使用document表示

(2) 元素（element）

页面中的所有标签都是元素，DOM中使用element表示

(3) 对象（Object）

对象指将网页中的每一个节点都转换为对象；
转换完对象以后，就可以以一种纯面向对象的形式来操作网页了。

(3) 模型（Model）

模型用来表示节点和节点之间的关系，方便操作页面。

(4) 节点（Node）

节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点（标签、属性、文本、注释等）。虽然都是节点，但是节点的类型却是不同的。

常用的节点

文档节点（Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容

二. DOM 操作

(1) 获取DOM元素的方式

在网页中浏览器已经为我们提供了document对象；它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

1. document 获取元素方法

根据元素的id属性获取页面元素

document.getElementById("id属性值");
// 返回的是一个元素对象

<div id="box1">第一块内容</div>
<!-- 分隔符 -->
console.log(box1); <!-- <div id="box1">第一块内容</div> -->

根据标签名来获取页面元素

document.getElementsByTagName("标签名");
// 返回的是带有指定标签的对象的集合【以伪数组形式存储】

<div class="box2">第二块内容</div>
<div class="box2">第三块内容</div>
<!-- 分隔符 -->
console.log(document.getElementsByTagName('div')); <!-- <div class="box2">第二块内容</div> -->
<!-- 可以通过类似数组中，利用下标的方式获取对应的元素 -->
console.log(document.getElementsByTagName('div')[1]); <!-- <div class="box2">第三块内容</div> -->

2. 通过 HTML5 新增的方法获取

根据类名获取某些元素的集合

document.getElementsByClassName("类名");
// 根据类名返回元素对象集合

<div class="box2">第二块内容</div>
<div class="box2">第三块内容</div>
<!-- 分隔符 -->
console.log(document.getElementsByClassName('box2')[0]); <!-- <div class="box2">第二块内容</div> -->

根据指定选择器返回第一个元素对象

document.querySelector('选择器');

<div class="box2">第二块内容</div>
<div class="box2">第三块内容</div>
<!-- 分隔符 -->
var a = document.querySelector('.box2');
console.log(a); <!-- <div class="box2">第二块内容</div> -->

注意事项：里面的选择器需要加符号（class：.，id：#）

根据指定选择器返回所有元素对象

document.querySelectorAll('选择器')

<div class="box">
    <ul>
        <li>1111111</li>
        <li>2222222</li>
        <li>2222222</li>
        <li>2222222</li>
    </ul>
</div>
<!-- 分隔符 -->
var list = document.querySelectorAll('.box li');
console.log(list[0]); <!-- <li>1111111</li> -->
console.log(list[1]); <!-- <li>2222222</li> -->

console.dir ：返回元素的对象，更好的查看里面的属性和方法。

注：日常获取DOM元素的时候一般使用querySelector和querySelectorAll来获取元素。

案例：登录界面密码显示与隐藏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                position: relative;
                width: 400px;
                border-bottom: 1px solid #ccc;
                margin: 100px auto;
            }
            .box input {
                width: 360px;
                height: 30px;
                border: 0;
                outline: none;
            }
            .box img {
                position: absolute;
                top: 2px;
                right: 2px;
                width: 24px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <label for="">
                <img src="./images/close.png" alt="" id="eye" />
            </label>
            <input type="password" name="" id="pwd" />
        </div>
        <script>
            var eye = document.getElementById('eye')
            var pwd = document.getElementById('pwd')
            var flag = 0
            eye.onclick = function () {
                if (flag == 0) {
                    pwd.type = 'text'
                    eye.src = 'images/open.png'
                    flag = 1
                } else {
                    pwd.type = 'password'
                    eye.src = 'images/close.png'
                    flag = 0
                }
            }
        </script>
    </body>
</html>

效果图：

显示：
隐藏：

(2) 读写元素内部的结构内容

利用DOM操作元素来改变里面的内容、属性等。

1. 改变元素节点里的内容

读写元素节点里的内容，从节点起始位置到终止位置全部内容,包括内部的元素。

element.innerHTML

起始位置到终止位置的全部内容，不包括外层标签，同时保留空格和换行

<div class="box1">
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</div>
<!-- 分隔符 -->
<script>
    console.log(box1.innerHTML); 
    /*
    	<ul>
            <li>111111</li>
            <li>222222</li>
            <li>333333</li>
            <li>444444</li>
    	</ul>
    */
</script>

element.outerHTML

起始位置到终止位置的全部内容，包括外层标签

<p>
    你好
	<span>123</span>
</p>
<!-- 分隔符 -->
<script>
    var p = document.querySelector('p');
	console.log(p.outerHTML);
    /*
<p>
        你好
        <span>123</span>
    </p>
    */
</script>

element.innerHTML和element.outerHTML的区别：

element.innerHTML：包含开始标签
element.outerHTML：不包含开始标签

<p>
    你好
    <span>123</span>
</p>
<!-- 分隔符 -->
<script>
    var p = document.querySelector('p');
    console.log(p.innerHTML);
    /*
        你好
        <span>123</span>
    */
    var p = document.querySelector('p');
    console.log(p.outerHTML);
    /*
<p>
        你好
        <span>123</span>
    </p>
    */
</script>

2. 改变元素节点的文本内容

读写某个元素节点的文本内容。

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

<p>
    你好
    <span>123</span>
</p>
<!-- 分隔符 -->
<script>
    var p = document.querySelector('p');
    console.log(p.innerText);// 你好 123
</script>

innerHTML和innerText比较

相同点

这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性。
两个属性作用类似，都可以获取到标签内部的内容。

不同点

innerHTML会获取到html标签，而innerText会自动去除标签。
如果使用这两个属性来设置标签内部的内容时，没有任何区别的。

(3) DOM 操作元素的属性

属性的概述

首先，认识元素属性

属性的格式：

<元素名 属性 = '属性值'></元素名>

<input type="text" />

属性的分类：

原生属性：w3c 标准内存在的属性。

eg: class id style border target href src
自定义属性：没有特殊意义，有我们人为设置的属性
```
<div aaa = 'zs' bbb = 'ls'></div>
```
H5 自定义属性：H5之后官方提供的以 data-开头的属性

data-border、data-href等等。

对应操作每种属性方式

操作原生属性

直接使用属性名操作就可以

1.1 读：

语法：元素.属性名

<input type="text" />
<!-- 分隔符 -->
var ipt = document.querySelector("input");
// 利用点符号操作
console.log(ipt.type); // text
// 或 利用中括号操作
console.log(ipt["type"]); // text

1.2 写：

语法：元素.属性名 = 值

<input type="text" />
<!-- 分隔符 -->
var ipt = document.querySelector("input");
ipt.type = "checkbox";

利用系统提供的方法操作默认和自定义的属性

getAttribute() 获取特定元素节点属性的值,包括自定义属性和原生属性

<input type="text" bbb="12" />
<!-- 分隔符 -->
var ipt = document.querySelector("input");
console.log(ipt.getAttribute('type')); // text

setAttribute() 设置特定元素节点属性的值,包括自定义属性和原生属性

<input type="text" bbb="12" />
<!-- 分隔符 -->
var ipt = document.querySelector("input");
console.log(ipt.setAttribute('aaa', '111')); // <input type="text" bbb="12" aaa="111" />

removeAttribute() 移除特定元素节点属性,包括自定义属性和原生属性

<input type="text" bbb="12" />
<!-- 分隔符 -->
var ipt = document.querySelector("input");
console.log(ipt.removeAttribute('bbb')); // <input type="text" />

操作h5自定义属性

利用dataset属性操作h5自定义属性

3.1 增

<input type="text" bbb="12" data-a="200"/>
<!-- 分隔符 -->
var ipt = document.querySelector("input");
// 增加h5自定义属性
ipt.dataset["b"] = 2000; // <input type="text" bbb="12" data-a="200" data-b="2000"/>

3.2 删

<input type="text" bbb="12" data-a="200"/>
<!-- 分隔符 -->
var ipt = document.querySelector("input");
// 删除h5自定义属性
delete ipt.dataset.a;

3.3 改

<input type="text" bbb="12" data-a="200"/>
<!-- 分隔符 -->
var ipt = document.querySelector("input");
// 删除h5自定义属性
ipt.dataset.a = 255; // <input type="text" bbb="12" data-a="255"/>

3.4 查

<input type="text" bbb="12" data-a="200"/>
<!-- 分隔符 -->
var ipt = document.querySelector("input");
// 查看h5自定义属性
console.log(ipt.dataset.a); // 200