JavaScript 学习-31.HTML DOM 修改 HTML 内容

上海-悠悠

发布于 2022-05-30 15:11:36

2.4K0

文章被收录于专栏：从零开始学自动化测试从零开始学自动化测试

前言

通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素，并且可以修改这些元素的属性和文本值修改 HTML = 改变元素、属性、样式和事件

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

innerHTML 插入文本

innerHTML 插入文本或者修改元素的文本值

    <body>
    <h1>DOM HTML 修改</h1>
    <p id="p1"></p>
    <p id="p2">hello</p>
    <script>
        //给第一个p标签加文本节点
        document.getElementById('p1').innerHTML = 'hello world!';
        //修改第二个p标签文本值
        document.getElementById('p2').innerHTML = 'world!';
    </script>
    </body>

也可以用innerHTML 获取元素的文本值

    <p id="p2">hello</p>
    <script>
        p2 = document.getElementById('p2');
        console.log(p2.innerHTML) // hello
    </script>

Attribute 属性

attributes

attributes 返回一个元素的属性数组

    <p id="p2" class="text-center">hello</p>
    <script>
        p2 = document.getElementById('p2');
        console.log(p2.attributes) // NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}
        console.log(p2.attributes["id"])  // 取值 id="p2"
        console.log(p2.attributes["class"])  // 取值 class="text-center"
    </script>

element.getAttribute()

element.getAttribute()返回指定的属性

<p id="p2" class="text-center">hello</p>
    <script>
        p2 = document.getElementById('p2');
        console.log(p2.attributes) // NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}
        console.log(p2.getAttribute('id'))  // 取值 p2
        console.log(p2.getAttribute('class'))  // 取值 text-center
    </script>

setAttribute()

setAttribute()设置或者改变指定属性并指定值

 <p id="p2" class="text-center">hello</p>
    <script>
        p2 = document.getElementById('p2');
        console.log(p2.attributes) // NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}
        p2.setAttribute('class', 'text-info')  // 设置class="text-info"
        p2.setAttribute('title', 'hello') // 设置title="hello"
        console.log(p2.attributes) // NamedNodeMap {0: id, 1: class, 2: title, id: id, class: class, title: title, length: 3}
    </script>

改变 CSS 样式

通过修改元素的style 属性修改css样式

    <p id="p2" class="text-center">hello</p>
    <script>
        document.getElementById("p2").style.color="red";
        document.getElementById("p2").style.fontSize="40";
    </script>

点击元素后修改

点击元素后修改元素的文本值，以及css样式

    <p id="p2" class="text-center" onclick="myFunc()">点我看看</p>
    <script>
        function myFunc() {
            p2 = document.getElementById("p2");
            p2.innerHTML = '你刚才点我了';
            p2.style.color="red";
            p2.style.fontSize="40";
            p2.style.background="blue";
        }
    </script>

点击前