09 JavaScript-DOM

已于 2022-10-18 08:56:36 修改
阅读量238 收藏 1
点赞数
分类专栏： JavaWeb 文章标签： javascript
于 2022-10-13 11:42:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MengSao1001/article/details/127298482
版权
本文介绍了DOM的基本概念及其在JavaScript中的应用，详细讲解了如何通过各种属性和方法操作HTML文档中的元素，包括获取、创建、插入、替换和删除节点，以及设置CSS样式等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1. DOM结点

1.1 节点类型

1.2 childNodes属性

1.3 firstChild和lastChild

1.4 parentNode

1.5 nextSibling和previousSibling

1.6 节点名称

1.7 节点值

2. 获取元素

2.1 通过ID获取元素

2.2 通过标签名获取元素

2.3 通过类名获取元素

3. 设置和获取属性

3.1 getAttribute

3.2 setAttribute

4. 节点操作

4.1 创建节点

4.2 插入节点

4.2.1 appendChild()

4.2.2 inserBefore()

4.3 替换节点

4.4 删除节点

4.5 赋值节点

4.6 innerHTML和innerText

4.7 设置CSS样式

5. DOM事件

5.1 事件调用方法

5.2 DOM事件

DOM是“Document Object Model”的缩写，简称为“文档对象模型”。

DOM是针对HTML和XML文档的一个API（应用程序编程接口）。

DOM描绘了一个层次化的节点树，允许开发人员添加，移动和修改页面的某一部分。

DOM定义了JavaScript操作HTML文档的接口，提供了访问HTML文档的途径以及操作方法。

DOM以“树结构”来表达HTML文档。通过JavaScript，可以重构整个HTML文档，可以添加，移动，改变，或重排页面上的内容。

1. DOM结点

在DOM中，可以把每一个元素看成一个节点，而每一个节点就是一个“对象”。

在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行操作。

1.1 节点类型

nodeType值
节点类型说明值
元素节点每个HTML标签都是一个元素节点，如<div>，<p>1
属性节点元素节点的属性，如id，class，name2
文本节点元素节点或属性节点中的文本内容（包括空白或换行）3
注释节点表示文档注释，形式为<!--注释内容-->8
文档节点表示整个文档（DOM树的根节点，即document）

9

 语法：

节点对象.nodeType

nodeType属性返回以数字表示的节点类型。

实例示范：
<!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>Document</title>
</head>
<body>
    
    <div id="demo"></div>

    <script>
        var demo = document.getElementById("demo");
        alert(demo.nodeType); // 1:元素节点  nodeType:返回以数字表示的节点类型。
    </script>
    
</body>
</html>

1.2 childNodes属性

每个节点都有一个childNodes属性。

childNodes类似数组的属性包含了当前节点全部直接子节点的集合，可以访问子节点的信息（获取所有的子节点）

语法：

节点信息.childNodes
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="demo">
        <div>子节点一</div>
        <div>子节点二</div>
        <div>子节点三</div>
    </div>

    <script>
        var demo = document.getElementById("demo");
        
        console.log(demo.childNodes);//获取所有的子节点
       
        var count = 0;
        for(var i=0; i<demo.childNodes.length; i++){
            if(demo.childNodes[i].nodeType==1){ //判断是否是元素节点
                count++;
            }
        }
        console.log(count); 
        
    </script>

</body>
</html>

1.3 firstChild和lastChild

通过firstChild和lastChild来获得第一个元素和最后一个元素。

语法：

节点对象.firstChild/lastChild
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="demo">
        <div>子节点一</div>
        <div>子节点二</div>
        <div>子节点三</div>
    </div>

    <script>
        var demo = document.getElementById("demo");
        console.log("第一个子节点："+demo.firstChild); //文本类型
        console.log("第一个子节点类型："+demo.firstChild.nodeType); // 3
        console.log("最后一个子节点："+demo.lastChild); //文本类型
        console.log("最后一个子节点类型:"+demo.lastChild.nodeType); // 3
    </script>

</body>
</html>

1.4 parentNode

获取已知节点的父节点。

语法：

节点对象.parentNode
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="demo"></div>

    <script>
        var demo = document.getElementById("demo");
        console.log("父节点："+demo.parentNode); // body [object HTMLBodyElement]
        console.log("父节点类型："+demo.parentNode.nodeType); // 1 元素节点
    </script>


</body>
</html>

1.5 nextSibling和previousSibling

 nextSibling：获取上一个兄弟节点；previousSibling：获取下一个兄弟节点；如果不存在相应节点，返回null。

