JavaScript---HTML标签的修改

是洋洋a

已于 2025-04-07 09:44:08 修改

阅读量1.1k

点赞数 14

分类专栏：前端 JavaScript 文章标签： javascript html 前端

于 2025-04-07 09:41:51 首次发布

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/147034664

版权

前端同时被 2 个专栏收录

82 篇文章

订阅专栏

JavaScript

31 篇文章

订阅专栏

一、修改HTML标签内容

1.1innerHTML

innerHTML能够识别HTML标签，会把传入的字符串解析成HTML结构

<!DOCTYPE html>
<html>

<body>
    <div id="myDiv">原始内容</div>
    <script>
        const div = document.getElementById('myDiv');
        div.innerHTML = '<p>新的 HTML 内容</p>';
    </script>
</body>

</html>

DOM效果：

1.2innerText

innertText仅处理文本内容，会忽略HTML标签

(innerText会考虑元素的样式，因此只会获得可见文本)

<!DOCTYPE html>
<html>

<body>
    <div id="myDiv">原始内容</div>
    <script>
        const div = document.getElementById('myDiv');
        div.innerText = '新的文本内容';
    </script>
</body>

</html>

DOM效果：

1.3textConetnt

textContent也用来处理文本内容，不过它不考虑元素的样式(不管是否可见)，统统返回

<!DOCTYPE html>
<html>

<body>
    <div id="myDiv">
        <p>这是一个段落。</p>
        <span style="display: none;">隐藏的文本</span>
    </div>
    <script>
        const div = document.getElementById('myDiv');
        console.log('textContent:',div.textContent); 
        console.log('innerText:',div.innerText); 
    </script>
</body>

</html>

效果：

二、修改标签属性

2.1setAttribute

setAttribute方法是一种通用的方式，用于为元素指定属性值

该方法接受两个参数，第一个参数是属性名，第二个参数是属性值

<!DOCTYPE html>
<html>

<body>
    <img id="myImage" src="old-image.jpg" alt="旧图片">
    <button onclick="changeImageAttributes()">修改图片属性</button>
    <script>
        function changeImageAttributes() {
            const img = document.getElementById('myImage');
            img.setAttribute('src', 'new-image.jpg');
            img.setAttribute('alt', '新图片');
        }
    </script>
</body>

</html>

重要：“使用setAttribute方法可以设置任何属性，包括自定义属性”
例如，可以为元素添加自定义属性：“data-custom”

const element = document.getElementById('myElement');
element.setAttribute('data-custom', '自定义属性值');

2.2直接访问属性

对于HTML标签的标准属性，可以直接通过元素对象的属性名来访问和修改

<!DOCTYPE html>
<html>

<body>
    <a id="myLink" href="old-url.html">旧链接</a>
    <button onclick="changeLinkAttributes()">修改链接属性</button>
    <script>
        function changeLinkAttributes() {
            const link = document.getElementById('myLink');
            link.href = 'new-url.html';
            link.textContent = '新链接';
        }
    </script>
</body>

</html>

重要：“直接访问属性，只能访问修改HTML标准属性”

2.3使用dataset对象操作自定义数据属性

HTML5引入了自定义数据属性(以data-开头的属性)，可以使用dataset对象来访问和修改这些属性

<!DOCTYPE html>
<html>

<body>
    <div id="myDiv" data-color-custom="red" data-size="large">带有自定义数据属性的元素</div>
    <button onclick="changeDataAttributes()">修改自定义数据属性</button>
    <script>
        function changeDataAttributes() {
            const div = document.getElementById('myDiv');
            div.dataset.colorCustom = 'blue';
            div.dataset.size = 'small';
        }
    </script>
</body>

</html>

三、修改标签样式

3.1使用style属性

element.style.property = value;

element：要修改样式的HTML元素
property：CSS属性名
value：该属性对应的值

注意：“CSS属性名在JavaScript中需要使用驼峰命名法，例如background-color要写成backgroundColor”

<!DOCTYPE html>
<html>

