JavaScript基础(24)_dom查询练习(一)

news2024/11/25 20:18:31
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../browser_default_style/reset.css">
    <title>dom查询练习一</title>
    <style>
        .text {
            width: 380px;
            height: 500px;
            margin: 20px 0px 0px 20px;
            border: 1px black solid;
        }

        p {
            margin: 10px 0px 5px 10px;
        }

        li {
            float: left;
            background-color: aquamarine;
            list-style-type: none;
            font-size: smaller;
            margin: 5px 3px 5px 10px;
            padding: 3px;
        }

        #name,
        #sex,
        button,
        input {
            margin-left: 10px;
        }

        button {
            margin-top: 5px;
        }
    </style>
    <script>
        window.onload = function () {
            // 为按钮1绑定事件,通过 "类名" 获取 "某一个对象" 时记得带上数组下标【0】
            var btn1 = document.getElementsByClassName("btn1")[0];
            btn1.onclick = function () {
                var kongque = document.getElementById("kongque");
                alert(kongque.innerHTML);
            }

            // 为按钮2绑定事件
            var btn2 = document.getElementsByClassName("btn2")[0];
            btn2.onclick = function () {
                // 获取一组类数组对象
                var text_list = document.getElementsByTagName("li");
                for (i = 0; i < text_list.length; i++) {
                    alert(text_list[i].innerHTML);
                }
            }

            // 为按钮3绑定事件
            var btn3 = document.getElementsByClassName("btn3")[0];
            btn3.onclick = function () {
                // 获取 “紧挨着类名为question1下一个兄弟元素ul的子元素li”
                var title1_list = document.querySelectorAll(".question1 + ul > li");
                for (i = 0; i < title1_list.length; i++) {
                    alert(title1_list[i].innerHTML);
                }
            }

            // 为按钮4绑定事件
            var btn4 = document.getElementsByClassName("btn4")[0];
            btn4.onclick = function () {
                var title1 = document.getElementsByClassName("question1")[0];
                //  注意:以下方式也行,不过下一个兄弟节点只是空白文本节点,所以是下下一个。
                // var title1_list = title1.nextSibling.nextSibling.children;

                // 获取 “紧挨着类名为question1下一个兄弟元素ul的子元素li”
                var title1_list = title1.nextElementSibling.children;
                for (i = 0; i < title1_list.length; i++) {
                    // 等价于:alert(title1_list[i].firstChild.nodeValue);
                    alert(title1_list[i].innerHTML);
                }
            }

            // 为按钮5绑定事件
            var btn5 = document.getElementsByClassName("btn5")[0];
            btn5.onclick = function () {
                var title5_list = document.getElementsByName("sex");
                for (i = 0; i < title5_list.length; i++) {
                    alert(title5_list[i].value);
                }
            }

            // 为按钮6绑定事件
            var btn6 = document.getElementsByClassName("btn6")[0];
            btn6.onclick = function () {
                var title4_text = document.getElementsByTagName("input")[0];
                alert(title4_text.value);
            }

            // 为按钮7绑定事件
            var btn7 = document.getElementsByClassName("btn7")[0];
            btn7.onclick = function () {
                var title4_text = document.getElementsByTagName("input")[0];
                title4_text.value = "张三";
                alert(title4_text.value);
            }

        }
    </script>
</head>

<body>
    <div class="text">
        <p class="question1">1、你喜欢哪个动物?</p>
        <ul>
            <li>小猫</li>
            <li>公鸡</li>
            <li id="kongque">孔雀</li>
            <li>兔子</li>
        </ul>
        <br><br>
        <p class="question2">2、你喜欢哪个城市?</p>
        <ul>
            <li>北京</li>
            <li>广州</li>
            <li>上海</li>
            <li>武汉</li>
        </ul>
        <br><br>
        <p class="question3">3、你喜欢哪项运动?</p>
        <ul>
            <li>羽毛球</li>
            <li>跳水</li>
            <li>体操</li>
            <li>篮球</li>
        </ul>
        <br><br>
        <form action="">
            <p>4、您的姓名是:</p>
            <input type="text" id="username" value="">
            <p>5、您的性别是:</p>
            <input type="radio" name="sex" value="man">男
            <input type="radio" name="sex" value="woman">女
        </form>
        <br>
        <button class="btn1">通过 "id属性" 为参数,查找题目1中第三个选项</button>
        <br>
        <button class="btn2">通过 "标签名" 为参数,查找文档中所有列表选项</button>
        <br>
        <button class="btn3">通过 "css选择器" 为参数,查找题1中所有列表选项</button>
        <br>
        <button class="btn4">通过 "元素节点"为对象,查找题1中所有列表选项</button>
        <br>
        <button class="btn5">通过 "name属性" 为参数,查找题5有关性别的选项</button>
        <button class="btn6">获取题4中的文本内容</button>
        <button class="btn7">设置题4中的文本内容为 "张三"</button>
    </div>
