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

最新推荐文章于 2023-07-13 09:22:23 发布

上海-悠悠

最新推荐文章于 2023-07-13 09:22:23 发布

阅读量489

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_27371025/article/details/125016620

版权

JavaScript 专栏收录该内容

63 篇文章 6 订阅

订阅专栏

前言

通过 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 属性

元素的属性获取和设置

方法	描述
element.attributes	返回一个元素的属性数组
element.getAttribute()	返回指定的属性值。
element.setAttribute()	设置或者改变指定属性并指定值。
element.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes()	如果元素有任何属性返回true，否则返回false。
element.removeAttribute()	从元素中删除指定的属性

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>

点击前

点击后

上海-悠悠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习-31.HTML DOM 修改 HTML 内容

前言通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素，并且可以修改这些元素的属性和文本值修改 HTML = 改变元素、属性、样式和事件修改 HTML 元素修改 HTML DOM 意味着许多不同的方面：改变 HTML 内容改变 CSS 样式改变 HTML 属性创建新的 HTML 元素删除已有的 HTML 元素改变事件（处理程序）innerHTML 插入文本innerHTML 插入文本或者修改元素的文本值 <body> &
复制链接

扫一扫