JS高级——DOM对象

蔚落 2024-04-01 12:49 67阅读 0赞

### DOM对象 ###

#### 1. dom简介 ####

##### 目标 #####

*  了解dom的概念
 *  了解dom树的概念

##### 讲解 #####

dom树：当一个网页被浏览器加载到内存中之后，会按照dom方式解析html：把html里所有的标签、属性、文本全部封装成节点对象；这些节点对象会按照原本的层级结构，形成一棵dom树。

![在这里插入图片描述][0a4c6bba6e1b452cb3cb19780a217255.png]

##### 小结 #####

*  dom：文档对象模型
 *  dom树：把整个html文档加载到浏览器内存后，会把html里所有的标签、属性、文本都封装成节点对象；这些节点对象会按照原本的层级结构，组装成一棵树。这棵树叫dom树
 *  dom树目的：
    
     *  我们可以通过dom树上的对象，来操作整个html文档
     *  可以操作标签：创建标签，插入标签，删除标签，获取标签
     *  可以操作属性：获取某个属性值，设置某个属性值，删除属性
     *  可以操作文本：获取某个标签里的文本内容，设置某个标签里的文本内容
     *  可以操作样式

#### 2. 操作标签 ####

##### 目标 #####

*  能够使用js操作标签
 *  练习：根据用户输入的行数和列数，生成表格  
    ![在这里插入图片描述][c01da76cd3d94f3f8a49e35eee555261.png]

##### 分析 #####

*  获取标签对象
 *  操作标签：创建标签、插入标签、删除标签
 *  操作标签的内容

##### 讲解 #####

###### 获取标签 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>document.getElementById(id)</code></td> 
   <td>根据id属性值，获取一个标签</td> 
  </tr> 
  <tr> 
   <td><code>document.getElementsByName(name)</code></td> 
   <td>根据name属性值，获取一批标签（数组）</td> 
  </tr> 
  <tr> 
   <td><code>document.getElementsByTagName(tagName)</code></td> 
   <td>根据标签名称，获取一批标签（数组）</td> 
  </tr> 
  <tr> 
   <td><code>document.getElementsByClassName(className)</code></td> 
   <td>根据class属性值，获取一批标签（数组）</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>document.querySelector("css选择器")</code></td> 
   <td>获取选择器选中的第一个元素</td> 
  </tr> 
  <tr> 
   <td><code>document.querySelectorAll("css选择器")</code></td> 
   <td>获取选择器选中的所有元素，得到一批标签</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取标签</title>
    </head>
    <body>
    帐号：<input type="text" id="username" name="username" value="tom" class="item"><br>
    密码：<input type="password" id="password" name="password" value="123456" class="item"><br>
    性别：<input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女
    
    <script>
        /**
         * 获取标签：
         * 老版本（ECMAScript5）的方法：
         *  document.getElementById(id)：根据id属性值，获取一个标签对象
         *  document.getElementsByName(name)：根据name属性值，获取一批标签对象（数组）
         *  document.getElementsByTagName(tagName)：根据标签名称，获取一批标签对象（数组）
         *  document.getElementsByClassName(className)：根据class属性值，获取一批标签对象（数组）
         *
         * 新版本（ECMAScript6）的方法：
         *  document.querySelector("css选择器")：获取选择器选中的第一个元素
         *  document.querySelectorAll("css选择器")：获取选择器选中的所有元素（数组）
         */
    
        //要求1：获取文本框标签username
        let username = document.getElementById("username");
        console.log(username);
        let username2 = document.querySelector("#username");
        console.log(username2);
    
        console.log("---------------------------------------");
    
        //要求2：获取所有的性别选项
        let elements = document.getElementsByName("sex");
        for (let i = 0; i < elements.length; i++) {
          
            console.log(elements[i]);
        }
        console.log("---------------------------------------");
    
        //要求3：获取文本框和密码框
        let items = document.getElementsByClassName("item");
        for (let i = 0; i < items.length; i++) {
          
            console.log(items[i]);
        }
    
    </script>
    </body>
    </html>

###### 操作标签 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>document.createElement("li")</code></td> 
   <td>创建一个li标签；创建的新标签必须插入网页才会生效</td> 
  </tr> 
  <tr> 
   <td><code>父标签对象.appendChild(子标签对象)</code></td> 
   <td>把子标签对象插入到父标签内部</td> 
  </tr> 
  <tr> 
   <td><code>标签对象.remove()</code></td> 
   <td>删除标签</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建插入删除标签</title>
    </head>
    <body>
    <ul id="list">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        
    </ul>
    
    <script>
        /**
         * 创建标签：document.createElement("标签名称")
         *      注意：创建出来的标签，必须要插入到网页上；否则是不生效的
         *
         * 插入标签：父标签对象.appendChild(子标签对象)
         *
         * 删除标签：标签对象.remove()
         */
        //1. 创建一个标签：<li></li>
        let item = document.createElement("li");
        // <li>周宏祎</li>
        item.innerHTML = "周宏祎";
    
        //2. 获取list（作为父标签）
        let list = document.getElementById("list");
    
        //3. 把item插入到list下边
        list.appendChild(item);
    
        //4. 把list删除掉
        list.remove();
    </script>
    </body>
    </html>