</body>
</html>

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

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

相关文章

c语言:求1-100的奇数和|练习题

一、题目 求1-100以内的奇数和 二、代码截图【带注释】 三、源代码【带注释】 #include <stdio.h> //思路分析 //1、一个除以2&#xff0c;除不尽的&#xff0c;便是奇数 //设计常量N为100&#xff0c;常量随时可以变动 #define N 100 int main() { int sum0;//设…

【Python】不一样的Ansible(一)

不一样的Ansible——进阶学习 前言正文概念Ansible CorePlugins和Modules 插件插件类型编写自定义插件基本要求插件选项文档标准编写插件 添加一个本地插件注册为内置插件指定插件目录 其他一些技巧更改Strategy 结语 前言 Ansible 是一个极其简单的 IT 自动化引擎&#xff0c…

MISRA C 解读

说明&#xff1a;本文由vector官方视频整理而来&#xff0c;原视频链接解读MISRA C_哔哩哔哩_bilibili 1、MISRA 简介 1.1 发起 MISRA (The Motor Industry Software Reliability Association ) 汽车工业软件可靠性联会&#xff0c;起先作为研究车载嵌入式软件制备准则的开发…

FFmpeg读取Assets资源文件

在Android开发中我们经常把原生资源文件放在assets目录下以供需要时读取&#xff0c;通过API提供的resources.assets.open(filename)/openFd(filenam)方法可以非常方便获得InputStream或FileDescriptor&#xff08;文件标识符&#xff09;&#xff0c;但是在使用FFmpeg读取Asse…

CTF-PWN-沙箱逃脱-【seccomp和prtcl-1】

文章目录 啥是seccomp#ifndef #define #endif使用使用格式 seccomp无参数条件禁用系统调用有参数条件禁用系统调用 prctl实例 seccomp_export_bpf 啥是seccomp 就是可以禁用掉某些系统调用&#xff0c;然后只能允许某些系统调用 #ifndef #define #endif使用 #ifndef #defin…

Neo4j恢复

主要记录从备份文件中恢复Neo4j 误删数据 为了模拟误删除场景&#xff0c;我们查询Person&#xff0c;并模拟误操作将其进行删除&#xff1b; match(p:Person) return p Step1&#xff1a; 关闭服务 Step2&#xff1a; 恢复数据 找到Neo4j的数据文件夹&#xff0c;我的安…

Linux第18步_安装“Ubuntu系统下的C语言编GCC译器”

Ubuntu系统没有提供C/C的编译环境&#xff0c;因此还需要手动安装build-essential软件包&#xff0c;它包含了 GNU 编辑器&#xff0c;GNU 调试器&#xff0c;和其他编译软件所必需的开发库和工具。本节用于重点介绍安装“Ubuntu系统下的C语言编译器GCC”和使用。 1、在安装前…

矢量,矢量化的梯度下降以及多元线性回归

一、矢量 定义&#xff1a;按照特定顺序排列的元素集合。可以被视为一维数组。 在机器学习中的作用&#xff1a; 特征表示&#xff1a;在机器学习任务中&#xff0c;输入数据通常以矢量的形式表示。例如&#xff0c;图像可以表示为像素值的矢量&#xff0c;文本可以表示为词…

CodeGPT,你的智能编码助手—CSDN出品

CodeGPT是由CSDN打造的一款生成式AI产品&#xff0c;专为开发者量身定制。 无论是在学习新技术还是在实际工作中遇到的各类计算机和开发难题&#xff0c;CodeGPT都能提供强大的支持。其涵盖的功能包括代码优化、续写、解释、提问等&#xff0c;还能生成精准的注释和创作相关内…

springCould中的gateway-从小白开始【9】

