HTML之JavaScript DOM编程获取元素的方式

news/2025/2/24 10:28:39

HTML之JavaScript DOM编程获取元素的方式

html">            1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小标题</title>
    <script>html" title=javascript>javascript">
        /*
        步骤：
            1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

            3.对元素进行操作
                1.操作元素的属性
                2.操作元素的样式
                3.操作元素的文本
                4.增删元素
        */
        function fun1() {
            // 1 获得document
            // 2 通过document获得元素
            var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
            console.log(aaa)
        }
        function fun2() {
            // 根据标签名获取多个元素，返回数组
            var bbb = document.getElementsByTagName("input")
            for (i = 0; i < bbb.length; i++) {
                console.log(bbb[i])
            }
        }
        function fun3() {
            // 根据元素属性名获取元素，返回数组， 循环迭代时慎用for in 会获取到其他的东西
            var ccc = document.getElementsByName("aaa")
            for (i = 0; i < ccc.length; i++) {
                console.log(ccc[i])
            }
        }
        function fun4() {
            // 根据元素class属性名获取元素
            var ddd = document.getElementsByClassName("a")
            for (i = 0; i < ddd.length; i++) {
                console.log(ddd[i])
            }
        }
        function fun5() {
            // 先获取父元素
            var div01 = document.getElementById("div01")
            // 获取所有子元素
            var cs = div01.children // 获取全部子元素
            for (i = 0; i < cs.length; i++) {
                console.log(cs[i])
            }
            console.log(div01.firstElementChild)// 通过父元素获取第一个子元素
            console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
        }
        // 通过子元素获取父元素
        function fun6() {
            // 获取子元素
            var mmm = document.getElementById("username")
            console.log(mmm.parentElement) // 通过子元素获取父元素
        }
        // 通过当前元素获取兄弟元素
        function fun7() {
            var nnn = document.getElementById("username")
            console.log(nnn.previousElementSibling) // 获取前面的第一个元素
            console.log(nnn.nextElementSibling) // 获取后面的第一个元素
        }
    </script>
</head>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa" />
        <input type="text" class="b" id="password" name="aaa" />
        <input type="text" class="a" id="email" />
        <input type="text" class="b" id="address" />
    </div>
    <input type="text" />
    <hr>
    <input type="button" value="根据id获得指定元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun1()" id="btn01" />
    <input type="button" value="根据标签名获得多个元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun2()" id="btn02" />
    <input type="button" value="根据name属性值获取多个元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun3()" id="btn03" />
    <input type="button" value="根据class属性获取多个值" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun4()" id="btn04" />
    <hr>
    <input type="button" value="通过父元素获取子元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun5()" id="btn05" />
    <input type="button" value="通过子元素获取父元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun6()" id="btn06" />
    <input type="button" value="通过当前元素获取前面的兄弟元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun7()" id="btn07" />
    <input type="button" value="通过当前元素获取后面的兄弟元素" onclick="html" title=javascript>javascript language-html" title=javascript>javascript">fun8()" id="btn08" />
</body>
</html>

http://www.niftyadmin.cn/n/5864214.html

相关文章

deepseek_清华大学指导手册_pdf_1-5

deepseek_清华大学指导手册_pdf_1-5

deepseek_清华大学指导手册_pdf_1-5 无套路&#xff0c;无需关注&#xff0c;无需登录&#xff0c;无需app&#xff0c;直接下载&#xff1a; 下载地址 文件列表&#xff1a; 001_清华大学_DeepSeek从入门到精通.pdf 002_清华大学_DeepSeek如何赋能职场应用.pdf 003_清华大学…
阅读更多...
TCP三次握手 四次挥手：一场“确认眼神”与“礼貌告别”的对话

TCP三次握手 四次挥手：一场“确认眼神”与“礼貌告别”的对话

&#x1f31f; TCP三次握手 & 四次挥手&#xff1a;一场“确认眼神”与“礼貌告别”的对话 &#x1f31f; 一、三次握手&#xff1a;建立连接的“确认眼神” 场景&#xff1a;想象你和朋友打电话&#xff0c;如何确认对方能听到你说话&#xff1f; 过程&#xff1a; 1️…
阅读更多...
深度学习入门：从零开始理解神经网络

深度学习入门：从零开始理解神经网络

欢迎来到深度学习的世界&#xff01;如果你是初学者&#xff0c;可能会对这个领域感到既兴奋又有些迷茫。别担心&#xff0c;我会带你一步步走进这个充满魅力的领域。深度学习是人工智能领域的一个重要分支&#xff0c;它通过模拟人脑的神经网络结构来处理数据。深度学习的核心…
阅读更多...
安全面试4

安全面试4

文章目录 给的源码是ThinkPHP框架的话&#xff0c;审计起来和没有使用框架的有什么不同&#xff0c;从流程上或者从关注的点上有什么不同框架代码审计的流程无框架代码审计的流程 反序列的时候&#xff0c;unserialize()反序列一个字符串的时候&#xff0c;对象会有一些魔术方法…
阅读更多...
SpringBoot+Vue+微信小程序的猫咖小程序平台（程序+论文+讲解+安装+调试+售后）

SpringBoot+Vue+微信小程序的猫咖小程序平台（程序+论文+讲解+安装+调试+售后）

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 在当下这个高速发展的时代&#xff0c;网络科技正以令人惊叹的速度不断迭代更新。从 5G …
阅读更多...
机器学习数学通关指南——微分中值定理和积分中值定理

机器学习数学通关指南——微分中值定理和积分中值定理

前言 本文隶属于专栏《机器学习数学通关指南》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见《机器学习数学通关指南》 正文 1. 定义与核心结论 积分中值…
阅读更多...
使用Docker部署SearXNG

使用Docker部署SearXNG

SearXNG 搜索引擎 SearXNG 是一个整合了超过70个搜索服务结果的免费的私有互联网搜索引擎&#xff0c;用户不会被网站跟踪或被建立档案进行特征分析&#xff0c;良好地保障了用户的隐私。知识库可以有效地弥补大模型的知识欠缺问题&#xff0c;但依旧无法补充或弥补知识库和大…
阅读更多...
250223-Linux/MacOS如何跳过Miniconda的条款阅读，直接安装Miniconda

250223-Linux/MacOS如何跳过Miniconda的条款阅读，直接安装Miniconda

你可以通过将 -b 参数传递给 Miniconda 的安装脚本&#xff0c;来跳过条款阅读并自动同意许可条款。这样安装会自动进行到下一步的选择项。下面是具体的安装命令&#xff1a; bash Miniconda3-latest-Linux-x86_64.sh -b这里的 -b 代表“批量模式”&#xff08;batch mode&…
阅读更多...
最新文章

Copyright @ 2022~2023