DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］

最新推荐文章于 2024-03-14 10:30:42 发布

m-TT

最新推荐文章于 2024-03-14 10:30:42 发布

阅读量1.9k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127640846

版权

js 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

一.DOM？

1.Document Object Model：文档对象模型

2.DOM的核心：document对象

3.DOM的作用：可以访问和操作XML和HTML文档中标签、属性、节点的属性和方法

4.在DOM中将整个HTML文档看作是一个倒立的树（树状结构）：一个html页面就是一个DOM对象，是一颗DOM HTML树

（1）DOM　HTML的根节点：html

（2）元素（Element）:html文档中的标签

（3）节点（Node）:html文档中的内容

5.DOM树中节点的分类：

（1）标签节点：所有的标签

（2）属性节点：标签的属性---内置属性、自定义属性

（3）文本节点：标签中的文本、换行、空格等

（4）注释节点：

6.基本概念

（1）根节点：html,有且只能有一个

（2）子节点：某个节点的下一级节点

（3）父节点：某个节点的上一级节点

（4）兄弟节点：拥有相同父节点的节点

<body>
    <div id="box"></div>
    <script>
        let div = document.getElementById('box')
        console.log(div)
        console.log(div.__proto__)//__proto__:表示元素的原型
    </script>
</body>

二.通过document对象来操作html页面中的元素

1.getElementById('id值')：通过标签的id属性来获取标签

2.getElementsByName('name值')：通过标签的name属性来获取标签,返回值的是NodeList

3.getElementsByTagName('标签名')：通过标签名获取标签，返回值的类型是HTMLCollection

4.getElementsByClassName('class值')：通过标签的class值来获取标签，返回的类型是HTMLCollection

5.querySelector('#id值/.class值/标签名')：第一个

#id值：返回一个指定id属性值的标签

.class值：返回第一个指定class属性值的标签

标签名：返回第一个指定标签名的标签

6.querySelectorAll('.class值/标签名')：所有

.class值：返回所有指定class属性值的标签。返回值的类型是NodeList

标签名：返回所有指定标签名的标签。返回值的类型是NodeList

<body>
    <div id="box"></div>
    <input type="checkbox" name="chk">西安
    <input type="checkbox" name="chk">北京
    <input type="checkbox" name="chk">南京
    <input type="checkbox" name="chk">洛阳
    <p class="pt">春天</p>
    <p class="pt">夏天</p>
    <p class="pt">秋天</p>
    <p class="pt">冬天</p>
    <script>
        let chk_arr1 = document.getElementsByName('chk')
        console.log(chk_arr1)
        let chk_arr2 = document.getElementsByTagName('input')
        console.log(chk_arr2)
        let arr = document.getElementsByClassName('pt')
        console.log(arr)
        let d1 = document.querySelector('#box')
        console.log(d1)
        console.log(d1.__proto__)
        let chk_arr3 = document.querySelectorAll('.pt')
        console.log(chk_arr3)
    </script>
</body>

<body>
    <form action="#" method="get">
        用户名：<input type="text" name="userName" id="userName"><br/>
        密码：<input type="password" name="pwd" id="pwd"><br/>
    </form>
    <button type="button" id="btn_reset">重置</button>
    <button type="button" id="btn_sumbit">提交</button>
    <script>
        // 重置
        let reset = document.getElementById('btn_reset')
        reset.addEventListener('click',function (){
            document.getElementById('userName').value=''
            document.getElementById('pwd').value=''
        })
        // 提交
        let submit = document.getElementById('btn_submit')
        submit.addEventListener('click',function(){
            document.getElementById('userName').value=''
            document.getElementById('pwd').value=''
        })
    </script>
</body>

三.document对象的属性【DOM对象核心】

1.document.body：返回文档的body元素

2.document.documentElement:返回文档的html元素

3.document.forms:返回文档的form(表单)对象