目录 1.&#x1f35f;网关是什么 2.&#x1f37f;gateway是什么 3.&#x1f95a;gateway能什么 4.&#x1f32d;核心概念 5.&#x1f9c2;工作流程 6.&#x1f9c8;实例 7.&#x1f953;gateway网关配置的方式 8.&#x1f373;配置动态路由 9.&#x1f9c7;pred…

软件开发和网络安全哪个更好找工作?

为什么今年应届毕业生找工作这么难&#xff1f; 有时间去看看张雪峰今年为什么这么火就明白了。 这么多年人才供给和需求错配的问题&#xff0c;在经济下行的今年&#xff0c;集中爆发。 供给端&#xff0c;大学生越来越多。需求端&#xff0c;低端工作大家不愿去&#xff0c;高…

springboot集成cas客户端

Background 单点登录SSO(Single Sign ON)&#xff0c;指在多个应用系统中&#xff0c;只需登录一次&#xff0c;即可在多个应用系统之间共享登录。统一身份认证CAS&#xff08;Central Authentication Service&#xff09;是SSO的开源实现&#xff0c;利用CAS实现SSO可以很大程…

年销5万的岚图没有爆款

作者 | 辰纹 来源 | 洞见新研社 3款车一年卖了5万台&#xff0c;这个销量不算多&#xff0c;可对于岚图来说&#xff0c;却很不容易&#xff0c;CEO卢放称这是“一场翻身仗”&#xff0c;在写给全体员工的“家信”中表达谢意&#xff0c;称是“大家的团结奋斗&#xff0c;驱动…

代码随想录刷题题Day28

刷题的第二十八天&#xff0c;希望自己能够不断坚持下去&#xff0c;迎来蜕变。&#x1f600;&#x1f600;&#x1f600; 刷题语言&#xff1a;C Day28 任务 ● 343. 整数拆分 ● 96.不同的二叉搜索树 1 整数拆分 343. 整数拆分 思路&#xff1a; 动态规划 &#xff08;1&a…

jenkins通过流水线自动部署项目(k8s部署)

参考&#xff1a;https://www.cnblogs.com/rb2010/p/16195443.html docker 拉取镜像到本地&#xff1a; docker pull docker.io/jenkins/jenkins:2.164配置卷挂载&#xff1a;使用nfs 参考&#xff1a;https://www.kuboard.cn/learning/k8s-intermediate/persistent/nfs.htm…

软考通过率真的低吗?

软考通过lv确实相对较低。软考通过lv低的原因主要有以下几点&#x1f447; ✅软考本身是计算机类别的考试&#xff0c;考试难度本身不小。 ✅报考没有条件限制&#xff0c;报考的人水平参差。弃考和零基础考生较多。 ✅不同的科目通过lv有所差异&#xff0c;初级的大致在30%&am…

如何将 element-ui 中的 el-select 默认展开

<el-form-item label"藕粉桂花糖糕" prop"state" required><el-selectref"mySelect"v-model"form.state"style"width: 280px"placeholder"请选择"><el-option label"藕粉" :value"…

二分查找(二)

点名 点名 某班级 n 位同学的学号为 0 ~ n-1。点名结果记录于升序数组 records。假定仅有一位同学缺席&#xff0c;请返回他的学号。 二分法思路&#xff1a;判断数组的值和对应的下标是否相等&#xff0c;将数组分为两个区间&#xff0c;不相等区间的最左端&#xff0c;就是…

java⽇志体系

⽇志体系 1.体系概述2.日志的使用1.上古时代的sout2.开创先驱的log4j3.搞事情的JUL4.应运⽽⽣的JCL5.再起波澜的logback6.再度⻘春的log4j2 本篇在jdk21下测试通过 1.体系概述 1.日志接口 JCL&#xff1a;Apache基⾦会所属的项⽬&#xff0c;是⼀套Java⽇志接⼝&#xff0c;之…

视频做成二维码查看?多格式视频二维码生成器的使用方法

现在音视频是工作和生活中经常需要使用的一种内容表现形式&#xff0c;很多人都通过这种方式来查看视频内容&#xff0c;比如产品介绍、使用说明、安装教程等。通过一个二维码就可以来承载视频内容&#xff0c;与传统的方式相比拥有更快的内容传播速度&#xff0c;简化用户获取…