DOM进阶

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

一、HTML属性操作
指的是使用JavaScript来操作一个元素的HTML属性。在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。

  • 获取HTML属性值
  • 设置HTML属性值
    1、对象属性
    （1）获取HTML属性值：obj.attr
    obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。attr是属性名，对于一个对象来说，当然是通过点运算符“.”来获取它的属性值。
<--获取静态HTML中的属性值-->
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                alert(oBtn.id);
            };
        }
    </script>
</head>
<body>
    <input id="btn" class="myBtn" type="button" value="获取"/>
</body>
</html>

浏览器运行结果如下：
在这里插入图片描述

分析：想要获得某个属性的值，首先需要使用getElementById()等方法找到这个元素节点，然后才可以获取到该属性的值。oBtn.id表示获取按钮的id属性值。同样的，想要获取type属性值可以写成oBtn.type，以此类推。

<--获取动态DOM中的属性值-->
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            //动态创建一个按钮
            var oInput = document.createElement("input");
            oInput.id = "submit";
            oInput.type = "button";
            oInput.value = "提交";
            document.body.appendChild(oInput);
            //为按钮添加点击事件
            oInput.onclick = function () 
            {
                alert(oInput.id);
            };
        }
    </script>
</head>
<body>
</body>
</html>

运行结果：
例：获取文本框的值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oTxt = document.getElementById("txt");
                alert(oTxt.value);
            };
        }
    </script>
</head>
<body>
    <input id="txt" type="text"/>
    <input id="btn" type="button" value="获取"/>
</body>
</html>

结果：
在这里插入图片描述
例：获取单选框的值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            var oFruit = document.getElementsByName("fruit");
            oBtn.onclick = function () 
            {
                //使用for循环遍历所有的单选框
                for(var i=0;i<oFruit.length;i++)
                {
                    //判断当前遍历的单选框是否选中（也就是checked是否为true）
                    if(oFruit[i].checked)
                    {
                        alert(oFruit[i].value);
                    }
                }
            };
        }
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <input id="btn" type="button" value="获取" />
</body>
</html>

在这里插入图片描述
例：获取复选框的值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            var oFruit = document.getElementsByName("fruit");
            var str = "";
            oBtn.onclick = function () 
            {
                for(var i=0;i<oFruit.length;i++)
                {
                    if(oFruit[i].checked)
                    {
                        str += oFruit[i].value;
                    }
                }
                alert(str);
            };
        }
    </script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
        <label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <input id="btn" type="button" value="获取" />
</body>
</html>

在这里插入图片描述
例：获取下拉菜单的值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            var oSelect = document.getElementById("select");
            oBtn.onclick = function () 
            {
                alert(oSelect.value);
            };
        }
    </script>
</head>
<body>
    <select id="select">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
    </select>
    <input id="btn" type="button" value="获取" />
</body>
</html>

在这里插入图片描述
（2）设置HTML属性值
语法：

obj.attr = "值";

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                oBtn.value = "button";
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" />
</body>
</html>

在这里插入图片描述

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var flag = true;
            oBtn.onclick = function () 
            {
                if (flag){
                    oPic.src = "img/2.png";
                    flag = false;
                } else {
                    oPic.src = "img/1.png";
                    flag = true;
                }
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="img/1.png"/>
</body>
</html>

在这里插入图片描述
点击“修改”后：
在这里插入图片描述

mmm要努力做码农！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript笔记（十六） DOM进阶
sliujin的博客
08-11 263
DOM进阶   DOM自身存在很多类型，在DOM基础课程中大部分都有所接触，比如Element类型：表示的是元素节点，再比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。   一．DOM类型 DOM基础课程中，我们了解了DOM的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。   DOM类型     1.Node类型 Node
【JavaScript】DOM进阶
海棠不惜胭脂色，独立蒙蒙细雨中
12-01 846
DOM进阶 一、DOM是什么？     DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。     通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项
jsDOM进阶
weixin_42380289的博客
08-26 142
1. dom 增删改查。 document.querySelector/querySelectorAll/ …/…/… dom.querySelect/querySelectAll 哪个对象调用，就是在谁的上下文内查找。 指定上下文，不影响选择器，和选择器无关。 2. 增 dom.appendChild(); 表示在dom内添加一个子元素，在最后。 dom.insertBefore( dom1,dom2 ) ； 在dom内添加一个子元素dom1，插入到dom2的前面，要声明dom2才能使用， documen
JavaScript DOM进阶方法
10-24
随着对DOM的进一步了解，开发者可以运用进阶方法来更精确和高效地操控网页。 ### DOM的类型与结构 DOM定义了不同类型的节点，每种节点都用于不同的目的： 1. **Node**：这是所有类型节点的基类接口，它在...
第20章 DOM进阶1
08-03
【第20章 DOM进阶1】主要涵盖了DOM（Document Object Model）的深入学习，包括DOM类型、DOM扩展以及DOM操作。DOM是一种编程接口，它允许程序和脚本动态更新、添加、删除和改变HTML或XML文档的结构、内容和样式。 ...
DOM进阶（获取节点）
qq_61483796的博客
08-31 490
DOM节点相关知识
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2003
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 435
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 264
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 276
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 457
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲
HGX-DJK
09-08 442
【代码】在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 112
动态在本地引入图片
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1040
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1071
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
js实现动态生成不固定数量的气泡
丁哒哒的博客
09-10 200
【代码】js实现动态生成不固定数量的气泡。
一文读懂 JS 中的 Set 结构
最新发布
沐爸的博客
09-11 579
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值