DOM基础

最新推荐文章于 2023-04-14 14:09:29 发布

silverljh

最新推荐文章于 2023-04-14 14:09:29 发布

阅读量311

点赞数

分类专栏：前端学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46726946/article/details/125348208

版权

本文详细介绍了DOM（文档对象模型）的基础知识，包括DOM简介、元素获取、事件基础以及元素和节点的操作。内容涵盖如何根据ID、标签名获取元素，事件的触发和响应机制，以及如何改变元素内容、样式和属性。此外，还讨论了节点的创建、添加、删除、复制等操作，重点强调了DOM在网页动态效果和交互中的重要性。

摘要由CSDN通过智能技术生成

DOM

1 DOM 简介

1.1 什么是 DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2 DOM 树

**文档：**一个页面就是一个文档，DOM 中使用 document 表示
**元素：**页面中的所有标签都是元素，DOM 中使用 element 表示
**节点：**网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象

2 获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式:

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

 document.getElementById('id');

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

2.3 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

 document.getElementsByTagName('标签名');

注意：
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的
如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

2.4 通过 HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器');     // 根据指定选择器返回

注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

2.5 获取特殊元素（body，html）

获取body元素

1. doucumnet.body  // 返回body元素对象

获取html元素

1. document.documentElement  // 返回html元素对象

3 事件基础

3.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.2 事件三要素

事件源（谁）
事件类型（什么事件）
事件处理程序（做啥）

3.3 案例：点击按钮弹出警示框

页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。

<button id="btn">按钮</button>
    <script>
        /* 1 事件源：事件触发对象 */
        var btn = document.getElementById('btn');
        /* 2时间类型 ：怎样触发*/
        /* 3 事件处理程序：通过一个函数赋值的方式来完成 */
        btn.onclick = function () {
     
            alert('你好');
        }
</script>

3.4 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

3.5 常见的鼠标事件

3.6 分析事件三要素

下拉菜单三要素
关闭广告三要素

4 操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

4.1 改变元素内容

element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

  <div>111</div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        var div = document.querySelector('div');
        div.innerText='<strong>今天是：</strong>2019';    // 将strong标签以文本方式加载出来
        // div.innerHTML='<strong>今天是：</strong>2019';   // 下面加载出来会加粗粗
        
        var p = document.querySelector('p');
        /* 去除空格和换行、标签 */
        console.log(p.innerText); 
        /* 保留空格和换行、标签 */       
        console.log(p.innerHTML);  
        
</script>

4.2 常用元素的属性操作

1. innerText、innerHTML 改变元素内容

2. src、href

3. id、alt、title

小案例：

 <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">

    <script>
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        zxy.onclick = function () {
     
            img.src = 'images/zxy.jpg';
            img.title = '张学友';
        }
        ldh.onclick = function () {
     
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>

4.3 案例：分时显示不同图片,显示不同问候语

根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。

    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        /* 得到当前小时数 */
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
   
            img.src = 'images/s.gif';
            div.innerText = '上午好，好好写代码';
        } else if (h < 18) {
   
            img.src = 'images/x.gif';
            div.innerText = '下午好，好好写代码';
        }else{
   
            img.src = 'images/w.gif';
            div.innerText = '晚上好，好好写代码';
        }
    </script>

4.4 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

  type、value、checked、selected、disabled

    <button>按钮</button>
    <input type="text" value="输入内容">

    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function () {
     
            // input.value = '已输入';   //更改value值
            // btn.disabled = true; //禁用表单
            this.disabled = true; //同样意义：禁用表单  this指向事件函数的调用者
        }
    </script>

4.5 案例：仿京东显示密码

点击按钮将密码框切换为文本框，并可以查看密码明文。

<!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: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

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

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

    <script>
        var img = document.querySelector('img');
        var input = document.querySelector('input');
        var flag = 0;
        img.onclick = function () {
     
            if (flag == 0) {
     
                flag++;
                input.type = 'text';
                img.src = 'images/open.png';
            } else {
     
                flag = 0;
                input.type = 'password';
                img.src = 'images/close.png';

            }

        }
    </script>
</body>

</html>

4.6 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1. element.style     行内样式操作

2. element.className 类名样式操作

注意：
1.JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

<!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>
        div {
     
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
     
            this.style.backgroundColor = 'purple';
            this.style.width= '200px';
        }
    </script>
</body>

</html>

<!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>
        div {
     
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .change {
     
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="first">文本</div>
    <script>
        // 1.如果样式简单或者功能简单的情况下，使用element.style获得修改元素样式
        var test = document.querySelector('div');
        test.onclick = function () {
     
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            this.className = 'change'; //类名样式操作

        }
    </script>
</body>

</html>

4.7 案例：淘宝点击关闭二维码

当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。

<!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: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
     
            width: 60px;
            margin-top: 5px;