当前位置：首页 > news >正文

HTML之JavaScript DOM操作元素（1）

news 来源：原创 2025/5/1 23:54:06

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>