DOM对象_hehe.employment.over.10.3

2023-10-04 09:29:04

10.9 DOM_概述

DOM： Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
  - Document： 文档对象
  - Element： 元素对象
  - Attribute： 属性对象
  - Text： 文本对象
  - Comment: 注释对象
  - Node： 节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型

10.10 DOM_Document对象

Document：文档对象
1.创建(获取)： 在html dom模型中可以使用window对象来获取。
- window.document
- document
2.方法：
- 1.获取 Element 对象：
  - getElementById() ：根据id属性值获取元素对象。id属性值一般唯一。
  - getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
  - getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组。
  - getElementsByName() : 根据name属性值获取元素对象们。返回值是一个数组。
- 2.创建其他DOM对象：
  - createAttribute(name)
  - createComment()
  - createElement() 创建新的元素节点。
  - createTextNode()创建新的文本节点。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>

</head>
<body>

    <div id="div1">div1</div>
    <div id="div2">div2</div>
    
    <div id="div3">div3</div>
    
    <div class="cls1">div4</div>
    <div class="cls1">div5</div>
    
    <input type="text" name="username">
    
    <script>
    
        //2.根据元素名称获取元素对象们。返回值是一个数组
        var divs = document.getElementsByTagName("div");
        //alert(divs.length);
        //3.根据Class属性值获取元素对象们。返回值是一个数组
        var div_cls = document.getElementsByClassName("cls1");
        // alert(div_cls.length);
        //4.根据name属性值获取元素对象们。返回值是一个数组
        var ele_username = document.getElementsByName("username");
        //alert(ele_username.length);
    
        var table = document.createElement("table");
        alert(table);
        
    </script>
</body>
</html>

10.11 DOM_Element对象

Element：元素对象
1.获取/创建： 通过document来获取和创建.
2.方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>
    <a>连接</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">
<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        //设置属性
        element_a.setAttribute("href","https://www.baidu.com");
    }

    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        //删除属性
        element_a.removeAttribute("href");
    }
</script>
</body>
</html>

10.12 DOM_Node对象

Node：节点对象，其他5个的父对象
- 特点： 所有dom对象都可以被认为是一个节点.
方法：
- CRUD dom树：
  - appendChild()：向节点的子节点列表的结尾添加新的子节点。
  - removeChild() ：删除（并返回）当前节点的指定子节点。
  - replaceChild()：用新节点替换一个子节点。
属性：
- parentNode : 返回节点的父节点。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

</body>

<!--超链接功能：-->
<!--1.可以被点击：样式-->
<!--2.点击后跳转到href指定的url-->

<!--需求：保留1功能，去掉2功能-->
<!--实现：href="javascript:void(0);"-->

    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->

    <script>
        //1.获取超链接
        var element_a = document.getElementById("del");
        //2.绑定单击事件
        element_a.onclick = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.removeChild(div2);
        }

        //1.获取超链接
        var element_add = document.getElementById("add");
        //2.绑定单击事件
        element_add.onclick = function(){
            var div1 = document.getElementById("div1");
            //给div1添加子节点
            //创建div节点
            var div3 = document.createElement("div");
            div3.setAttribute("id","div3");
            div1.appendChild(div3);
        }

        //返回节点div2的父节点
        var div2 = document.getElementById("div2");
        var div1 = div2.parentNode;
        alert(div1);
    </script>
</html>

10.13 DOM_Node案例_动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>hehe</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>xww</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>jianjie</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>
</table>
<script>
    /*
       分析：
           1.添加：
               1. 给添加按钮绑定单击事件
               2. 获取文本框的内容
               3. 创建td，设置td的文本为文本框的内容。
               4. 创建tr
               5. 将td添加到tr中
               6. 获取table，将tr添加到table中
           2.删除：
               1.确定点击的是哪一个超链接
                   <a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>
               2.怎么删除？
                   removeChild():通过父节点删除子节点

    */
    //1.获取按钮
    document.getElementById("btn_add").onclick=function () {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3.创建td，赋值td的标签体
        //id 的 td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        //name 的 td
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 td
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4.创建tr
        var tr = document.createElement("tr");
        //5.添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }
    
    //使用innerHTML添加
   /* document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取table
        var table = document.getElementsByTagName("table")[0];

        //追加一行
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    }*/
    
    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        //删除tr
        table.removeChild(tr);
    }
</script>
</body>
</html>

10.14 DOM_HTML DOM

HTML DOM
1.标签体的设置和获取： innerHTML
2.使用 html元素对象的属性
3.控制元素样式
- (1).使用元素的style属性来设置;
- (2).提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<body>
<div id="div3">
    innerHTML
</div>

<div id="div1">
    innerHTML控制样式1
</div>

<div id="div2">
    innerHTML控制样式2
</div>
<script >
    //1. innerHTML
    var div = document.getElementById("div3");
    var innerHTML = div.innerHTML;
    //alert(innerHTML);

    //div标签中替换一个文本输入框
    // div.innerHTML = "<input type='text'>";

    //div标签中追加一个文本输入框
    div.innerHTML += "<input type='text'>";
    
    //2. 通过style控制样式
    var div1 = document.getElementById("div1");
    div1.onclick = function(){
        //修改样式方式1
        div1.style.border = "1px solid red";

        div1.style.width = "200px";

        //font-size--> fontSize
        div1.style.fontSize = "20px";

    }
    //3. 通过className控制样式
    var div2 = document.getElementById("div2");
    div2.onclick = function(){
        div2.className = "d1";
    }
</script>
</body>
</html>

码农公寓

10.9 DOM_概述

10.10 DOM_Document对象

10.11 DOM_Element对象

10.12 DOM_Node对象

10.13 DOM_Node案例_动态表格

10.14 DOM_HTML DOM

相关文章