###### 操作标签内容 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>标签对象.innerHTML </code></td> 
   <td>获取标签里的所有内容</td> 
  </tr> 
  <tr> 
   <td><code>标签对象.innerHTML = "&lt;h1&gt;新内容&lt;/h1&gt;"</code></td> 
   <td>设置标签的内容<br>是覆盖式设置：原本内容会被覆盖掉<br>新内容的html代码，会生效</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作标签内容</title>
    </head>
    <body>
    <div id="d1">
        一切如你i
        <span>阿丹的杂货铺</span>
    </div>
    
    <script>
        /**
         * 获取标签内容：let v = 标签对象.innerHTML;
         * 设置标签内容：标签对象.innerHTML = "新内容"
         *      覆盖式设置：设置的内容会把原本内容覆盖掉
         *      设置的html代码会生效
         */
        //1. 获取d1的内容
        let d1 = document.getElementById("d1");
        let v = d1.innerHTML;
        console.log(v);
    
        //2. 设置d1的内容
        d1.innerHTML = "<h1>天津JavaEE</h1>";
        d1.innerHTML = "";
    </script>
    </body>
    </html>

###### 练习：生成表格 ######

*  准备页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>练习-生成表格</title>
        <style>
            table{
          
                width: 500px;
                border-collapse: collapse;
            }
            td{
          
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    <input type="text" id="row">行
    <input type="text" id="col">列
    <input type="button" value="生成表格" id="btn">
    <hr>
    
    <div id="d1"></div>
    
    <script>
    
    </script>
    </body>
    </html>

*  功能实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>练习-生成表格</title>
        <style>
            table{
          
                width: 500px;
                border-collapse: collapse;
            }
            td{
          
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    
    <input type="text" id="row">行
    <input type="text" id="col">列
    <input type="button" value="生成表格" id="btn" onclick="createTable()">
    <hr>
    
    <div id="d1"></div>
    
    <script>
        function createTable(){
          
            //0. 把d1里原本的内容清除掉
            let d1 = document.getElementById("d1");
            d1.innerHTML = "";
    
            //1. 获取用户输入的“行数”和“列数”
            let rows = document.getElementById("row").value;
            let cols = document.getElementById("col").value;
    
            //2. 创建表格：创建一个table标签
            let tableTag = document.createElement("table");
            d1.appendChild(tableTag);
    
            //3. 创建行：rows是几，就创建几行
            for (let i = 0; i < rows; i++) {
          
                let trTag = document.createElement("tr");
                tableTag.appendChild(trTag);
    
                //4. 创建列：cols是几，就创建几列
                for (let j = 0; j < cols; j++) {
          
                    let tdTag = document.createElement("td");
                    trTag.appendChild(tdTag);
    
                    //5. 给单元格里设置内容
                    tdTag.innerHTML = "单元格";
                }
            }
        }
    </script>
    </body>
    </html>

##### 小结 #####

*  获取标签
    
     *  老的语法
        
         *  document.getElementById
         *  document.getElementsByName
         *  document.getElementsByTagName
         *  document.getElementsByClassName
     *  新的语法
        
         *  document.querySelector(“css选择器”)：获取一个
         *  document.querySelectorAll(“css选择器”)：获取一批
 *  创建标签：
    
     *  语法：document.createElement(“div”)
     *  注意：创建的新标签不生效，因为不在dom树上；必须要插入到dom树才会生效
 *  插入标签：
    
     *  语法：父标签对象.appendChild(子标签对象)
 *  删除标签：
    
     *  语法：标签对象.remove()
 *  操作标签内容：
    
     *  获取标签内容：let html = 标签对象.innerHTML
     *  设置标签内容：标签对象.innerHTML = “新内容”
        
         *  是覆盖式设置。新内容会把原内容完全覆盖掉
         *  设置的html代码会生效

[0a4c6bba6e1b452cb3cb19780a217255.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/574342c8af984aeca4f2b30fab648b3d.png
[c01da76cd3d94f3f8a49e35eee555261.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/51874f08a02d4ba69aacced12c624c0e.png