兄弟节点是指具有相同父节点的那些节点。

语法：

节点对象.previousSibling/nextSibling
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="p1">
        <div>上一个兄弟节点</div>
        <div id="p2">当前节点</div><div>下一个兄弟节点</div>
    </div>

    <script>
        var p2 = document.getElementById("p2");
        console.log("上一个兄弟节点："+p2.previousSibling); // [object Text]
        console.log("上一个兄弟节点类型："+p2.previousSibling.nodeType); // 3
        console.log("下一个兄弟节点："+p2.nextSibling); // [object HTMLDivElement]
        console.log("下一个兄弟节点类型："+p2.nextSibling.nodeType); // 1

    </script>
    
</body>
</html>

1.6 节点名称

节点名称是DOM节点的名字，不同类型的节点对应不同的节点名称。

nodeName属性以字符串形式返回节点名称。

nodeName属性是只读属性，不能修改它的值。

nodeName返回元素名称时，并不包括HTML源代码里使用的尖括号<>。

nodeName属性返回的值
节点类型节点名称
元素节点HTML标签的名称（大写）
属性节点属性的名称
文本节点它的值永远死“#text”
文档节点它的值永远是“#document”

语法：

节点对象.nodeName
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="demo">我是文本节点</div>

    <script>
        var demo = document.getElementById("demo");
        console.log("<div>标签的节点名称："+demo.nodeName); // 返回节点名称 DIV
        console.log("<div>标签内文本节点的节点名称："+demo.firstChild.nodeName); // 获取第一个节点 返回节点名称 #text
        console.log("文档节点的节点名称："+document.nodeName); // 文档节点名称：#document
    </script>

</body>
</html>

1.7 节点值

DOM节点的node Value属性返回保存在节点里的值，一般用于返回文本节点里的内容。

语法：

节点对象.nodeValue
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="demo">我是文本节点</div>

    <script>
        var demo = document.getElementById("demo");
        console.log("文本节点的节点值："+demo.firstChild.nodeValue); //返回节点的内容：我是文本节点
    </script>

</body>
</html>

2. 获取元素

在操作一个DOM节点前，需要通过各种方式先拿到DOM节点。

获取元素的三种方法：通过元素ID，通过标签名字，通过类名类获取。

2.1 通过ID获取元素

getElementById()方法是document对象特有的函数。

ID在HTML文档中是唯一的，所以getElementById()可以直接定位唯一的一个DOM节点。

语法：

document.getElementById(HEML标签的id属性)
实例示范：
<!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>Document</title>
</head>
<body>
    <div id="demo"></div>

    <script>
        //通过ID获取元素
        var id = document.getElementById("demo");
        console.log("获取到的节点是："+id +"\n"+ //[object HTMLDivElement]
        "节点类型："+id.nodeType +"\n"+ // 1
        "节点名称："+id.nodeName // DIV
        );
        
    </script>
</body>
</html>

2.2 通过标签名获取元素

document.getElementsByTagName()方法可以获取特定的全部标签，并将其保存在一个数组中。

语法：

document.getElementsByTagName(标签名)
实例示范：
<!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>Document</title>
</head>
<body>
    
    <ul id="dome">
        <li>打扫卫生</li>
        <li>给Tom打电话</li>
        <li>看电影</li>
    </ul>

    <script type="text/javascript">
        var demo = document.getElementById("dome");
        //通过标签名获取元素
        var li = document.getElementsByTagName("li");
        var txt = "";
        for(var i = 0; i < li.length; i++){
            txt = txt +"第"+(i+1)+"li里的文本是:"+li[i].firstChild.nodeValue+"\n";
        }
        console.log(txt);//第1li里的文本是:打扫卫生; 第2li里的文本是:给Tom打电话; 第3li里的文本是:看电影
    </script>

</body>
</html>

2.3 通过类名获取元素

document.getElementsByClassName()方法能够通过class属性中的类名类访问，并将其保存在一个数组中。

语法：

document.getElementsByClassName(类名)
实例示范：
<!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>Document</title>
</head>
<body>
    <h2 id="p1">代办事项</h2>
    <ul id="p2">
        <li class="item">打扫卫生</li>
        <li class="item">给Tom打电话</li>
        <li class="item">看电影</li>
    </ul>

    <script type="text/javascript">
        //通过类名获取元素
        var items = document.getElementsByClassName("item");
        var txt = "";
        for(var i = 0; i < items.length; i++){
            txt = txt +"第"+(i+1)+"个item里的文本是:"+items[i].firstChild.nodeValue+"\n";
        }
        console.log(txt);//第1个item里的文本是:打扫卫生；第2个item里的文本是:给Tom打电话；第3个item里的文本是:看电影
    </script>
