HTML之JavaScript DOM操作元素(1)

HTML之JavaScript DOM操作元素(1)

html 复制代码
            3.对元素进行操作
                1.操作元素的属性   元素名.属性名 = ""
                2.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换
                3.操作元素的文本   元素名.innerText   只识别文本
                                  元素名.innerHTML   识别文本的同时可以识别HTML代码
                4.增删元素 (见下一篇文章)
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>
        /*
        步骤:
            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>
相关推荐
DoraBigHead11 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_2 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript