JavaScript进阶内容——DOM详解

最新推荐文章于 2022-11-12 10:25:59 发布

JavaMonsterr

最新推荐文章于 2022-11-12 10:25:59 发布

阅读量480

点赞数

分类专栏：程序员 Java 计算机文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/JavaMonsterr/article/details/125912316

版权

这篇博客详细介绍了JavaScript中的DOM（文档对象模型），包括DOM的定义、用途和DOM树概念。文章深入讨论了如何获取元素，如通过ID、标签名和类名。接着，博主阐述了事件基础，如事件三要素、事件类型和操作元素的方法，如修改元素内容、属性和样式。此外，还讲解了节点操作，如获取父节点、子节点和兄弟节点。最后，博主探讨了事件的高级内容，如注册和删除事件、DOM事件流、事件对象、事件委托以及鼠标和键盘事件的相关应用。

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

前言

当我们已经熟练掌握JavaScript的语法之后，我们就该进入更深层次的学习了

首先我们思考一下：JavaScript是用来做什么的？

JavaScript诞生就是为了能够让它在浏览器中运行

那么DOM就是我们学习中不可或缺的一个环节，下面让我们深入了解DOM

DOM简介

DOM定义：

文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

DOM作用：

用来修改网页内容，结构和样式

DOM树：

我们用一个图片来表示（来自B站黑马程序员Pink老师）

获得元素

DOM在我们实际开发中主要用来操作元素

那么如果要操作元素，最基本的就是要先获得元素：

ID获得元素：

代码：

//注意这里返回的是元素对象
document.getElementById('ID');

案例展示：

<!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>
</head>
<body>
    <div id="div1"></div>


<script>
    //1.我们常常把script放在body的内部下方
    //2.get 获得 Element 元素 by 通过 Id
    //3.注意ID是大小写敏感
    //4.返回的是一个元素对象
    var div1 = document.getElementById('div1');
    //这里正常输出
    console.log(div1);
    //这里dir表示更好的输出（展示其整体内容）
    console.dir(div1);
</script>
</body>
</html>

标签名获取元素：

代码：

//注意这里返回的是元素对象集合
document.getElementsByTagName('TagName')；
//可以获得某个父元素中的全部元素对象集合
element.getElementsByTagName('TagName')；

案例展示：

<!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>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ol id="ol">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>

    <script>
        //这里是整个body中的li，返回的是元素对象集合
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        //通过遍历获得集合中各个元素对象
        for (const iterator of lis) {
            console.log(iterator);
        }

        //当li为空，仍旧返回数组，但为空数组（伪数组）

        //我们可以单独获得ol中的li
        var ol = document.getElementById('ol');
        var ollis = ol.getElementsByTagName('li');
        //通过遍历获得集合中各个元素对象
        for (const iterator of ollis) {
            console.log(iterator);
        }
    </script>
</body>
</html>

类名获取元素(HTML5)：

代码：

document.getElementByClassName('类名');

案例展示：

<!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>
    
</head>
<body>
    <div id="nav"></div>
    <div class="box"></div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        //1.通过类名获得对象
        var box = document.getElementsByClassName('div');
        console.log(box);

        //2.document.querySelector('.box')我们可以获得选择器中的第一个
        var fristBox = document.querySelector('.box');

        //3。上方的获取方法同样适用于id选择，注意需要用‘’包括
        var nav = document.querySelector('#nav');

        //4.同样使用于标签选择
        var fristLi = document.querySelector('li');

        //5.document.querySelectorAll()获取所有的类型的集合
        var allLi = document.querySelectorAll('li');
    </script>
</body>
</html>

获得特殊标签body和html元素

代码：

//body元素
document.body
//html元素
document.documentElement

案例展示：

<!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>
</head>
<body>
    

    <script>
        //1.获得body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);

        //2.获得html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
</html>

事件基础

JavaScript使我们有能力创建动态页面，而事件就是被JavaScript所侦测到的行为。

页面中的每个元素都可以产生某些触发JavaScript的事件，简单来说就是产生：触发——响应机制

事件三要素

我们把事件分为三部分：

事件源
- 事件被触发的对象
事件类型
- 如何触发，例如点击onclick
事件处理程序
- 通过一个函数赋值的方法完成

我们下面给出基本格式：

name.methodName = function() {
    ~~~
    ~~~
}

我们给出一个基础案例：

<!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>
</head>
<body>
    <button id="but">按钮</button>

    <script>
        //我们下面做出的：点击按钮就会弹出“你好”的对话框
        
        //1.获得事件源
        var button = document.getElementById('but');
        //2.针对事件源，给出事件类型和事件处理程序（这里指点击事件）
        button.onclick = function() {
            alert("你好");
        }
    </script>
</body>
</html>

事件类型概括

我们下面给出所有可用到的事件类型：

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

我们学习事件的目的就是为了对元素进行修改

下面我们依次介绍一些操作元素的方法：

元素内容修改

元素内容修改有两种方法：

//element.innerText不识别HTML标签，会去除空格和换行
element.innerText = '';
//element.innerHTML识别HTML标签，不会去除空格和换行(推荐)
element.innerHTML = '';
//注意：我们可以通过上述方法来获得该元素的内容

除内容修改外，元素属性同样也可以进行修改：

//我们需要把下述图片修改放于某元素的事件中就可以进行修改
img.src = '';

案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-

最低0.47元/天解锁文章