<body>
    <div id="myDiv">这是一个示例 div</div>
    <button onclick="changeStyle()">修改样式</button>
    <script>
        function changeStyle() {
            const div = document.getElementById('myDiv');
            div.style.color = 'red';
            div.style.fontSize = '24px';
            div.style.backgroundColor = 'yellow';
        }
    </script>
</body>

</html>

3.2操作classList

classList是一个更灵活且推荐使用的方式

常用方法：

add(class1，class2，...)：为元素添加一个或多个类
remove(class1，class2，...)：从元素中移除一个或多个类
toggle(class)：如果元素有指定的类，就移除它；如果没有，就添加它
contains(class)：检查元素是否包含指定的类

<!DOCTYPE html>
<html>

<head>
    <style>
        .highlight {
            color: white;
            background-color: blue;
            font-weight: bold;
        }

        .shrink {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="myDiv">这是一个示例 div</div>
    <button onclick="addClass()">添加类</button>
    <button onclick="removeClass()">移除类</button>
    <button onclick="toggleClass()">切换类</button>
    <script>
        function addClass() {
            const div = document.getElementById('myDiv');
            div.classList.add('highlight');
        }

        function removeClass() {
            const div = document.getElementById('myDiv');
            div.classList.remove('highlight');
        }

        function toggleClass() {
            const div = document.getElementById('myDiv');
            div.classList.toggle('shrink');
        }
    </script>
</body>

</html>

3.3动态加载CSS文件

通过创建<link>元素并将其添加到<head>中实现

<!DOCTYPE html>
<html>

<body>
    <div id="myDiv">这是一个示例 div</div>
    <button onclick="loadCSS()">加载 CSS 文件</button>
    <script>
        function loadCSS() {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'new-style.css';
            document.head.appendChild(link);
        }
    </script>
</body>

</html>

点击后，DOM效果如下：

四、替换或删除标签

4.1replaceWith

replaceWith()是现代的替换元素的方式，它允许直接用一个新元素替换当前元素

<!DOCTYPE html>
<html>

<body>
    <p id="oldParagraph">这是旧的段落。</p>
    <button onclick="replaceElement()">替换元素</button>
    <script>
        function replaceElement() {
            const oldPara = document.getElementById('oldParagraph');
            const newPara = document.createElement('p');
            newPara.textContent = '这是新的段落。';
            oldPara.replaceWith(newPara);
        }
    </script>
</body>

</html>

点击按钮后我，DOM效果为：

4.2replaceChild()

replaceChild()是传统的替换元素的方式，它需要在父元素上调用该方法来替换其子元素

<!DOCTYPE html>
<html>

<body>
    <div id="parentDiv">
        <p id="oldParagraph">这是旧的段落。</p>
    </div>
    <button onclick="replaceChildElement()">替换子元素</button>
    <script>
        function replaceChildElement() {
            const parent = document.getElementById('parentDiv');
            const oldPara = document.getElementById('oldParagraph');
            const newPara = document.createElement('p');
            newPara.textContent = '这是新的段落。';
            parent.replaceChild(newPara, oldPara);
        }
    </script>
</body>

</html>

4.3remove()

remove()是现代的删除元素方式，它允许直接从DOM中移除当前元素

<!DOCTYPE html>
<html>

<body>
    <p id="myParagraph">这是要删除的段落。</p>
    <button onclick="removeElement()">删除元素</button>
    <script>
        function removeElement() {
            const para = document.getElementById('myParagraph');
            para.remove();
        }
    </script>
</body>

</html>

4.4removeChild()

removeChild()是传统的删除元素方式，它需要在父元素上调用该方法来删除其子元素

<!DOCTYPE html>
<html>

<body>
    <div id="parentDiv">
        <p id="myParagraph">这是要删除的段落。</p>
    </div>
    <button onclick="removeChildElement()">删除子元素</button>
    <script>
        function removeChildElement() {
            const parent = document.getElementById('parentDiv');
            const para = document.getElementById('myParagraph');
            parent.removeChild(para);
        }
    </script>
</body>

</html>