前端基础（十九、DOM 获取、修改DOM）

最新推荐文章于 2024-05-13 14:00:02 发布
最新推荐文章于 2024-05-13 14:00:02 发布
阅读量252 收藏
点赞数
分类专栏： 前端学习 文章标签： dom dom操作 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45689821/article/details/113814913
版权

十九、DOM获取、修改DOM

DOM（文档对象模型）

前言

DOM是文档对象模型的缩写。通过DOM，JS能访问和改变HTML中的所有元素，DOM模型被结构化为对象树:
对象树

通过这个对象模型，我们可以在JS中对HTML元素和属性进行增加、修改和删除，对CSS样式进行修改，还可以增加HTML事件，并作出反应等。

获取DOM

获取DOM元素常用的方法如下：

  • document.getElementById("xx")：通过id获取
  • document.getElementsByClassName("xx")[number]：通过类名获取
    • 通过类名获取时，获取到的是同一类名的数组，若要取到准确的某个元素，需要加角标
  • document.getElementsByTagName("xx")[number]：通过标签名获取
    • 同上
  • document.getElementsByName("xx")[number]：通过名字获取
    • 同上
    • 通过名字获取仅可以在img和input标签中使用
<body>
    <img src="./image/cat2.jpg" alt="" name="cat" class="imgs" id="img1">
    <script>
        //var oImg = document.getElementById("img1");
        //var oImg = document.getElementsByClassName("imgs")[0];
        //var oImg = document.getElementsByTagName("img")[0];
        var oImg = document.getElementsByName("cat")[0];
        console.log(oImg);
        //均输出  <img src="./image/cat2.jpg" alt name="cat" class="imgs" id="img1">
    </script>
</body>

修改DOM

修改DOM内容

  • innerText
  • innerHtml

二者均能修改DOM内容，但不同的是，innerHtml能识别里面的HTML标签，但innerText仅能修改文字内容，无法识别HTML标签：

        var oDiv1 = document.getElementById("div1");
        oDiv1.innerText = "World";
        //输出 World
        oDiv1.innerHTML = "Hello";
        //输出 Hello
        oDiv1.innerText = "<h1>World</h1>";
        //输出  <h1>World</h1>
        oDiv1.innerHTML = "<h1>World</h1>";
        //输出带h1标签样式的  World

修改DOM样式

  • style.样式属性
        oDiv1.style.width = "300px";
        oDiv1.style.height = "300px";
        oDiv1.style.backgroundColor = "lightblue";
        oDiv1.style.textAlign = "center";
        oDiv1.style.lineHeight = "300px";

修改样式属性后：
修改样式属性
(๑′ᴗ‵๑)爱你❤

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.2.15

