JS学习-DOM

于 2018-08-29 08:32:49 发布
阅读量168 收藏
点赞数
分类专栏： JavaScript 文章标签： BOM JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42828901/article/details/82177372
版权
DOM
 概念： Document Object Model 文档对象模型
     将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

 W3C DOM 标准被分为 3 个不同的部分：

     核心 DOM - 针对任何结构化文档的标准模型
         Document：文档对象
         Element：元素对象
         Attribute：属性对象
         Text：文本对象
         Comment:注释对象
         Node：节点对象，其他5个的父对象
     XML DOM - 针对 XML 文档的标准模型
     HTML DOM - 针对 HTML 文档的标准模型
     核心DOM模型：
     Document：文档对象
        1. 创建(获取)：在html dom模型中可以使用window对象来获取
            1. window.document
            2. document
        2. 方法：
            1. 获取Element对象：
                1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
                2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
            2. 创建其他DOM对象：
                createAttribute(name)
                createComment()
                createElement()
                createTextNode()
        3. 属性
     Element：元素对象
        1. 获取/创建：通过document来获取和创建
        2. 方法：
            1. removeAttribute()：删除属性
            2. setAttribute()：设置属性
     Node：节点对象，其他5个的父对象
         特点：所有dom对象都可以被认为是一个节点
         方法：
            * CRUD dom树：
                * appendChild()：向节点的子节点列表的结尾添加新的子节点。
                * removeChild() ：删除（并返回）当前节点的指定子节点。
                * replaceChild()：用新节点替换一个子节点。
         属性：
            * parentNode 返回节点的父节点。

 HTML DOM
    1. 标签体的设置和获取：innerHTML
    2. 使用html元素对象的属性
    3. 控制元素样式
        1. 使用元素的style属性来设置
            如：
                 //修改样式方式1
                div1.style.border = "1px solid red";
                div1.style.width = "200px";
                //font-size--> fontSize
                div1.style.fontSize = "20px";
        2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

模拟后天管理员对信息的操作：表格的增加删除（面向对象）。

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 1000px;
        }

        td, th, tr {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }

    </style>
</head>
<body>

<div align="center">
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="gender">
    <input type="button" value="添加" id="button_add">
</div>
<table id="table">
    <caption>学生管理系统</caption>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>

    </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>
</table>

<script>
    //获取button
    var button_add = document.getElementById("button_add");

    button_add.onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var table = document.getElementById("table");

        var tr = document.createElement("tr");
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        tr.appendChild(td_id);

        /*var tr = document.createElement("tr");
        //创建td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        tr.appendChild(td_id);*/

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        tr.appendChild(td_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        tr.appendChild(td_gender);

        var td_option = document.createElement("td");

        var a = document.createElement("a");  //创建超链接
        a.setAttribute("href", "javascript:void(0);");  //设置不能转跳
        a.setAttribute("onclick", "delTr(this)"); //setAttribute() 方法创建或改变某个新属性。

        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);

        td_option.appendChild(a);
        tr.appendChild(td_option);
        table.appendChild(tr);

    };

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

HTML DOM中innerHTML对上面代码的简化

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 1000px;
        }

        td, th, tr {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }

    </style>
</head>
<body>

<div align="center">
    <input type="text" placeholder="请输入编号" id="id">
    <input type="text" placeholder="请输入姓名" id="name">
    <input type="text" placeholder="请输入性别" id="gender">
    <input type="button" value="添加" id="button_add">
</div>
<table id="table">
    <caption>学生管理系统</caption>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>

    </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>


</table>
<script>
    var button_add = document.getElementById("button_add");

    button_add.onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var table = document.getElementById("table"); //获取table

        //追加一行
        table.innerHTML +="<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "    </tr>";
    }


    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值