Java day_25 DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45836790/article/details/107867770

DOM概念/Document对象/Element对象

<!-- DOM:
    概念:Document Object Model 文档对象模型
        *将标记语言文档的各个组成部分,封装为对象.可以使用这些对象,对标记的语言文档进行CURD的动态操作
    W3C DOM 标准被分为3个不同的部分:
        *核心 DOM 针对任何结构化文档的标准模型
            1.Document:文档对象
            2.Element:元素对象
            3.Attribute:属性对象
            4.Text:文本对象
            5.Comment:注释对象

            6.Node:节点对象,其它五个的父对象
        *XML DOM 针对XML文档的标准模型
        *HTML DOM 针对HTML文档的标准类型

    核心 DOM模型:
        1.Document:文档对象
            1.创建(获取):window.document/document
            2.方法:
                1.获取Element对象:
                    1.getElementById():根据id属性值获取对象,id属性值一般唯一
                    2.getElementsByTagName():根据元素名称获取元素对象们,返回一个数组
                    3.getElementsByClassName():根据Class的属性值获取元素对象们,返回一个数组
                    4.getElementByName():根据Name属性获取元素对象们,返回一个数组
                2.创建其他Element对象
                    1.createAttribute(name)	创建拥有指定名称的属性节点，并返回新的 Attr 对象。
                    2.createElement()	创建元素节点。
                    3.createElement()	创建元素节点。
                    4.createTextNode()	创建文本节点。
            3.属性:
        2.Element:元素对象
            1.获取/创建:通过document来获取和创建
            2.方法:
                1.setAttribute()	添加新属性。
                2.removeAttribute()	删除指定的属性。
            3.属性:
        6.Node:节点对象,其它五个的父对象
            特点:所有dom对象都可以被认为是一个节点
            方法:
                CURD DOM树:
                    1.appendChild()	向节点的子节点列表的结尾添加新的子节点。
                    2.removeChild()	删除（并返回）当前节点的指定子节点。
                    3.replaceChild()	用新节点替换一个子节点。
            属性:parentNode	返回节点的父节点。
    HTML DOM模型: -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">

    <a >点我</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

 
    <script>
        //  2.getElementsByTagName():根据元素名称获取元素对象们,返回一个数组
        var divs=document.getElementsByTagName("div");
        // alert(divs.length); //5

        // 3.getElementsByClassName():根据Class的属性值获取元素对象们,返回一个数组
        var div_cls=document.getElementsByClassName("cls1");
        // alert(div_cls.length); //2

        // 4.getElementByName():根据Name属性获取元素对象们,返回一个数组
        var div_name=document.getElementsByName("username");
        // alert(div_name.length); //1

        // 2.createElement()	创建元素节点。
        var table=document.createElement("table");
        // alert(table);

        var btn_set=document.getElementById("btn_set");
        btn_set.onclick=function(){
            // 获取a标签
            var element=document.getElementsByTagName("a")[0];
            element.setAttribute("href","https://www.baidu.com");
        }

        var btn_remove=document.getElementById("btn_remove");
        btn_remove.onclick=function(){
            // 获取a标签
            var element=document.getElementsByTagName("a")[0];
            element.removeAttribute("href");
        }


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

Node对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        border: 1px solid red;
    }
    #div1{
        width:200px;
        height:200px;
    }
    #div2{
        width:100px;
        height:100px;
    }
    #div3{
        width:100px;
        height:100px;
    }
</style>
<body>
    <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>
       <!-- 超链接功能:
            1.可以被点击:样式
            2.点击后跳转到href指定的url
        需求:保留1功能去掉2功能
        实现:href="javascript:void(0);" -->
       <!-- <input type="button" id="del" value="删除子节点"> -->
    <script>
        // 1.appendChild()	向节点的子节点列表的结尾添加新的子节点。
        var element_a=document.getElementById("add");
        element_a.onclick=function(){
            var div1=document.getElementById("div1");
            var div3=document.createElement("div");
            div3.setAttribute("id","div3");
            div1.appendChild(div3);
        }
        // 2.removeChild()	删除（并返回）当前节点的指定子节点。
        // 获取超链接
        var element_a=document.getElementById("del");
        element_a.onclick=function(){
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            div1.removeChild(div2);
        }
        // 3.replaceChild()	用新节点替换一个子节点。

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

案例:动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<style>
    div{
        text-align:center;
        margin: 50px;
    }
    table{
        margin: auto;
        width: 500px;
        border:1px solid;
    }
    td,th{
        border:1px solid;
        text-align: center;
        margin:50px;
    }
</style>
<body>
<div>
    <input type="text" placeholder="请输入学号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="gender">
    <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>张三</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>

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

        <tr>
            <td>3</td>
            <td>小芳</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的标签体

            var td_id=document.createElement("td");
            text_id=document.createTextNode(id);
            td_id.appendChild(text_id);
            var td_name=document.createElement("td");
            text_name=document.createTextNode(name);
            td_name.appendChild(text_name);
            var td_gender=document.createElement("td");
            text_gender=document.createTextNode(gender);
            td_gender.appendChild(text_gender);

            var td_a=document.createElement("td");
            var a=document.createElement("a");
            a.setAttribute("href","javascript:void(0);")
            a.setAttribute("onclick","delTr(this);")
            var text_a=document.createTextNode("删除");
            a.appendChild(text_a);
            td_a.appendChild(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);
        }

        // 2.删除:
        function delTr(obj){
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>