操作对象_DOM进阶——HTML属性操作(对象属性)

37d26d12822eecdc73e7a9d42a8868ff.png

    上一节我们在“DOM基础”学习了对元素节点的操作,这两节介绍对属性节点的操作。

    属性节点操作有两种方式,一种是使用“对象属性”,另一种是“对象方法”。本节主要介绍“对象属性”的方式。

    对属性节点的操作涉及两种操作,分别是获取HTML属性值和设置HTML属性值。 

获取HTML属性值

用法: 

obj.attr

obj即是我们上一节获取的元素节点,attr是属性名。 

获取属性

举例: 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>获取属性title>

        <script>

            window.onload = function(){

                var oBtn = document.getElementById("btn1");

                oBtn.onclick = function(){

                    alert(oBtn.id);

                }

            }

        script>

    head>

    <body>

        <input type="button" id="btn1" class="btn2" value="获取属性" />

    body>

html>

310c7211db570fd0b380f339e11b52ea.png

    获取id用oBtn.id,获取class需要用oBtn.className,获取type用oBtn.type。   

获取文本框值

举例: 

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 type="text" id="txt"/>

        <input type="button" id="btn" value="获取文本框值" />

    body>

html>

29ce3d67679b59291efe0642a901ffc2.png 

获取单选框值

举例:

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>获取单选框值title>

        <script>

            window.onload = function(){

                var oBtn = document.getElementById("btn");

                var oKing = document.getElementsByName("king");

                oBtn.onclick = function(){

                    for(var i = 0;i < oKing.length;i++){

                        if(oKing[i].checked){

                            alert(oKing[i].value)

                        }

                    }

                }

            }

        script>

    head>

    <body>

        <div>

            <label><input type="radio" name="king" value="刘德华" checked/>刘德华label>

            <label><input type="radio" name="king" value="张学友" />张学友label>

            <label><input type="radio" name="king" value="郭富城" />郭富城label>

            <label><input type="radio" name="king" value="黎明" />黎明label>

        div>

        <input type="button" id="btn" value="获取单选框值" />

    body>

html>

daf45af2778faa3edb0b3e63b32dc427.png 

获取下拉菜单的值

举例: 

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>

        select>

        <input type="button" id="btn" value="获取下拉菜单的值" />

    body>

html>

909c44ea696aa6f718000a94fba594d3.png

    当用户选中一个option时候,该option的value值会成为select的value值。  

设置HTML属性值

用法与获取HTML属性值的方式相同。

举例: 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>设置HTML属性值title>

        <script>

            window.onload = function(){

                var oBtn = document.getElementById("btn");

                oBtn.onclick = function(){

                    oBtn.value = "button";

                }

            }

        script>

    head>

    <body>

        <input type="button" id="btn" value="获取" />

    body>

html>

没有按按钮结果图

c0e249b735e0b514c49931ac1033b12f.png

点击“获取”后

755ac26b987b6f9deec49b5393b52f45.png


本节主要学习了使用“对象属性”对属性节点操作,最后对其总结。

  • 获取HTML属性值

  • 设置HTML属性值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三级菜单数据实现,实现嵌套三级菜单数据

//将数据库中通过关联&#xff08;inner join&#xff09;查询多张表没有嵌套但有嵌套关系的数据进行处理&#xff0c;得到具有嵌套层级且嵌套的父级二级属性不可重复出现&#xff0c;具体实现如下&#xff1a;// 通过关联查询到数据库的数据&#xff08;格式&#xff09;&…

sap相关性不能被编译_经典综述编译丨生物硝化抑制丨NAT PLANTS:现代农业中的氮转化和生物硝化抑制作用...

点击蓝字↑↑↑“农作未来(FarmingFuture)”&#xff0c;轻松关注&#xff0c;农作制度研究与您同行&#xff01;编译&#xff1a;贾蓉 排版&#xff1a;王上原创微文&#xff0c;欢迎转发转载。文章信息原名&#xff1a;Nitrogen transformations in modern agriculture and …

Hadoop学习笔记(一)从官网下载安装包

Hadoop是一个分布式系统基础架构&#xff0c;由Apache基金会所开发。用户能够在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。充分利用集群的威力进行快速运算和存储。要学习Hadoop从下载安装包開始打开Hadoop的官方站点&#xff0c;点击Download Hadoop或点击“G…

版本之间如何兼容_Spring Boot 2.4 版本的系统运行要求

名字Servlet 版本Tomcat 9.04.0Jetty 9.43.1Undertow 2.04.0Spring Boot 2.4.2-SNAPSHOT 版本要求至少 Java 8 及其以上版本&#xff0c;目前最高能够支持到 Java 15 &#xff08;包含 15&#xff09;的版本。 Spring 框架&#xff08;Framework&#xff09; 5.3.2 的版本或者以…

JavaScript异步处理问题,循环处理异步任务,并拿到数据,Nodejs循环异步任务接口处理

一、问题描述及解答&#xff1a; 在Promise(异步事件)中&#xff0c;通过遍历的方式处理数据&#xff0c;最后将带有数据的Promise通过return返回&#xff0c;在async/await处理机制中的到的数据是一个空数据组[]或不完整的数据&#xff0c;如下&#xff1a; 使用定时器后数据…

C语言的一些误用和知识总结

在学习单片机的时候才真正知道C语言是什么它是来干什么的~但是C语言用到嵌入式只是它小小的一部分他的应用还有很多地方呢&#xff0c;呵呵我们这里就不讨论这个了。我们是不是在写程序的时候错误很多就算编译通过了也达不到我们预期的结果&#xff0c;完了自己是不是也很难找到…

