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>
相关推荐
我是若尘4 分钟前
Webpack 入门到实战 - 复习强化版
前端
晓13138 分钟前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三9 分钟前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z18 分钟前
uniapp使用video实现沉浸式在线课程学习平台
前端
灋✘逞_兇36 分钟前
Node.Js是什么?
服务器·javascript·node.js
当牛作馬1 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw01 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖1 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
小飞悟2 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试