JavaScript DOM文档对象模型小结

最新推荐文章于 2021-11-19 14:48:29 发布

ZzzzzzP丶

最新推荐文章于 2021-11-19 14:48:29 发布

阅读量421

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43131346/article/details/100889729

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

分类
- Node：节点对象，其他五个节点的父对象，里面封装了其他DOM通用方法，所以其他对象都可以称为节点对象。
- Document：文档对象/节点
- Element：元素对象/节点
- Attribute：属性对象/节点
- Text：文本对象/节点
- Comment：注释对象/节点

Node

方法

父节点.appendChild(子节点)：给父节点添加子节点

父节点.removeChild(子节点)：删除父节点的子节点
属性

parentNode：获取父节点

Document

获取Element对象方法
1. getElementById()：根据id属性值获取Element（标签）对象
2. getElementsByTagName()：根据元素(标签)名称获取Element(标签)对象(复数数组)，获取要使用索引[]
3. getElementsByClassName()：根据Class属性值获取Element(标签)对象(复数数组)，获取要使用索引[]
4. getElementsByName()：根据name属性值获取Element(标签)对象(复数数组)，获取要使用索引[]
创建Element对象方法

createElement(“标签名”); 创建元素节点

！！！这个方法要用document调用。

！！！这个方法要用document调用。

！！！这个方法要用document调用。

Element

方法
- 元素对象.removeAttribute(“属性名”)：删除属性
- 元素对象.setAttribute(“属性名",“属性值”)：设置属性

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM综合练习</title>
    <script>
        window.onload=function (){
            document.getElementById("get_stu").onclick=function () {
                //获取各个输入框输入的值
                var id = document.getElementById("id").value;
                var name = document.getElementById("name").value;
                var age = document.getElementById("age").value;
                var gender = document.getElementById("gender").value;
                var hobby = document.getElementById("hobby").value;
                //获取表格,因为只有一个表格，所以通过标签名进行获取
                var table = document.getElementsByTagName("table")[0];
                //创建行标签tr
                var tr = document.createElement("tr");
                //创建第一列id的列标签元素td
                var id_td = document.createElement("td");
                //创建文本节点
                var id_text = document.createTextNode(id);

                //2-5列参考第一列注释
                var name_td = document.createElement("td");
                var name_text = document.createTextNode(name);

                var age_td = document.createElement("td");
                var age_text = document.createTextNode(age);

                var gender_td = document.createElement("td");
                var gender_text = document.createTextNode(gender);

                var hobby_td = document.createElement("td");
                var hobby_text = document.createTextNode(hobby);

                //删除操作
                var del_td = document.createElement("td");
                //创建一个a标签元素
                var del_a = document.createElement("a");
                //给a标签的元素进行属性赋值
                del_a.setAttribute("href","javascript:void(0);");
                del_a.setAttribute("onclick","del(this)");
                //给a标签的文本赋值
                var del_text = document.createTextNode("删除");
                //通过a标签添加文本节点
                del_a.appendChild(del_text);

                //通过td标签添加文本对象子节点
                id_td.appendChild(id_text);
                name_td.appendChild(name_text);
                age_td.appendChild(age_text);
                gender_td.appendChild(gender_text);
                hobby_td.appendChild(hobby_text);
                del_td.appendChild(del_a);
                //通过tr标签添加td节点
                tr.appendChild(id_td);
                tr.appendChild(name_td);
                tr.appendChild(age_td);
                tr.appendChild(gender_td);
                tr.appendChild(hobby_td);
                tr.appendChild(del_td);
                //通过table标签添加子节点tr
                table.appendChild(tr);
            };
        };
        //删除方法
        function del(obj) {
            //调用该方法的标签获取父节点可以得到table（<a>(obj) -> <td> -> <tr> -> <table>）
            var table = obj.parentNode.parentNode.parentNode;
            //同样的方式获取tr标签
            var tr = obj.parentNode.parentNode;
            //通过table节点删除tr节点完成删除
            table.removeChild(tr);
        }
    </script>
</head>
<body>
<br>
<p>学生信息</p>
<br>
<label>
    学号：<input type="text" id="id" name="stu_id">
</label>
<br>
<label>
    姓名：<input type="text" id="name" name="stu_name">
</label>
<br>
<label>
    性别：<input type="text" id="age" name="stu_age">
</label>
<br>
<label>
    性别：<input type="text" id="gender" name="stu_gender">
</label>
<br>
<label>
    爱好：<input type="text" id="hobby" name="stu_hobby">
</label>
<br>
<input type="button" id="get_stu" name="get_stu" value="提交">
<table>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>爱好</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>66</td>
        <td>18</td>
        <td>女</td>
        <td>Gameing</td>
        <!-- a标签作为按钮使用，将href属性设置为javascript:void(0) onclick调用定义好的对象即可 -->
        <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
    </tr>
</table>
</body>
</html>

ZzzzzzP丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM文档对象模型小结

分类Node：节点对象，其他五个节点的父对象，里面封装了其他DOM通用方法，所以其他对象都可以称为节点对象。Document：文档对象/节点Element：元素对象/节点Attribute：属性对象/节点Text：文本对象/节点Comment：注释对象/节点Node方法父节点.appendChild(子节点)：给父节点添加子节点父节点.removeChild(子节...
复制链接

扫一扫