当前位置: 首页 > article >正文

HTML之JavaScript DOM操作元素(1)

HTML之JavaScript DOM操作元素(1)

            3.对元素进行操作
                1.操作元素的属性   元素名.属性名 = ""
                2.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换
                3.操作元素的文本   元素名.innerText   只识别文本
                                  元素名.innerHTML   识别文本的同时可以识别HTML代码
                4.增删元素 (见下一篇文章)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小标题</title>
    <script>
        /*
        步骤:
            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.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换
                3.操作元素的文本   元素名.innerText   只识别文本
                                  元素名.innerHTML   识别文本的同时可以识别HTML代码
                4.增删元素

        */
        // 操作属性
        function op_attribute() {
            var v1 = document.getElementById("text1");
            // 语法:元素.属性名 = ""
            // 获得属性值
            console.log(v1.type)
            console.log(v1.value)
            v1.type = "button"
            v1.value = "变为按钮"

        }
        // 操作样式
        function op_Style() {
            var v2 = document.getElementById("text1")
            // 语法: 元素.style.样式名 = ""
            v2.style.color = "green";
            v2.style.borderRadius = "30px"; // 在css中用横线 - 连接的样式名在js中要采用驼峰式命名 eg:border-radius  -> borderRadius
        }
        // 操作文本
        function op_Text() {
            var v3 = document.getElementById("div01")
            // 语法  元素名.innerText   只识别文本
            //    or 元素名.innerHTML   识别文本的同时可以识别HTML代码
            console.log(v3.innerText)
            console.log(v3.innerHTML)
            v3.innerText = "你好"
            v3.innerText = "<h1>你好</h1>"
            v3.innerHTML = "<h1>你好</h1>"
        }
    </script>
    <style>
        #text1 {
            color: red;
        }
    </style>
</head>

<body>
    <input id="text1" type="text" value="hello">
    <hr>
    <button onclick="op_attribute()">操作属性</button>
    <button onclick="op_Style()">操作样式</button>
    <button onclick="op_Text()">操作文本</button>
    <div id="div01">
        hello
    </div>
</body>

</html>

http://www.kler.cn/a/559409.html

相关文章:

  • react路由总结
  • 2025保险与金融领域实战全解析:DeepSeek赋能细分领域深度指南(附全流程案例)
  • 波兰发布世界首个双足肌肉骨骼机器人,细节高度模拟人类生物特征
  • Jenkins 创建 Node 到 Windows
  • Qt 中集成mqtt协议
  • Linux 命令大全完整版(10)
  • 超级详细Spring AI运用Ollama大模型
  • 算法随笔_57 : 游戏中弱角色的数量
  • ES6 新特性,优势和用法?
  • 基于契约理论的竞争性组织数据共享安全激励机制matlab模拟与仿真
  • kube-proxy有什么作用?
  • 市场趋势中突破确认的多维度判断方法
  • uniapp实现移动端剪切板小功能
  • 【精调】LLaMA-Factory 快速开始2: Meta-Llama-3.1-8B-Instruct中文数据集
  • 基于范围选择的进化多目标优化PESA-II-可用于(汽车发动机多目标优化设计/飞机机翼多目标外形优化/电动汽车充电设施布局优化)
  • 【论文解读】《Training Large Language Models to Reason in a Continuous Latent Space》
  • Java即时通讯系统源码 - 仿QQ聊天-SpringBoot后台-JavaSwing桌面前端
  • 《操作系统 - 清华大学》 8 -5:进程管理:进程生命周期管理
  • [HOT 100] 2439. 最小化数组中的最大值
  • pikachu靶场搭建教程