DOM学习Day2之获取元素

最新推荐文章于 2024-03-07 09:00:00 发布
最新推荐文章于 2024-03-07 09:00:00 发布
阅读量48 收藏
点赞数
分类专栏： DOM学习 文章标签： js dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50847715/article/details/112297694
版权

获取元素

根据ID获取

  • 使用getElementByld() 方法获取带有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>
</head>
<body>
    <div id='time'>2019-9-9</div>
    <script>
        // 1.因为我们的文档页面从上往下加载，所以先得有标签，因此，我们把script写到标签下面
        // 2.get（获得）element（元素）by （通过） 驼峰命名法
        // 3.参数 ID是大小写敏感的字符串
        var timer = document.getElementById('time');
        console.log(timer);// 返回 <div id='time'>2019-9-9</div>
        console.log(typeof timer);// 返回object（一个元素对象）
        // 5.打印返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>
</html>

根据标签名获取

  • 使用getElementByTagName() 方法可以返回带有指定标签名的对象的集合
<!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>
    <ul>
        <li>咚咚咚咚咚1</li>
        <li>咚咚咚咚咚2</li>
        <li>咚咚咚咚咚3</li>
        <li>咚咚咚咚咚4</li>
        <li>咚咚咚咚咚5</li>
    </ul>
    <script>
        // 1. 返回的是获取过来元素对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(typeof lis);// 返回object
        console.log(lis[0]);// 返回 <li>咚咚咚咚咚1</li>
        // 2. 依次打印里面的对象
        for (var i = 0;i < lis.length;i++) {
            console.log(lis[i]);
        }
    </script>
</body>
</html>

  • 注意：

    1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就要遍历
    2. 得到元素对象是动态的
    3. 如果页面中这个元素只有一个，返回的还是伪数组的形式
    4. 如果页面中没有这个元素，返回的是空的伪数组的形式

  • 获取某个元素（父元素）内部所有指定标签的子元素

<!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>
    <ul>
        <li>咚咚咚咚咚1</li>
        <li>咚咚咚咚咚2</li>
        <li>咚咚咚咚咚3</li>
        <li>咚咚咚咚咚4</li>
        <li>咚咚咚咚咚5</li>
    </ul>
    <ol>
        <li>咚咚咚咚咚1</li>
        <li>咚咚咚咚咚2</li>
        <li>咚咚咚咚咚3</li>
        <li>咚咚咚咚咚4</li>
        <li>咚咚咚咚咚5</li>
    </ol>
    <script>
        var ol = document.getElementByTagName('ol');// [ol]
        console.log(ol[0].getElementByTagName('li'));
    </script>
</body>
</html>
  • 注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

通过 HTML 新增的方法获取

  • 使用document.getElementClassName(‘类名’) 根据类名返回元素集合
<!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 class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 1. 使用document.getElementClassName('类名') 根据类名返回元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
    </script>
</body>
</html>
  • 使用document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
<!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 class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 2. 使用document.querySelector('选择器') 根据指定选择器返回第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox); // 返回 <div class="box">盒子1</div>
        var nav = document.querySelector('#nav');
        console.log(nav); // 返回
    </script>
</body>
</html>
  • 使用document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象
<!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 class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 3. 使用document.querySelectorAll('选择器') 根据指定选择器返回所有元素对象
        var allBox = document.querySelectorAll('.box');
        console.log(allBox); // 返回 NodeList(2) [div.box, div.box]
    </script>
</body>
</html>

获取特殊元素（body，html）

<!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>
    <script>
        // 1.获取 body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        // 2.获取 html 元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