tomcat lifecyclelistener_大公司程序员带你死磕Tomcat系列(五)——容器

死磕Tomcat系列(5)——容器回顾在死磕Tomcat系列(1)——整体架构中我们简单介绍了容器的概念&#xff0c;并且说了在容器中所有子容器的父接口是Container。在死磕Tomcat系列(2)——EndPoint源码解析中&#xff0c;我们知道了连接器将请求过来的数据解析成Tomcat需要的ServletR…

获取当前周一日期_Excel工作表中最全的时间和日期函数,效率、办公必备

在Excel工作表中&#xff0c;函数也可以分为好几类&#xff0c;今天&#xff0c;小编带大家学习时间和日期函数。一、Excel工作表日期函数&#xff1a;Date。功能&#xff1a;返回特定日期的序列号。语法结构&#xff1a;Date(年,月,日)。目的&#xff1a;将制定的“年”、“月…

win配置pm2开机自启node项目

pm2类似于nodemon,但是功能比nodemon更丰富 1.全局安装pm2&#xff0c;如果你的系统提前没有安装node环境&#xff0c;那么你可以参考博文&#xff1a;https://blog.csdn.net/weixin_46758988/article/details/117109297 &#xff1b;如果你已经全局安装过pm2&#xff0c;只是…

这样就算会了PHP么?-11

PHP中关于类的基本内容练习&#xff1a; <?phpclass SportObject{public $name;public $height;public $avirdupois;public function __construct($name, $height,$avirdupois) {$this->name $name;$this->height $height;$this->avirdupois $avirdupois;}func…

一个黑色全屏的计时器_我入手了一个1000多的智能手环,值吗?|Fitbit Charge 4测评...

入手Fitbit Charge 4了。作为一个喜欢晚上做运动的Boy&#xff0c;每次运动带着手机确实有够累赘&#xff0c;比如跑步的时候&#xff0c;掏手机看真的很麻烦&#xff0c;但手环只需抬手即可看时间、心率、步数这些&#xff0c;确实很方便。而且&#xff0c;有了手环之后&#…

python链表和树实验报告_数据结构树和森林实验报告

_树和森林应用实验实验报告实验目的(1)掌握树和森林的二叉链表表示方法。(2)掌握树和二叉树的结构及算法之间的对应关系。(3)掌握树的两种遍历算法及其应用。实验运行环境Visual C实验任务为使实验程序简洁直观&#xff0c;下面的部分实验程序中的一些功能实现仍以调用库函数程…

JavaScript,nodejs实现保留n位小数点

代码说明&#xff1a; 传入两个必传参数&#xff0c;第一个参数为需要传入的数值&#xff0c;第二个参数为小数点后有几位数 /*** 保留n位小数&#xff0c;四舍五入* param {Number} _m_ 原始数字* param {Number} _n_ 保留n位&#xff0c;默认2位* returns */function fixed(…

python没有用_你可能没有在Python3中使用但却应该使用的东西

Python部落(python.freelycode.com)组织翻译&#xff0c;禁止转载&#xff0c;欢迎转发。 由于Python EOL的发布&#xff0c;许多人开始将他们的Python版本从2切换到3。不幸的是&#xff0c;我发现大多数Python3看起来仍然像Python2&#xff0c;但是要加括号(尽管在我之前的文章…

boost库 bind/function的使用

Boost::Function 是对函数指针的对象化封装&#xff0c;在概念上与广义上的回调函数类似。相对于函数指针&#xff0c;function除了使用自由函数&#xff0c;还可以使用函数对象&#xff0c;甚至是类的成员函数&#xff0c;这个就很强大了哈 #include <boost/function.hpp&g…

10恢复出厂设置_Mac系统如何恢复出厂设置

苹果Mac电脑在什么情况下需要恢复出厂设置呢&#xff1f;例如系统数据损坏、遇到无法卸载的恶意软件、错误更新导致、或者你只是想要闲鱼出售你的Mac电脑&#xff0c;这里系统派教你Mac如何恢复出厂设置。我们先简单将恢复出厂分成两步&#xff0c;一是擦除硬盘数据&#xff0c…

微信小程序蓝牙连接硬件设备并进行通讯,小程序蓝牙因距离异常断开自动重连,js实现crc校验位

一、小程序实现搜索蓝牙&#xff1a; 注意&#xff1a;comtl是我封装的工具函数&#xff0c;无关紧要&#xff0c;实际项目中可能用不到&#xff1a; const comtl require(../../utils/commontool) const app getApp() // 拿到全局定义的变量&#xff0c;需要在app.js中&…

Java Learning Path(三)过程篇

Java Learning Path&#xff08;三&#xff09;过程篇   每个人的学习方法是不同的&#xff0c;一个人的方法不见得适合另一个人&#xff0c;我只能是谈自己的学习方法。因为我学习Java是完全自学的&#xff0c;从来没有问过别人&#xff0c;所以学习的过程基本上完全是自己…

依赖注入的三种方式_Java核心知识 Spring原理十 Spring 依赖注入四种方式

构造器注入/*带参数&#xff0c;方便利用构造器进行注入*/ public CatDaoImpl(String message){ this. message message; } setter 方法注入public class Id { private int id; public int getId() { return id; } public void setId(int id) { this.id id; } } 静态工厂注入…

闪退没由报错_关于floor()报错注入,你真的懂了吗?

0x01 简述floor报错注入也有叫group报错注入的&#xff0c;都一样&#xff0c;指的都是他们。floor报错注入我想大多数人跟我一样&#xff0c;都是会用而不明白其中的原理。这个问题困扰了在下好长时间了&#xff0c;所以决定好好研究下&#xff0c;最终产出了这篇文章。0x02 环…