</body>
</html>

3. 设置和获取属性

getAttribute()和setAttribute()方法只能用于元素节点。

3.1 getAttribute

getAttribute()方法用来返回指定属性名的属性值。

语法：

对象名.getAttribute(属性名)
实例示范：
<!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>Document</title>
</head>
<body>

    <div id="test" title="文本">这是一些文本内容</div>
    
    <script type="text/javascript">
        var test = document.getElementById("test");
        alert(test.getAttribute("title"));//文本：返回指定属性名的属性值
    </script>

</body>
</html>

3.2 setAttribute

setAttribute():方法允许对属性节点的值做出修改。

语法：

对象名.setAttribute(属性名，属性值)

 setAttribute()方法的第一个参数是需要添加的属性的名字；第二个参数是我们需要添加的属性值。

setAttribute()方法实际上完成了两项操作：先创建属性，然后设置它的值。

setAttribute()方法用在一个本身就有这个属性的元素节点上，这个属性值就会被覆盖掉。

实例示范：
<!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>Document</title>
</head>

<body>

    <p id="p1">代办事项</p>

    <script type="text/javascript">
        var p1 = document.getElementById("p1");
        console.log(p1.getAttribute("title"));//返回指定属性名的属性值
        p1.setAttribute("title","a list of goods");//对属性节点的值做修改
        console.log(p1.getAttribute("title"));
        p1.setAttribute("title","new title text");
        console.log(p1.getAttribute("title"));
    </script>

</body>

</html>

4. 节点操作

给DOM树添加新节点需要两个步骤：

  1. 创建一个新节点。节点创建之后处于某种“不确定状态”，它的确定存在，但不属于DOM树的任何位置也就不会出现在浏览器窗口里。
  2. 把节点添加到DOM树的指定位置

4.1 创建节点

语法：

document.createElement(标签名);

createElement()方法用来创建任何类型的标准HTML元素。

语法：

document.createTextNode(文本内容);

createTextNode()方法用来为创建的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>Document</title>
</head>
<body>

    <script>  
        //创建HTML元素
        var div = document.createElement("div");
        var p = document.createElement("p");
        //为创建的HTML元素添加文本形式的内容
        var text = document.createTextNode("我是被创建的文本内容");        
    </script>
    
</body>
</html>

4.2 插入节点

两种添加节点的方法：appendChild()，inserBefore()

4.2.1 appendChild()

语法：

父节点.appendChild(要添加的新节点)

appendChild()可以向指定节点添加新的节点，并将添加的节点放到最后。

appendChild()犯法总是在已有的最后一个子节点之后添加新的子节点，所以新添加的节点会成为父节点的lastChild.

实例示范：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul id="p1">
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>
    
    <script>
        var p1 = document.getElementById("p1");
        var li = document.createElement("li");
        var text = document.createTextNode("我是被新创建的li");
        //插入HTML中的li标签
        p1.appendChild(li); 
        //向li标签里插入文本
        li.appendChild(text); 
    </script>
    
</body>
</html>

4.2.2 insertBefore()

语法：

父节点.insertBefore(要插入的新节点，当前节点);

insertBefore()方法可以指定一个子节点，然后把新节点插入到它前面。

insertBefore()方法有两个参数：要插入的新节点，指示插入位置的节点(插入到这个节点前面);

实例示范：
<!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>Document</title>
</head>
<body>
    
    <ul id="p1">
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </ul>

    <script>
        var p1 = document.getElementById("p1");
        //创建HTML元素
        var li = document.createElement("li");
        //为创建的HTML元素添加文本形式的内容
        var text = document.createTextNode("我是通过insertBefore插入的li");
        //把新节点插入到指定的子节点前面  //获得第一个元素
        p1.insertBefore(li,p1.firstChild);
        //向li标签里插入文本
        li.appendChild(text);
    </script>

</body>
</html>

4.3 替换节点

语法：

父节点.replaceChild(新节点，旧结点)
实例示范：
<!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>Document</title>
</head>
<body>

    <ul id="p1">
        <li id="p2">我是第1个li</li>
        <li>我是第1个li</li>
        <li>我是第1个li</li>
    </ul>

    <script>
        //通过ID获取元素
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        //创建任何类型的标准HTML元素
        var li = document.createElement("p2");
        //添加文本形式的内容
        var text = document.createTextNode("我是被replaceChild替换的li");
        //替换节点
        p1.replaceChild(li,p2);
        //向指定节点添加新的节点，并将添加的节点放到最后
        p2.appendChild(text);
    </script>