</html>
Ishaq Li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python学习 Day31 DOM
ShengXIABai的博客
03-28 404
DOM 一、节点树 概述：节点即为标签。节点之间的这种关系，我们称之为“节点树” DOM【document object model】文档对象模型，可以理解为是整个节点树最外层的“根元素” DOM其实就是JS语言中内置引用类型document对象，DOM对象经常用来操作节点（标签） 比如操作节点样式、属性 二、DOM属性 DOM官方给我们提供很多属性、方法。用来操作节点树上面的节点 四个属性：documentElement、head、title、body //DOM：其实就是内置document
前端学习 day9 : DOM操作,获取DOM元素,绑定事件,修改属性
whosedad的博客
11-21 531
1.DOM操作 1.1 啥是DOM 事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了...
day12 bom dom 事件 获取元素
weixin_44304606的博客
09-25 127
Web API BOM DOM Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console....
前端学习day13-DOM：获取元素的内容，元素的属性，点击事件，添加元素
qq_45926448的博客
06-30 1658
.获取标签的内容，获取元素自带的属性，获取元素自定义属性，点击事件 ,添加元素
DOM元素 DAY18
weixin_67135247的博客
04-22 1033
一、操作元素 1、*innerHTML：获取和设置元素的内容，并且识别标签——没有兼容性问题，老IE也支持。 获取：elem.innerHTML；——往往用于判断 设置：elem.innerHTML="新内容" ——添加/修改 2、textContent: 获取 和 设置元素的文本，不能识别标签—— 有兼容性问题，老IE不支持。 获取：elem.texContent; ——往往用于判断 设置：ele...
day03--01_获取DOM元素
幸福有多远
08-14 191
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- <App></App>...
JavaScript应用（day01:DOM获取&属性操作）
weixin_51591826的博客
12-14 1119
JS应用中DOM获取&属性操作
Day1 DOM元素
2301_76534754的博客
03-07 837
（1）Web API 作用和分类作用：就是使用 JS 去操作 html 和浏览器分类：DOM（文档对象模型）BOM（浏览器对象模型）（2）什么是DOMDOM（Document Object Model —— 文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能DOM作用：开发网页内容特效和实现用户交互（3）DOM树DOM树是什么：将 html 文档以树状结构直观的表现出来，我们称之为文档树或DOM树。
简记vue点击获取dom元素
qq_43060570的博客
03-08 1082
简记vue点击获取dom元素
学习 Python 的Day17,DOM操作
qq_67780151的博客
07-13 480
DOM的基础操作
dom-day01
02-08
通过`getComputedStyle`获取元素的计算样式，或者使用`style`属性直接修改内联样式，可以实现基于JavaScript的动态布局效果。 总的来说，"DOM-day01"的学习内容涵盖了DOM的基本概念、节点操作、事件处理、性能优化...
dom基础_day3.zip
06-13
2. `getElementsByClassName()`和`getElementsByTagName()`: 分别根据类名和标签名获取元素集合。 3. `querySelector()`和`querySelectorAll()`: 更灵活的选择元素，支持CSS选择器。 4. `appendChild()`, `...
VUE-2.X学习笔记day8
04-30
在Vue 2.x的学习过程中，第八天的笔记主要聚焦于框架的核心特性和实践技巧，旨在深化开发者对Vue的理解和应用能力。以下是一些关键的知识点： 1. **组件化**：Vue的核心特性之一就是组件化，它允许我们将复杂的UI...
ajax-day01.rar_达内开发学习笔记
09-20
综上所述，“ajax-day01”的学习笔记应该涵盖了Ajax的基本概念、XMLHttpRequest的使用、数据格式的选择、DOM操作、以及一些实践示例。通过深入学习这些内容，开发者可以开始构建自己的异步Web应用，提升用户体验。
day2(1)_javascript_
10-02
9. **DOM操作**：理解Document Object Model（DOM）并学会通过JavaScript操作DOM元素，包括添加、删除、修改元素，以及获取元素的属性和样式。 10. **AJAX**：了解异步JavaScript和XML的核心概念，如何通过...
前端分析-202307110039
最新发布
07-29
前端分析-202307110039
Oracle中文基础PPT
07-29
Oracle中文基础PPT 虽然是10g，但是学习Oracle，10g版本没问题 Less01_DB_Architecture_MB3.ppt Less02_Installation_MB3.ppt Less03_DB_DBCA_MB3.ppt Less04_Instance_TB3.ppt Less05_Storage_TB3.ppt Less06_Users_MB3.ppt Less07_Schema_TB3.ppt Less08_Data_TB3.ppt Less09_Undo_TB3.ppt Less10_Security_MB3.ppt Less11_Network_MB3.ppt Less12_ProactiveM_MB3.ppt Less13_Performance_TB3.ppt Less14_BR_Concepts_MB3.ppt Less15_Backups_TB3.ppt Less16_R
【创新未发表】Matlab实现粒子群优化算法PSO-Kmean-Transformer-BiLSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Java项目：基于SSM框架实现的公务员培训机构管理系统【ssm+B/S架构+源码+数据库+开题+任务书+毕业论文】
07-29
一、项目简介 本项目是一套基于SSM框架实现的公务员培训机构管理系统 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.7 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，js 三、系统功能 系统登录角色包括管理员、考生、在职公务员 后台主要功能包括： 个人中心 修改密码 个人信息 在职公务员管理 考生管理 管理员信息 讲师管理 备考课程管理 基础数据管理 单位管理 公告类型管理 课程类型管理 在职培训课程管理 公告管理 轮播图管理等功能 前台主要功能包括： 用户登录 用户注册 首页 备考课程展示 课程详情 立即预订 讲师展示 公告信息 个人中心 备考课程预订 在职培训课程预订 余额充值 在职培训课程 跳转到后台等功能
XML文档对象模型DOM详解
在实际编程中，开发者可以使用DOM提供的API，如`getElementsByTagName`、`getAttribute`、`appendChild`、`removeChild`等，来查找、获取、添加或删除XML文档中的特定元素和属性。例如，通过`getElementsByTagName`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值