JavaScript DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/123153771

这篇博客介绍了Web API和DOM的基础知识，包括DOM的概念和DOM树，详细讲解了如何通过JavaScript获取和操作HTML元素，如根据ID、标签、名称、类获取元素，以及HTML5的querySelector()和querySelectorAll()方法。此外，还涵盖了事件基础和如何改变元素的内容、属性及样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web API简介

1.初识Web API

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

2. Web API与API的关系

（1）API

API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。

（2）Web API

Web API：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。例如，console对象、document对象、window对象。

document.title = '设置新标题';	           // 设置页面标题
console.log(document.title);	           // 获取页面标题
document.write('<h1>网页内容</h1>');     // 将字符串写入页面

DOM简介

1.什么是DOM

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

W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。

2. DOM树

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

在这里插入图片描述

接下来针对DOM中各节点的专有名词解释如下：

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

获取元素

1.根据id获取元素

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

<body>
    <div id="box"></div>
    <script>
        var d = document.getElementById("box")
        console.log(d);
    </script>
</body>

2.根据标签获取元素

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

document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');

由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。

<body>
    <div id="box"></div>
    <script>
        var d = document.getElementsByTagName("div");
        console.log(d);
        console.log(Array.isArray(d));    //结果为false
    </script>
</body>

3.根据name获取元素

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

document.getElementsByName('name名');

<body>
    <div id="box">
        <input type="checkbox" name="hobby" value="游泳">游泳
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="足球">足球
    </div>
    <script>
        var hobbys = document.getElementsByName("hobby");
        console.log(hobbys);
        // hobbys[0].checked = true;    //hobbys打印出来是一个数组，该语句的意思是选中第一个元素
    </script>
</body>

4.根据class获取元素

根据标签的class属性获曲：document.getElementsByClassName()，该方法的返回值是数组。

<body>
    <p class="p1">邮电大学</p>
    <p class="p1">政法大学</p>
    <p class="p1">石油大学</p>
    <script>
        var p = document.getElementsByClassName("p1");
        console.log(p);
    </script>
</body>

5.HTML5新增的获取方式

（1）querySelector()

**querySelector()**方法用于返回指定选择器的第一个元素对象。

（2）querySelectorAll()

**querySelectorAll()**方法返回指定选择器的所有元素对象集合。

<body>
    <p class="p1">邮电大学</p>
    <p class="p1">政法大学</p>
    <p class="p1">石油大学</p>
    <div id="d1">交通大学</div>
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
    </ul>
    <script>
        var qs = document.querySelector(".p1")    //根据class属性值选取第一个元素
        console.log(qs);

        var dd = document.querySelector("#d1")    //使用id选择器选择元素
        console.log(dd);

        var li = document.querySelector("li")    //通过标签名来选择第一个li元素
        console.log(li);

        var lis = document.querySelectorAll("li")    //选择所有的li标签
        console.log(lis);
    </script>
</body>

6.document对象的属性

document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等，document对象的常用属性如下表：
在这里插入图片描述

<body>
  <script>
    var bodyEle = document.body;
    console.dir(bodyEle);
    var htmlEle = document.documentElement;
    console.log(htmlEle);
  </script>
</body>

事件基础

1.事件概述

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

2.事件三要素

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

3.案例演示

案例演示：为按钮绑定点击事件，触发按钮事件后，会弹出一个信息。

<body>
    <button id="btn">点击按钮</button>
    <script>

        //获取按钮
        var btn = document.getElementById("btn");
        
        //给按钮注册事件和事件处理程序
        btn.onclick = function(){
            alert("你点击了按钮")
        }
    </script>
</body>

操作元素

1.操作元素内容

常用的属性如下：
在这里插入图片描述

<body>
    <input type="text" id="userName">
    <button id="btn" onclick="f1()">点击按钮</button>
    <div id="dt"></div>
    <script>

        function f1(){
            //获取input中的value
            var name = document.getElementById("userName").value;
            //将input的值放入div中
            document.getElementById("dt").innerHTML = name;
        }
    </script>
</body>

2.操作元素属性

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

3.操作元素样式

（1）操作style属性

元素对象的样式，可以直接通过“元素对象.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>

（2）操作className属性

在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为“元素对象.className”。访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>
<body>
    <div class="first">西安邮电大学</div>
    <script>
        //1.获取元素
        var div = document.querySelector("div");
        //2.注册事件
        div.onclick = function(){
            this.className = "change";
        }
    </script>
</body>