DOM树(上) -- 第七课

文章目录

前言
一、DOM是什么？
二、基础用法
- 1.DOM树
- 2. 获取元素
- - 1. id
  - 2. 标签
  - 3. name
  - 4. HTMLS新增的获取的方法
  - - 1. 根据类型获取
    - 2. 根据querySelector获取
- 3. 事件基础
- - 1. 概述
  - 2. 事件三要素
  - 3. 操作元素内容
  - - 1. 操作内容
    - 2. 操作属性
    - 3. 案例
  - 4. 操作元素样式
  - 5. 案例 -- 显示隐藏文本框内容
  - 4. 排他思想
总结

前言

从本节开始我们就正式进入了javaScript的虚席了,首先需要了解的就是DOM

一、DOM是什么？

Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。

DOM（文档对象模型）是一种用于访问和操作HTML和XML文档的编程接口。它将文档表示为一个由节点组成的树形结构，每个节点表示文档中的一个元素、属性、文本等。

DOM提供了一组方法和属性，允许开发人员通过脚本语言（通常是JavaScript）来动态地访问和修改文档的内容、结构和样式。通过使用DOM，开发人员可以创建、删除、修改和移动文档中的元素和属性，以及对文档进行事件处理和动画效果的操作。

DOM的设计理念是将文档视为一个结构化的树，其中树的每个节点都是一个对象，具有自己的属性和方法。可以通过访问树的节点来获取和修改文档中的元素、属性和文本。

DOM具有跨平台、可扩展和易于使用的特点，是Web开发中常用的技术之一。通过使用DOM，开发人员可以实现动态的网页交互和用户界面设计，并能够创建复杂的Web应用程序。

二、基础用法

1.DOM树

DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。请添加图片描述

文档（document)：可以把一个页面当成一个文档
元素（element）：页面中的所有标签都是元素
节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法

2. 获取元素

1. id

document.getElementByld（‘id’）方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。

<div id="box">你好</div>
<script>
	var Obox = document.getElementByld（'box'）；
    console.log（Obox）；//结果为：<div id="box">你好
</script>

2. 标签

根据标签名获取元素的方式：可以通过document对象获取元素。

var id = document.getElementsByTagName（'标签名'）；

3. name

document.getElementsByName（）方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。

var name = document.getElementsByName（'name名'）；

示例:在复选框中选择最喜欢的水果

<body>
	<p>请选择你最喜欢的水果（多选）</p>
	<label> <input type="checkbox"name="fruit"value="苹果">苹果</label>
	<label><input type="checkbox"name="fruit"value="香蕉">香蕉</label>
	<label><input type="checkbox"name="fruit"value="西瓜">西瓜</label>
	<script>
		var fruits = document.getElementsByName（'fruit'）；//返回对象集合
        fruits[0].checked = true；//将fruits中的第1个元素的checked属性值设置为true
	</script>
</body>

4. HTMLS新增的获取的方法

HTML5中为document对象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：这三种方式在使用时需要考虑到浏览器的兼容性问题。

1. 根据类型获取

document.getElementsByClassName（）方法，用于通过类名来获得某些元

<body>
	<span class="one">英语</span> <span class="two">数学</span>
    <span class="one">语文</span> <span class="two">物理</span>
<script>
	var Ospan1 = document.getElementsByClassName（'one'）；
    var Ospan2 = document.getElementsByClassName（'two'）；
    Ospan1[0].style.fontWeight ='bold'；
    Ospan2[1].style.background ='red'；
</script>
</body>

2. 根据querySelector获取

tips:标签名直接写即可,如果是id加#,类名加.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var box = document.getElementById('box1');
        console.log(box);
    </script>
</head>
<body>
    <div id="box1" class="nav">first</div>
    <div id="box2">second</div>
    <p>请选择你最喜欢的水果（多选）</p>
	<label> <input type="checkbox"name="fruit"value="苹果">苹果</label>
	<label><input type="checkbox"name="fruit"value="香蕉">香蕉</label>
	<label><input type="checkbox"name="fruit"value="西瓜">西瓜</label>
    <script>
        // 1. 通过id获取 -- 只能获取一个元素或者标签
        var box = document.getElementById('box1');
        console.log(box);

        // 2. 通过标签进行获取 -- 可以获取多个标签
        var div = document.getElementsByTagName('div');
        console.log(div);

        // 3. 通过name进行获取
        var inp = document.getElementsByName('fruit');
        console.log(inp);
        
        // queryselector能欧根据标签名,类名,id进行获取,但是它只能获取一个元素,如果有多个,只能获取第一个
        var div = document.querySelector('div');
        var div = document.querySelector('#box1'); // id为box1的标签
        var div = document.querySelector('.nav'); // class为nav的标签
        console.log(div);
        
        // querySelectorAll -- 可以获取多个
        var fruit = document.querySelectorAll('input');
        console.log(fruit);
        
        // document.getElementsByClassName
        var nav = document.getElementsByClassName('nav')
        console.log(nav);
        
    </script>
</body>
</html>

3. 事件基础

1. 概述

事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。

2. 事件三要素

事件三要素是指事件源、事件类型和事件处理程序这3部分。名词解释如下：

