DOM节点的常见操作

最新推荐文章于 2024-09-02 17:34:07 发布

小白想要逆袭

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量333

点赞数 1

分类专栏：前端相关技术 # JS&ES6学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/a1498665771/article/details/128917667

版权

前端相关技术同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

JS&ES6学习

29 篇文章 0 订阅

订阅专栏

1.查找节点

document.getElementById(id)：通过元素 id 来查找元素
document.getElementsByTagName(name)：通过标签名来查找元素
getElementsByClassName(name)：通过类名来查找元素
document.querySelector(selector)：通过css选择器选择元素，无法选择伪类
document.querySelectorAll(selector)：通过css选择器选择全部元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档类的使用</title>
</head>
<body>
    
    <h1>这是一个h1标签</h1>
    <p class="fluyi">这是一个段落</p>
    <p class="fluyi">这是另一个段落</p>
    <p id="fluyi">这是另另一个段落</p>
    <script>
        var h1 = document.getElementsByTagName('h1')[0];
        console.log(h1.outerHTML);
        var p = document.querySelectorAll(".fluyi");
        console.log(p); // NodeList(2) [p.fluyi, p.fluyi]
        var p1 = document.querySelector(".fluyi");
        console.log(p1); // <p class="fluyi">这是一个段落</p>
        var p2 = document.querySelector("#fluyi");
        console.log(p2); // <p id="fluyi">这是另另一个段落</p>
    </script>
</body>
</html>

2.改变元素

element.innerHTML：改变元素的 inner HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档类的使用</title>
</head>
<body>
    
    <h1>这是一个h1标签</h1>
    <p class="fluyi">这是一个段落</p>
    <p class="fluyi">这是另一个段落</p>
    <h1 id="fluyi">这是另另一个段落</h1>
    <script>
        var p = document.getElementById("fluyi");
        p.innerHTML = '这是一个我改的段落';       
    </script>
</body>
</html>

element.attribute：改变 HTML 元素的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档类的使用</title>
</head>
<body>
    
    <h1>这是一个h1标签</h1>
    <p class="fluyi">这是一个段落</p>
    <p class="fluyi">这是另一个段落</p>
    <h1 id="fluyi">这是另另一个段落</h1>
    <script>
        var p = document.getElementById("fluyi");
        p.innerHTML = '这是一个我改的段落';
        p.id = "fluyiyi";
        console.log(p.id);
    </script>
</body>
</html>

在这里插入图片描述

element.setAttribute(attribute, value)：改变 HTML 元素的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档类的使用</title>
</head>
<body>
    
    <h1>这是一个h1标签</h1>
    <p class="fluyi">这是一个段落</p>
    <p class="fluyi">这是另一个段落</p>
    <h1 id="fluyi">这是另另一个段落</h1>
    <script>
        var p = document.getElementById("fluyi");
        p.innerHTML = '这是一个我改的段落';
        p.id = "fluyiyi";
        console.log(p.id);
        p.setAttribute('id','dd');
    </script>
</body>
</html>

在这里插入图片描述

element.style.property = new style：改变 HTML 元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档类的使用</title>
</head>
<body>
    
    <h1>这是一个h1标签</h1>
    <p class="fluyi">这是一个段落</p>
    <p class="fluyi">这是另一个段落</p>
    <h1 id="fluyi">这是另另一个段落</h1>
    <script>
        var p = document.getElementById("fluyi");
        p.style.backgroundColor = "yellow";
        p.style.color = '#fff'
    </script>
</body>
</html>

在这里插入图片描述

3.添加和删除元素

document.createElement(element)：创建 HTML 元素
document.removeChild(element)：删除 HTML 元素
document.appendChild(element)：添加 HTML 元素
document.replaceChild(element)：替换 HTML 元素
document.write(text)：可写入 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档类的使用</title>
</head>
<body>
    <h1>这是一个h1标签</h1>
    <p class="fluyi">这是一个段落</p>
    <p class="fluyi">这是另一个段落</p>
    <h1 id="fluyi">这是另另一个段落</h1>
    <script>
        var p = document.getElementById("fluyi");
        // p.style.color = '#fff'
        var div = document.createElement('div');
        div.innerHTML="这是创建的div";
        // 插入
        // document.body.append(div);
        // 插入到指定的元素中
        p.append(div);
    </script>
</body>
</html>