<body>
    <form action="#" method="get">
        用户名：<input type="text" name="userName"><br/>
        密码：<input type="password" name="pwd" id=""><br/>
        <input type="reset">
        <input type="submit">
    </form>
    <script>
        console.log(document.body)
        console.log(document.documentElement)
        console.log(document.forms)//返回的是集合，长度为1
        console.log(document.forms[0].tagName)//FORM
        console.log(document.forms[0].method)//get
    </script>
</body>

四.Element对象的属性和方法：在JavaScript代码中使用html的标签（Element）属性和方法

1.children属性：用来获取某个元素的子元素

强调：HTMLCollection和NodeList的区别：

（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

（2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

（3）HTMLCollection对象用于元素操作

（4）NodeList对象用于节点操作

<body>
    <p>四大传说</p>
    <ul id="ul">
        <li>梁山伯与祝英台</li>
        <li>白蛇传</li>
        <li>牛郎织女</li>
        <li>孟姜女哭长城</li>
    </ul>
    <script>
        let list = document.getElementById('ul')
        console.log(list.children)
    </script>
</body>

五.元素的属性和方法

1.属性：

（1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

（2）innerText: 设置或返回元素中除去所有标签的内容（不能解析标签---不识别标签）

（3）textContent：设置或者返回指定节点的文本内容（不识别换行）

<body>
    <div id="dt1"></div>
    <div id="dt2">
        <p>大雁塔</p>
        <p>钟楼</p>
        回民街
    </div>
    <script>
        // document.getElementById('dt1').innerHTML='<h1>懒羊羊</h1>'
        // document.getElementById('dt1').innerHTML='<input type="text" value="懒羊羊">'
        // document.getElementById('dt1').innerText='<h1>懒羊羊</h1>'
        // document.getElementById('dt1').textContent='<h1>懒        羊羊</h1>'
        console.log(document.getElementById('dt2').innerText)
        console.log('------------------')
        console.log(document.getElementById('dt2').textContent)
    </script>
</body>

2.方法：

（1）document.write("html内容")：在文档中写入指定的内容

（2）document.writeln("html内容")：在文档中写入指定的内容（换行）

<script>
    document.writeln('<span>城墙1</span>')
    document.write('<span>城墙2</span>')
</script>

<body>
    <form action="server.html" method="get">
        <label>
            userName<input type="text" name="userName" id="userName">
        </label><br>
        <label>
            password<input type="password" name="pwd" id="pwd">
        </label>
        <br/>
        <button type="reset" id="btn_reset">重置</button>
        <button type="submit" id="btn_sumbit">提交</button>
    </form>
</body>

server.html

<script>
    console.log('URL:',location.href)
    console.log('主机名：',location.hostname)
    console.log('路径名：',location.pathname)
    console.log('请求字符串（参数）：',location.search)//location.search:存放的请求地址中参数部分
    console.log('端口号：',location.port)
    console.log('网络协议：',location.protocol)
    // 请求字符串
    let str1 = location.search//?userName=admin&pwd=123
    console.log('请求字符串（参数）：',str1)
    // 去掉最开始的？
    str1 = str1.substr(1,str1.length)
    console.log(str1)//userName=admin&pwd=123
    let str2 = str1.split('&')
    console.log(str2)// ['userName=admin', 'pwd=123']
    let str3 = str2[0].split('=')//['userName', 'admin']
    let str4 = str2[1].split('=')//['pwd','123']
    document.write(`<p>用户名：${str3[1]}</p>`)//用户名：admin
    document.write(`<p>密码：${str4[1]}</p>`)//密码：123
</script>

六.标签的属性

1.attributes:返回标签的所有属性集合

2.setAttribute(name,value):设置标签的属性值。参数name表示属性名，参数value表示属性值

3.getAttribute(name):获取标签的某个属性值。参数name代表属性名

4.removeAttribute(name):删除标签的某个属性。参数name代表属性名

<style>
    .new1{
        color: rgb(41, 7, 75);
        font-size: 30px;
        font-weight: 700;
    }
    .new2{
        color: red;
        font-size: 50px;
    }
