DOM对象（一）——DOM对象介绍、获取元素、事件和样式操作（包括案例：仿京东显示密码 点击关闭二维码等）

最新推荐文章于 2023-08-22 00:00:00 发布
最新推荐文章于 2023-08-22 00:00:00 发布
阅读量1k 收藏 8
点赞数 2
分类专栏： JavaScript 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53619602/article/details/125773339
版权

一、DOM 介绍

1、 什么是DOM

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

​ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

2、DOM树

在这里插入图片描述

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

  • 文档：一个页面就是一个文档，DOM中使用document表示
  • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
  • 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

二、获取元素

根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

案例代码

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

案例代码

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
   
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意

  1. 因为得到的是一 个对象的集合，所以我们想要操作里面的元素就需要遍历。
  2. 得到元素对象是动态的

getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

H5新增获取元素方式

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

获取特殊元素（body，html）

  1. doucumnet. body //返回body元素对象
  1. document . documentElement
    //返回htm1元素对象

事件基础

事件概述

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

简单理解： 触发— 响应机制。

​ 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

事件三要素

  • 事件源（谁）：触发事件的元素
  • 事件类型（什么事件）： 例如 click 点击事件
  • 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

最低0.47元/天 解锁文章
芋泥丶
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript——DOM操作——Window.document对象详解
11-28
JavaScript DOM操作是Web开发中不可或缺的一部分，主要用于动态更新网页内容和与用户交互。Window.document对象是JavaScript访问HTML文档的主要接口，提供了丰富的API用于查找、修改和操作页面元素。 一、找到元素...
DOM对象
weixin_45649686的博客
01-27 4888
1.Html DOM 1.DOM是Document Object Model文档对象（网页中的标签）模型的缩写。 2.通过html DOM，可用javaScript操作html文档的所有标签。 3.DOM对象：指的是一类对象的总称。 4.DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使用面向对象的思想来操作，js中提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document对象，通过document提供的方法精确获得网页中要操作的标签。 2.
10-JavaScript的DOM对象
m0_57262196的博客
05-12 774
10-DOM 1.DOM简介 DOM，全称Document Object Model文档对象模型。 1).JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 -文档——文档表示的就是整个的HTML网页文档 -对象——对象表示将网页中的每一个部分都转换为了一个对象。 -模型——使用模型来表示对象之间的关系，这样方便我们获取对象。 2).要使用DOM来操作网页，我们需要浏览器至少得先给我一个对象才能去完成各种操作 所以浏览器已经为我们提供了一个document对象，它是
DOM（文档对象模型）
mengfanshaoxia的博客
02-15 2364
1、DOM是什么 DOM（Document Object Model，文档对象模型），是用来呈现以及与任意 HTML 或 XML文档 交互的API（Application Program Interface，应用程序接口）。DOM 是载入到浏览器中的文档 模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或 注释等等）。 DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并 与之交互。节点可以被创建，移动或修改
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 7076
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
JavaScript-DOM
03-11 261
DOM DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model ）。 DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 DOM 独立于平台和编程语言。它可...
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> <li v-on:click=say(>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ el: '#app', ... //获取点击对象 var el = event.currentTarget; al
VUE中v-on:click事件中获取当前dom元素的代码
12-29
在开发中总是忘记，特意在此记录 关键字： $event <div class=bed v-on:click=updateBed...PS：下面看下v-on:click获取当前事件对象元素 dom元素这样写: <i @click=iconToogle($event) class=iconfont icon-
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
11-22
《牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作》 jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作，提供了丰富的API和强大的选择器，使得开发者能够更高效地...
逆战班：DOM获取元素对象
01-08
DOM将整个页面视为一棵由节点组成的树，这些节点包括元素节点（Element）、属性节点（Attribute）、文本节点（Text）以及注释节点（Comment）等。在JavaScript中，我们可以通过DOM API来与页面交互，获取或修改页面...
什么是DOM对象？如何获取DOM对象？
zy1992As的博客
06-13 2280
DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
DOM对象概述
最新发布
张小鱼的博客
08-22 572
本文主要讲解DOM概述文档对象模型DOM）是 web 上构成文档结构和内容的对象的数据表示。本指南将介绍 DOM，研究 DOM 如何在内存中表示HTML文档以及如何使用 API 来创建 web 内容和应用程序。文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。
JavaScript中的DOM对象
qq_44971635的博客
03-23 2404
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
Dom（文档对象模型）
m0_61810513的博客
06-24 477
DOM
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值