DOM元素之更改

1.CSS基础-选择器2023-08-09 2.CSS基础-权重计算2023-08-11 3.CSS基础-文字样式2023-08-14 4.CSS基础-行和段落常用属性2023-08-15 5.CSS基础-继承性2023-08-16 6.CSS基础-盒模型2023-08-17 7.CSS基础-浮动2023-08-18 8.CSS基础-定位2023-08-21 9.CSS基础-边框和圆角2023-08-22 10.CSS基础-背景2023-08-24 11.CSS基础-2D变形2023-08-28 12.CSS基础-3D变形2023-08-30 13.CSS基础-过渡动画2023-08-31 14.JS基础-初识JavaScript2023-09-03 15.JS基础-变量2023-09-04 16.JS基础-数据类型2023-09-06 17.JS基础-表达式和运算符2023-09-07 18.JS基础-数据类型转换2023-09-08 19.JS基础-分支语句2023-09-09 20.Js基础-循环语句2023-09-11 21.Js基础-复杂数据类型之数组2023-09-12 22.Js基础-函数2023-09-13 23.Js基础-闭包2023-09-15 24.什么是DOM?2023-11-20 25.DOM操作之元素查找2023-12-26

26.DOM元素之更改2024-01-15

通常改变元素涉及三个内容

动态改变元素中的内容
动态改变元素的CSS属性值
改变元素节点的属性

改变元素中的内容

改变元素中的内容可以使用两个相关属性 innerHTML 和 innerText

innerHTML 属性可以按照HTML语法设置内容，并且浏览器可以正常按照HTML语法渲染

innerText 属性只能以纯文本的形式设置节点中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML</title>
</head>
<body>
    <div id="divBox"></div>
    <div id="divBoxText"></div>

    <script>
        var divBox = document.getElementById('divBox');

        // innerHTML 支持HTML格式
        divBox.innerHTML = '<p>第一段</p><p>第二段</p>';
    
        var divBoxText = document.getElementById('divBoxText');

        //innerText 只能以文本信息展示
        divBoxText.innerText =  '<p>第一段</p><p>第二段</p>';
</script>
</body>
</html>

改变元素节点CSS样式

前面说过，DOM是JS用来操作HTML和CSS的工具。节点对象上有一个style属性可以动态修改css样式

语法

// box 代表一个dom节点 
// style 后面跟着具体要操作的css属性，只是在这里要使用驼峰的形式编写
box.style.backgrouColor = 'green';
box.style.fontSize= '32px;'

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变元素节点CSS样式</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
</style>
</head>
<body>
    <div id="box" class="box">

        box

    </div>

    <script>

        var box = document.getElementById('box');
        box.style.backgroundColor = '#abc123'
</script>
    
</body>
</html>

改变元素节点的属性

标准的W3C规定的标签属性，元素节点对象就可以使用属性的方式直接设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更改标准元素属性</title>
</head>
<body>
    <input type="text" value="" id="textInput"/>

    <script>
        var textInput = document.getElementById('textInput');
        textInput.value = '这是内容';
</script>
</body>
</html>

其实，还有一个方法，无论是标准的W3C属性还是自定义的非标准属性，我们都可以使用一个叫 setAttribute 设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="divBox"></div>
    <script>
        var divBox = document.getElementById('divBox');
        divBox.setAttribute('number-for-div', 1);
        console.log(divBox.getAttribute('number-for-div'));
</script>
</body>
</html>