</style>
<body>
    <div class="box" id="d1" name="mydiv" title="woniu">
        北大
    </div>
    <button id="btn">更改</button>
    <script>
       /*  console.log(document.getElementById('d1').attributes)
        console.log(document.getElementById('d1').setAttribute('title','北京')) */
        let change = document.getElementById('btn')
        let flag = true
        change.addEventListener('click',function(){
            if (flag) {
                flag = !flag
                document.getElementById('d1').setAttribute('class','new2')
            }else{
                flag = !flag
                document.getElementById('d1').setAttribute('class','new1')
            } 
        })
    </script>
</body>

七.元素的样式

1.用法：元素名.style.样式属性名

注意："样式属性名"在使用时需要将单词之间的'-'删除，将第二个单词的首字母大写

<body>
    <div id="demo"></div>
    <script>
        let div = document.getElementById('demo')
        div.style.width='200px'
        div.style.height='200px'
        div.style.backgroundColor='pink'
        div.style.borderRadius='50%'
    </script>
</body>

２.HTML对象样式的操作

（１）一个元素的class属性可以有多个值：作用是在保留原有央视的基础上添加新的样式

（２）如何在js程序运行过程中动态的添加class属性值？

classLis：是元素的class属性的列表

⭕属性：length--某个标签的class属性值的个数（即多少个类名）

⭕方法：a.add('字符串')：给元素添加类名。一次只能添加一个

　b.remove('字符串')：将元素的类名删除。一次只能删除一个

　c.toggle('字符串'):若类名存在则删除，不存在则添加

　d.item(index)：根据index，来获取元素的类名

　e.contains('类名'):判断元素是否含有给定的类名，若有返回true，没有返回false

<style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    .box2{
        margin: 100px auto;
    }
</style>
<body>
    <div class="box1 box2 box3 box4" id="box"></div>
    <button id="center">居中</button>
    <button id="recover">恢复</button>
    <button id="toggle">交替</button>
    <button id="item">索引</button>
    <button id="contain">是否包含</button>
    <script>
        document.querySelector('#center').addEventListener('click',function(){
            document.querySelector('#box').classList.add('box2')
        })
        document.querySelector('#recover').addEventListener('click',function(){
            document.querySelector('#box').classList.remove('box2')
        })
        document.querySelector('#toggle').addEventListener('click',function(){
            document.querySelector('#box').classList.toggle('box2')
        })
        document.querySelector('#item').addEventListener('click',function(){
            let name = document.querySelector('#box').classList.item(4)
            console.log(name)
        })
        document.querySelector('#contain').addEventListener('click',function(){
            let flag = document.querySelector('#box').classList.contains('box1')
            console.log(flag)
        })
    </script>
</body>

练习：标签

方法一：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .table{
        margin:10px;
        width: 384px;
        border: 1px solid #ccc;
        border-top: 2px solid blue;
    }
    .table .row1{
        height: 31px;
    }
    .row1_col{
        float: left;
        width: 95px;
        height: 30px;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
        background:blue;
        line-height: 30px;
        text-align: center;
        color: white;
        cursor: pointer;
    }
    .row1 .now{
        background-color: #fff;
        border-bottom: 1px solid #fff;
        color: black;
    }
    .row1_col4{
        border-right:0;
    }
    .row2_col{
        display: none;
        margin: 20px 10px;
    }
    .row2 .now{
        display: block;
    }
</style>
<body>
    <div class="table">
        <div class="row1">
            <div class="row1_col now">标签一</div>
            <div class="row1_col">标签二</div>
            <div class="row1_col">标签三</div>
            <div class="row1_col row1_col4">标签四</div>
        </div>
        <div class="row2">
            <div class="row2_col now">1</div>
            <div class="row2_col">2</div>
            <div class="row2_col">3</div>
            <div class="row2_col">4</div>
        </div>
    </div>
    <script>
        var tables = document.getElementsByClassName('row1_col')
        var div = document.getElementsByClassName('row2_col')
        for (var i = 0; i < tables.length; i++) {
            tables[i].onclick = function (){
                for (var j = 0; j < div.length; j++) {
                    if (tables[j]==this) {//显示当前鼠标点击的div,this:表示tables[i]
                        div[j].classList.add('now')
                        tables[j].classList.add('now')
                    } else {//隐藏其余的div
                        div[j].classList.remove('now')
                        tables[j].classList.remove('now')
                    }
                }
            }
        }
    </script>