小鱼干儿er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十三、前端基本功：DOM练习.rar
05-30
在前端开发领域，DOM（Document Object Model）是网页内容的结构化表示，它是一个标准的树型模型，...同时，DOM也是学习其他前端框架，如React、Vue等的基础，理解并熟练运用DOM是成为一名优秀前端开发者的关键步骤。
Javascript Dom元素获取和添加详解
10-16
DOM元素的获取和添加是前端开发中的基础操作，对于创建交互式网页至关重要。 1. **DOM元素的获取** - `getElementById()`：这个方法通过指定的id值获取唯一匹配的DOM元素。例如，`document.getElementById('myID'...
jquery 给类名元素添加行内样式_前端系列——获取页面中的DOM元素
weixin_39631767的博客
11-21 276
这里就聊一下获取页面中DOM元素最基本的两种方法：document.getElementById.在整个页面中通过元素的Id属性值来获取到这个元素对象，getElementById是获取元素的方法，而document是获取元素的范围，我们也将此范围称为“上下文”。注意：通过此方法获得的元素是一个对象数据类型的值(里面包含很多内置的属性)，如下图。下面分析一下包含的这些属性：classname:存储...
菜鸟看前端（js获取DOM）
weixin_45891146的博客
01-19 218
js操作dom,获取盒模型大小 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 500px; height: 100px; background-color: #0088dd; } </s
2024年前端最新JavaScript之DOM(一)(获取元素、事件基础、操作元素），2024年最新字节跳动前端算法面试题
最新发布
2301_82244607的博客
05-13 995
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总。
前端基础(七)_DOM元素获取（getElementById、getElementsByTagName、getElementsByClassName、querySelector等）
见贤思齐焉，见不贤内自省
01-06 4968
DOM元素获取（getElementById、getElementsByTagName、getElementsByClassName、querySelector等）
前端小知识(一)：获取 DOM 元素的方法
Dwa_ww的博客
12-06 476
获取 DOM 元素的方法
javascript - DOM
weixin_42235173的博客
06-02 180
DOM的概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 DOM又称为文档树模型 文档：一个网页可以称为文档 节点：网页中的所有内容都是节点（标签、属性、文本、注释等） 元素：网页中的标签 属性：标签的属性 DOM经常进行的操作 获取元素 动态创建元素 对元素进行操作(设置其属性或调用其方法) 事件(什么时机做相应的操作
html.rar_dom基础学习
09-21
DOM，全称 Document Object Model，即文档对象模型，是W3C组织定义的一个标准，它为HTML和XML文档提供了...对于前端开发者来说，DOM基础是不可或缺的技能之一，深入理解并熟练运用DOM将极大地提升开发效率和代码质量。
JavaScript学习笔记之DOM基础操作实例小结
12-08
总结，JavaScript DOM基础操作是前端开发的基础技能，理解和熟练运用子节点、父节点以及相关属性和方法，对于创建动态、响应式的Web应用至关重要。通过不断实践和学习，你可以逐步提高在这方面的专业能力。
DOM基础及DOM操作HTML
08-04
**DOM基础** DOM，全称为Document Object Model，中文译为文档对象模型，是W3C组织制定的一个标准，用于表示XML或HTML文档的一种结构化表示方式。DOM将整个文档视为一个由节点组成的树形结构，其中每个节点代表文档...
JavaScript之DOM(一)(获取元素、事件基础、操作元素）
2401_84433570的博客
04-26 851
H5规定自定义属性data-开头做为属性名并且赋值。比如或者使用 JS 设置**《350页前端校招面试题精编解析大全》**内容大纲主要包括HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】H5规定自定义属性data-开头做为属性名并且赋值。比如或者使用 JS 设置**《350页前端校招面试题精编解析大全》**内容大纲主要包括。
前端（十四）——DOM节点操作手册：你需要了解的一切
杜永康的博客
08-24 3587
DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。
js 获取html dom元素的方式
全易
10-28 366
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
如何使用前端DOM操作制作一个便签：
weixin_54681929的博客
04-27 851
大
Web前端开发笔记37——DOM元素获取
DRLDER的博客
05-01 134
1.文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
Vue 获取dom元素宽高，给el-table表格设置动态高度:height；最大高度:max-heigh
热门推荐
林中明月间丶
06-04 1万+
https://www.jianshu.com/p/371659eb1fe3 //获取table的宽度 :style="'width:'+dataWidths+'px'" letdataWidth=this.$refs.tab1.offsetWidth;//offsetHeight
Javascript-获取DOM元素的五种方法
Ass12454548的博客
01-15 3999
简介本文主要介绍通过JS获取DOM元素的五种方法:1.根据id名获取元素:getElementById;2.根据标签名获取元素:getElementsByTagName,返回一个数组;3.根据类名获取元素:getElementsBClassName,返回一个数组;4.根据name属性获取元素:getElementsByName,返回一个数组;5.根据选择器获取元素:1.querySelector:获取一个元素,推荐使用,用法类似写css;
JS-获取DOM元素的五种方法
weixin_43937466的博客
09-04 1万+
根据id名获取元素：getElementById;根据标签名获取元素：getElementsByTagName，返回一个数组；根据类名获取元素：getElementsByClassName，返回一个数组；根据name属性值获取元素：getElementsByName，返回一个数组；根据选择器获取元素：querySelector：获取一个元素，推荐使用 用法类似写css；querySelectorAll：返回一个元素数组。more。
前端基石：DOM与BOM详解及其应用
DOM（Document Object Model）和BOM（Browser Object Model）是Web开发中的两个核心概念，对于前端开发者来说，它们是理解和操作网页结构与行为的基础工具。本文将对这两个模型进行详尽的介绍和阐述。 首先，DOM是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值