事件源：触发事件的元素（谁触发了事件）
事件类型：如 click 单击事件（触发了什么事件）
事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）

3. 操作元素内容

1. 操作内容

在前面的内容中已经讲解了获取元素的几种方式，接下来将利用DOM提供的属性实现对元素内容的操作。常用的属性如下表所示：
请添加图片描述

<!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>
    <div>这是一个div标签</div>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        var div = document.querySelector('div')

        // 如果只有一个标签,他们三者就是一样的
        console.log(div.innerHTML);
        console.log(div.innerText);
        console.log(div.textContent);


        var ul = document.querySelector('ul')

        console.log(ul.innerHTML); // ul标签中的所有内容,包括文本,标签,换行,空格
        console.log(ul.innerText); // ul标签中的所有文本,没有标签,换行,空格
        console.log(ul.textContent); // ul标签中的所有文本,换行,空格,没有标签
    </script>
</body>
</html>

2. 操作属性

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。

3. 案例

目标:显示隐藏密码明文

案例分析：在登录页面，为了优化用户体验，方便用户进行密码输入。因此在设计密码框时，会有一个“眼睛”图片，充当按钮功能，单击可以切换按钮的状态，控制密码的显示和隐藏。实现步骤如下：

准备一个父盒子div
在父盒子中放入两个子元素，一个input元素和一个img元素
单击眼睛图片切换input的type值（text和password）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="password" name="" id="pwd">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>

    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function () {
            // 点击一次之后， flag 一定要变化
            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>

4. 操作元素样式

操作元素样式的两种方式：一种是操作style属性，另一种是操作className属性。

操作style属性
1. 元素对象的样式，可以直接通过“元素对象.style.样式属性名”的方式操作。样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写。
  案例展示

<div id="box"></div>
<script>
	var ele = document.querySelector（'#box'）；//获取元素对象
    ele.style.width ='100px'；
    ele.style.height ='100px'；
    ele.style.transform ='rotate（7deg）'；

    // 上述3行代码相当于在CSS中添加以下样式：
	// box（width：100px；height：100px；transform：rotate（7deg）；
</script>

操作className属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div>点击一下</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            div.className = 'box'
        }
    </script>
</body>
</html>

5. 案例 – 显示隐藏文本框内容

案例分析：本案例需要为一个文本框添加提示文本。当单击文本框时，里面的默认提示文字会隐藏，鼠标指针离开文本框，里面的文字会显示出来。藏

实现步骤如下：

为元素绑定获取文本框焦点事件onfocus和失去焦点事件onblur
如果获取焦点时，需要判断表单里面的内容是否为默认文字；如果是默认文字，就清空表单内容
如果失去焦点，需要判断表单内容是否为空；如果为空，则表单里边的内容改为默认文字

<!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>
    <input type="text" value="请输入" style="color: #999;">
    <script>
        var inp = document.querySelector('input');
        // onfocus获取鼠标焦点
        inp.onfocus = function(){
            if(this.value == '请输入'){
                this.value = '';
            }
        }
        // onblur失去焦点
        inp.onblur = function(){
            if(this.value == ''){
                this.value = '请输入';
            }
        }
    </script>
</body>
</html>

4. 排他思想

在DOM（Document Object Model）中，排他思想可以理解为对元素的唯一性和独立性的重视。DOM是一种用于表示和操作HTML、XML等文档的编程接口，它将文档抽象成一个树状结构，每个元素都是DOM树的一个节点。

在DOM中，每个节点都有一个唯一的父节点，并且在同一级别下的子节点是互斥的，即同一级别下的节点不能重复。这种排他性确保了节点之间的关系和层次结构的准确性。例如，一个元素节点不能是其它元素节点的子节点，一个节点只能拥有一个父节点。

此外，DOM还强调每个节点的独立性。每个节点都有自己的属性、方法和事件，可以独立地进行操作和修改。这种独立性使得开发者可以对DOM树进行灵活的操作和控制，而不需要依赖其他节点的状态。

总之，DOM中的排他思想体现在对节点的唯一性和独立性的重视，通过这种排他思想，DOM提供了一种可靠和灵活的方式来操作和控制文档的结构和内容。

案例:

<!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>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 将所有的时间设置第一个点击事件
        for(var i = 0;i<btns.length;i++){
            btns[i].onclick = function(){
                // 通过for循环使得所有的for循环的背景颜色为空
                for(var j=0;j<btns.length;j++){
                    btns[j].style.backgroundColor = '';
                };
                // 排他思想,先排除其他的,在添加自己的
                this.style.backgroundColor = 'skyblue';
            };
        }

        // 传统的实现方式太过麻烦
        // var btns = document.querySelectorAll('button');
        // console.log(btns);
        
        // btns[0].onclick = function(){
        //     console.log(1);
        //     this.style.backgroundColor = 'blue';
        // }
        // btns[1].onclick = function(){
        //     console.log(2);
        //     this.style.backgroundColor = 'blue';
        // }
        // btns[2].onclick = function(){
        //     console.log(3);
        //     this.style.backgroundColor = 'blue';
        // }
        // btns[3].onclick = function(){
        //     console.log(4);
        //     this.style.backgroundColor = 'blue';
        // }
    </script>
</body>
</html>