</body>

方法二：

<style>
        *{
            margin:0;
            padding:0;
        }
        .tab-box{
            width:383px;
            margin:10px;
            border:1px solid #ccc;
            border-top:2px solid #206F96;}
        .tab-head{
            height:31px;
        }
        .tab-head-div{
            width:95px;
            height:30px;
            float:left;
            border-bottom:1px solid #ccc;
            border-right:1px solid #ccc;
            background:#206F96;
            line-height:30px;
            text-align:center;
            cursor:pointer;
            color:#fff;
        }
        .tab-head .current{
            background:#fff;
            border-bottom:1px solid #fff;
            color:#000;
        }
        .tab-head-r{
            border-right:0;
        }
        .tab-body-div{
            display:none;
            margin:20px 10px;
        }
        .tab-body .current{
            display:block;
        }
    </style>
  </head>
  <body>
    <div class="tab-box">
      <div class="tab-head">
        <div class="tab-head-div current">标签一</div>
        <div class="tab-head-div">标签二</div>
        <div class="tab-head-div">标签三</div>
        <div class="tab-head-div tab-head-r">标签四</div>
      </div>
      <!--显示标签内容-->
      <div class="tab-body">
        <div class="tab-body-div current"> 1 </div>
        <div class="tab-body-div"> 2 </div>
        <div class="tab-body-div"> 3 </div>
        <div class="tab-body-div"> 4 </div>
      </div>
    </div>
    <script>
      // 获取标签栏的所有标签元素对象
      var tabs = document.getElementsByClassName('tab-head-div');
      // 获取标签栏的所有内容对象
      var divs = document.getElementsByClassName('tab-body-div');
      for (var i = 0; i < tabs.length; ++i) {        // 遍历标签部分的元素对象
        tabs[i].onclick = function() {           // 为标签元素对象添加鼠标滑过事件
          for (var i = 0; i < divs.length; ++i) {    // 遍历标签栏的内容元素对象
            if (tabs[i] == this) {    // 显示当前鼠标滑过的li元素
              divs[i].classList.add('current');
              tabs[i].classList.add('current');
            } else {                  // 隐藏其他li元素
              divs[i].classList.remove('current');
              tabs[i].classList.remove('current');
            }
          }
        };
      }
    </script>
  </body>

八．DOM中节点的操作：采用操作节点的方式来操作页面中的元素

１.获取节点时使用的属性：

a.firstChild：获取当前节点的首个子节点。

注意：换行符、空格等也是节点。

b.nextSibling:返回同一层级的第一个子节点

c.lastChild:获取当前节点的最后一个子节点。

d.previousSibling:返回同一层级的最后一个子节点

e.nodeName:节点名称

f.nodeValue:节点值

g.nodeType:节点类型。1：表示当前节点的类型是标签；2：表示属性节点；3：表示的文本节点

h.parentNode:当前节点的父节点

l.childNodes:当前节点的所有子节点

强调：childNodes与children区别：

同：都可以获取元素的子节点

异：childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

children返回的是元素节点（即标签），返回值类型是HTMLCollection

　getAttribute('id'):用来获取元素的id属性值

　getAttributeNode('id'):用来获取元素id属性值的类型

<body>
    <div id="dt">a
        <input type="text" value="2">
        <p>咸阳</p>
        <p>西安</p>
        <p>宝鸡</p>
    </div>
    <script>
        let div = document.getElementById('dt')
        // 
        // console.log('div的第二个子节点：',div.firstChild)
        // console.log('div的第一个子节点：',div.firstChild.nextSibling) 
        // console.log('div的最后一个子节点：',div.lastChild) 
        // console.log('div的第一个子节点：',div.lastChild.previousSibling) 
        // console.log('div的第一个子节点：',div.firstChild.nextSibling.nodeName) 
        // console.log('div的第一个子节点：',div.firstChild.nextSibling.nodeValue)

        // nodeType:节点类型。1：表示当前节点的类型是标签；2：表示属性节点；3：表示的文本节点 
        console.log(div.firstChild.nextSibling.nodeType)//1：表示当前节点的类型是标签；
        console.log(div.getAttributeNode('id').nodeType)//2：表示属性节点
        console.log(div.firstChild.nodeType)//3：表示的文本节点 

        console.log('div的所有子节点（childNodes）',div.childNodes)//NodeList(9) [text, input, text, p, text, p, text, p, text]
        console.log('div的所有子节点（children）',div.children)//HTMLCollection(4) [input, p, p, p]
        console.log('div的id属性值：',div.getAttribute('id'))//获取id属性值
        console.log('div的id属性值：',div.getAttributeNode('id').nodeType)//获取id属性的类型
    </script>
</body>

２.复制节点：cloneNode(deep) 参数deep是Boolean类型（true/false）

true：表示深度复制（将节点及其子节点都进行复制）---深拷贝

false：表示浅复制（只复制节点，不复制子节点）---浅拷贝

３.删除节点：removeChild(node)

（1）参数node为要删除的节点

（2）前提：被删除的节点必须为空（没有子节点）

<body>
    <select name="" id="sex">
        <option value="%">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <hr>
    <div id="div_clone"></div>
    <button id="clone_false" onclick="copyNode(false)">浅拷贝</button>
    <button id="clone_true" onclick="copyNode(true)">深拷贝</button>
    <script>
        function copyNode(bool) {
            // 1.获取select标签
            let select = document.getElementById('sex')
            // 2.复制select
            let copySelect = select.cloneNode(bool)
            //3.获取div
            let mydiv = document.getElementById('div_clone')
            let br = document.createElement('br')//添加br标签
            mydiv.appendChild(copySelect)
            mydiv.appendChild(br)
        }
    </script>
</body>

４.hasChildNodes():判断当前节点是否有子节点　　　　　　false：无　 true：有

<body>
    <div id="df"></div>
    <script>
        let div = document.getElementById('df')
        console.log(div.hasChildNodes())
    </script>
</body>

<body>
    <div id="dd">
        <p>懒羊羊</p>
        <p>潇洒哥</p>
        <p>黑大帅</p>
    </div>
    <button id="btn_del" onclick="delNode()">删除</button>
    <button id=""></button>
    <script>
        function delNode() {
            let div = document.getElementById('dd')
            if (div.hasChildNodes()) {
                div.removeChild(div.lastElementChild)//lastElementChild:删除最后一个元素
            }
        }
    </script>
</body>

５.replaceChild(newNode,oldNode) :用newNode替换oldNode节点

<body>
    <h2 id="b1">可以替换文本内容</h2>
    <br>
    输入标签名：<input type="text" id="bj">
    <br>
    输入文本：<input type="text" id="txt">
    <br>
    <input type="button" value="替换" onclick="replaceNode(txt.value,bj.value)">
    <script>
        function replaceNode(txt,bj) {
            // 获取h2
            var oldNode = document.getElementById('b1')
            if (oldNode) {
                // 创建新节点
                var newNode = document.createElement(bj)
                // 给新节点设置id属性，值为b1
                newNode.setAttribute('id','b1')
                // 创建文本节点
                var newtext = document.createTextNode(txt)
                // 将文本添加到新节点中
                newNode.appendChild(newtext)
                // 替换节点
                oldNode.parentNode.replaceChild(newNode,oldNode)
            }
        }
    </script>
</body>

九．追加节点

1．创建元素节点：document.createElement()

２．在指定节点的末尾追加节点：appendChild(newNode)

３．在指定节点之前添加节点：insertNode(newNode,node):将节点newNode插入到节点node之前

该方法需要通过插入节点（node）的父节点来调用

<body>
    <h2 id="ht">懒羊羊</h2>
    <input type="text" name="txt" id="node_value">
    <button id="insert">插入元素</button>
    <script>
        // 1.获取按钮
        let btn_insert = document.querySelector('#insert')
        // 2.注册事件监听
        btn_insert.addEventListener('click',function(){
            // 2.1 获取input值
            let input = document.querySelector('#node_value').value
            // 2.2 给input创建文本节点input_txt
            let input_txt = document.createTextNode(input)
            // 2.3 创建元素（标签）h2节点
            let h2_node = document.createElement('h2')
            // 2.4 将文本添加到h2中
            h2_node.appendChild(input_txt)
            // 3.获取插入位置上的标签 <h2 id="ht">懒羊羊</h2>
            let h2_position = document.querySelector('#ht')
            if (h2_position.parentNode) {
                h2_position.parentNode.insertBefore(h2_node,h2_position)
            }
        })
    </script>
</body>

４．创建文本节点：document.createTextNode()

<script>
    let mydiv = document.createElement('div')
    let mydiv1 = document.createElement('h2')
    mydiv1.innerHTML='懒羊羊'
    mydiv.appendChild(mydiv1)
    document.body.appendChild(mydiv)  
</script>

练习DOM创建无序列表

<script>
    /* let ul = document.createElement('ul')
    let li = document.createElement('li')
    let txt = document.createTextNode('西游记')
    li.appendChild(txt)
    ul.appendChild(li)
    document.body.appendChild(ul) */
    let arr = ['西游记','红楼梦','水浒传','三国演义']
    let ul = document.createElement('ul')//创建ul节点
    for (let i = 0; i < arr.length; i++) {
        let li = document.createElement('li')//创建li节点
        let txt = document.createTextNode(arr[i])//创建文本节点
        li.appendChild(txt)//将文本节点添加到li节点
        ul.appendChild(li)//将li节点添加到ul节点
        // document.body.appendChild(ul)
    }
    document.body.appendChild(ul)
</script>

练习1：对input中输入练习：对input中输入的用户名进行验证。当用户名合法时在input后显示“用户名正确”，否则显示”用户名错误“

<style>
    .true1{
        color: green;
    }
    .false1{
        color: red;
    }
</style>
<body>
    <div class="login">
        <label>
            用户名：<input type="text" id="userName"><span id="msg"></span>
        </label>
        <br/>
        <button id="btn_check">验证</button>
    </div>
    <script>
        let check = document.getElementById('btn_check')
        check.addEventListener('click',function(){
            // 1.获取input的value
            let user = document.getElementById('userName').value
            // 2.对用户进行判断
            if (user === 'admin') {
                document.getElementById('msg').innerText='用户名正确'
                document.getElementById('msg').setAttribute('class','true1')
            }else{
                document.getElementById('msg').innerText='用户名错误'
                document.getElementById('msg').setAttribute('class','false1')
            }
        })
        document.getElementById('userName').getAttribute('type')
    </script>
</body>

练习2：改变盒子大小

① 编写HTML，设置div的大小。

② 根据用户的点击次数完成盒子大小的改变。

③ 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。

<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: peru;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: palevioletred;
    }
</style>
<body>
    <div id="box" class="div2">小</div>
    <script>
        let mydiv = document.getElementById('box')
        // 方法一：取反
        // let flag = true
        mydiv.addEventListener('click',function(){
            if (flag) {
                flag = !flag
                document.getElementById('box').innerText = '大'
                document.getElementById('box').setAttribute('class','div1')
            }else{
                flag = !flag
                document.getElementById('box').innerText = '小'
                document.getElementById('box').setAttribute('class','div2')
            }
        })
        /* // 方法二：计数器
        let count = 0
        mydiv.addEventListener('click',function(){
            count++
            if (count%2==1) {
                document.getElementById('box').innerText = '大'
                document.getElementById('box').setAttribute('class','div1')
            }else{
                document.getElementById('box').innerText = '小'
                document.getElementById('box').setAttribute('class','div2')
            }
        }) */
    </script>
</body>

m-TT

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］

DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］
复制链接

扫一扫

专栏目录