</body>
</html>

4.4 删除节点

语法：

父节点.removeChild(要删除的节点)

 removeChild()方法用来删除父节点下的某个子节点。

实例示范：
<!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>Document</title>
</head>
<body>

    <ul id="p1">
        <li id="p2">我是第1个li</li>
        <li>我是第1个li</li>
        <li>我是第1个li</li>
    </ul>

    <script>
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        //删除父节点下的某个子节点。
        p1.removeChild(p2);
    </script>

</body>
</html>

4.5 赋值节点

语法：

被复制的节点.cloneNode(bool)

参数bool是一个布尔值，取值如下：

1或ture：表示复制节点本身一个复制该节点下的所有子节点；

0或false：表示仅仅复制节点本身不复制该节点下的子节点；

实例示范：
<!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>Document</title>
</head>
<body>

    <ul id="p1">
        <li>我是第1个li</li>
        <li>我是第1个li</li>
        <li>我是第1个li</li>
    </ul>

    <script>
        var p1 = document.getElementById("p1");
        //复制节点
        var clone = p1.cloneNode(true);
        document.body.appendChild(clone);
    </script>

</body>
</html>

4.6 innerHTML和innerText

innerHTML和innerText这2个属性很方便的获取和设置某一个元素的内容元素和文本。

innerHTML属性被多数浏览器所支持，而innerText只能被IE，Chrome等支持而不被Firefox支持。

innerHTML属性声明了元素含有的HTML文本，不包含元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。

innerText属性与innerHTML属性的功能类似，但是该属性只能声明元素包含的文本内容。即使指定的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>Document</title>
</head>
<body>
    
    <p id="p1"><strong>JavaScript</strong></p>

    <script>
        var p1 = document.getElementById("p1")
        alert(
            "innerHTML:"+p1.innerHTML+"\n"+
            "innerText:"+p1.innerText
        );
    </script>

</body>
</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>Document</title>
</head>
<body>

    <p id="p1"></p>
    <p id="p2"></p>

    <script>
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        p1.innerHTML="innerHTML:<strong>JavaScript</strong>";
        p2.innerText="innerText:<strong>JavaScript</strong>";
    </script>
    
</body>

</html>

4.7 设置CSS样式

语法：

object.style.属性名 = 属性值;

实例示范：
<!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>Document</title>
</head>
<body>

    <div id="demo">JavaScript设置CSS样式</div>
    
    <script>
        var demo = document.getElementById("demo");
        demo.style.width="300px"; //宽
        demo.style.height="100px";//高 
        demo.style.textAlign="center";//文本对齐方式
        demo.style.lineHeight="100px";//行高
        demo.style.fontSize="25px"; //字体大小
        demo.style.border="2px dashed #000";//边框
    </script>

</body>
</html>

5. DOM事件

DOM事件调用的方法有两种：

  1. 在元素中调用；
  2. 在<script>标签中调用事件。

5.1 事件调用方法

5.1.1 在元素中调用事件

实例示范：
<!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>Document</title>
</head>
<body>
    
    <button onclick="alert('你点击了这个按钮')">点击我</button>

</body>
</html>

5.1.2 在<script>标签中调用事件

实例示范：
<!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>Document</title>
</head>
<body>

    <button id="p1">点击我</button>

    <script>
        var p1 = document.getElementById("p1");
        p1.onclick = function(){
            alert('你点击了这个按钮');
        }
    </script>

</body>
</html>

5.2 DOM事件

常见的DOM事件
事件描述
onclick单击鼠标左键触发
onmousedown按下任意一个鼠标按键时触发
onmouseout鼠标指针移出元素时触发
onmousemove鼠标指针在元素内部移动时持续触发
onmouseup用户释放鼠标按钮时触发
onmouseover鼠标指针移动到元素上时触发
<!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>DOM</title>

    <style type="text/css">
        #demo{
            width: 200px;
            height: 50px;
            line-height: 50px;
            background-color: red;
            font-size: 20px;
            text-align: center;
        }
    </style>
    
</head>
<body>

    <div id="demo">单击我</div>

    <script>
        var demo = document.getElementById("demo"); 
        demo.onclick = function(){
            this.style.color = "white";
            this.style.backgroundColor = "green";
        }   
    </script>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值