JavaScript（7）——DOM

什么是 DOM？

DOM是 Document Object Model（文档对象模型)的缩写

DOM是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

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

核心 DOM - 针对任何结构化文档的标准模型，无论是XML，HTML以及其它的标记语言都是通用的
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

区别

对于核心DOM,　　API简单，原理简单，编码复杂；

HTML DOM，API复杂，编程形象化，编码轻松

对于核心DOM只有标记语言的概念，并不认识各个标签的含义，标记语言是由节点互相嵌套而成；

元素结点
属性节点
文本节点
注释结点

核心DOM API：

document.createElement(nodename)

The createElement() method creates an Element Node with the specified name.

document.createTextNode(text)

The createTextNode() method creates a Text Node with the specified text.

node.appendChild(node)

The appendChild() method appends a node as the last child of a node.

node.insertBefore(newnode,existingnode)

The insertBefore() method inserts a node as a child, right before an existing child, which you specify.You can also use the insertBefore method to insert/move an existing element (See "More Examples").

node.firstChild

The firstChild property returns the first child node of the specified node, as a Node object.

坑点：返回第一个结点，通常来说都有一个换行，它属于文本节点，因此firstChild通常会返回文本结点；因此建议用element.firstElementChild

element.firstElementChild

The firstElementChild property returns the first child element of the specified element.

node.removeChild(node)

The removeChild() method removes a specified child node of the specified element.

children和childNodes的区别

element.children

The children property returns a collection of an element's child elements, as an HTMLCollection object.children only contain element nodes.

element.childNodes

The childNodes property returns a collection of a node's child nodes, as a NodeList object.，including text nodes and comment nodes。

创建一个结点基本步骤:

创建元素结点 tag【createElement】，创建文本节点text【createTextNode】，添加到元素结点【tag.appendChild】，创建属性节点 attr【createAttribute】

，设置属性节点值【attr.value = ...】，设置到元素节点【tag.setAttributeNode】；

核心DOM就是：节点套节点，孩子找双亲

HTML DOM API：

专门用来操作HTML的API

核心DOM是万能的，若HTML DOM也没有想要的API就要自己合理利用两者去编程；

练习：

添加，修改，删除学生信息

table显示学生信息

点击学生信息对应行，将学生信息再次显示在输入框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <script src="../../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="../base.js"></script>
    <style>
        .rows{
            cursor: pointer;
        }
    </style>
</head>
<body>
   <div class="container">
       <h1 class="my-5">学生信息登记</h1>
       <form class="form-inline">
            <div class="form-group mr-3">
                    学号:
            </div>
            <div class="form-group">
                <label for="elemt" class="sr-only"></label>
                <input type="text"  class="form-control mr-3" id="id">
            </div>
            <div class="form-group mr-3">
                    姓名:
            </div>
            <div class="form-group">
                <label for="elemt" class="sr-only"></label>
                <input type="text"  class="form-control mr-3" id="name">
            </div>            
            <div class="form-group mr-3">
                    年龄:
            </div>
            <div class="form-group">
                <label for="elemt" class="sr-only"></label>
                <input type="text"  class="form-control mr-3" id="age">
            </div>
            <button id="add" type="button" class="btn btn-primary mr-3" onclick="addStu();" >添加/修改</button>
           </form>
           <hr>
           <h3 class="my-5">学生列表</h1>
    <table class="table table-striped" id="tb">
        <tbody>
                <tr>
                        <th>#</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
        </tbody>
    </table>
   </div>
   <script src="stu_info.js"></script>
</body>
</html>

/**
 * Class Page
 */
function Page(){
    this.students = [new Student('3177102326','王有才',21)]; //数组
    this.table = $('tb'); //表格
    this.ipt = document.getElementsByTagName('input');
}


/**
 * Class Student
 * @param {*} stuID 
 * @param {*} stuName 
 * @param {*} stuAge 
 */
function Student(stuID,stuName,stuAge){
        this.id = stuID;
        this.name = stuName;
        this.age = stuAge;
}

/**
 * 添加/更新学生到数组
 */
function addStu(){
        var id = $('id').value;
        var name = $('name').value;
        var age = $('age').value;
        for(var i = 0; i<page.students.length;i++){
            if(page.students[i].id === id){
                page.students[i].name = name;
                page.students[i].age = age;
                vendor(page.students, page.table);
                return;
            }
        }
        page.students.push(new Student(id,name,age));
        vendor(page.students, page.table);
}

/**
 * 删除位于index下的数组元素
 * @param {*} index 
 */
function delStu(index){
    page.students.splice(index,1);
    vendor(page.students, page.table);
    event.stopPropagation(); //防止冒泡
}


/**
 * 
 * 在index位置上的数组元素的信息填入输入框中
 * @param {*} index 
 */
function getStuInfo(index){
    $('id').value = page.students[index].id;
    $('name').value = page.students[index].name;
    $('age').value = page.students[index].age;
}


/**
 * 将数组中的学生信息渲染到表格中
 * @param {*} arr 渲染数组
 * @param {*} tb 表格
 */
function vendor(arr,tb){
    var strValue = "";
    if (!arr.length) strValue = '<tr><td colspan="5" class="alert alert-primary" role="alert">nothing to be display</td></tr>'; 
    else{
        arr.forEach(function(item,index){
            strValue
            += '<tr class="rows" onclick="getStuInfo('+index+')"><td>'+ (index+1) +'</td><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.age+'</td><td><span class="btn btn-danger" onclick="delStu('+index+')">删除</span></td></tr>'
        });
    }
    tb.getElementsByTagName('tbody')[0].innerHTML = strValue;
}


// /**
//  * 将数组中的学生信息渲染到表格中
//  * 既要添加节点又要添加属性
//  * 若每个cell要添加attribute，必须还得缓存一下，会增加代码量
//  * 单看方便，字符串拼接后使用innerHtml会笔记方便
//  * @param {*} arr 渲染数组
//  * @param {*} tb 表格
//  */
// function vendor(arr, tb){
//     tb.getElementsByTagName('tbody')[0].innerHTML = ""; // 清空原有表格
//     if (!arr.length) {
//         var row = tb.insertRow(-1);
//         row.innerHTML = '<td colspan="5" class="alert alert-primary" role="alert">nothing to be display</td>'
//     }else{
//         arr.forEach(function(item,index){
//             var row = tb.insertRow(-1);  // 坑点:如果table下有thead和tbody，他会插入到thead中
//             row.setAttribute('onclick','getStuInfo('+index+')');
//             row.insertCell(0).innerHTML = index + 1;
//             row.insertCell(1).innerHTML = item.id;
//             row.insertCell(2).innerHTML = item.name;
//             row.insertCell(3).innerHTML = item.age;
//             row.insertCell(4).innerHTML = '<span class="btn btn-danger" onclick="delStu('+index+')">删除</span>';
//         })
//     }
   
// }


var page = new Page();
/**
 * 每个input被focus时选中其value
 */
for(var i = 0; i<page.ipt.length;i++){
    page.ipt[i].onclick = function(){
        this.select();
    }
}
vendor(page.students, page.table);

function $(id){
    return document.getElementById(id);
}
function print(log){
    console.log(log);
}
function getRandom(start, end){
    if(!(start<=end)) return -1;
    return Math.floor(start + Math.random()*(1 + end - start));
}

posted on 2019-10-10 18:51 Magic-Dev 阅读(156) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

导航

公告

JavaScript（7）——DOM

什么是 DOM？

什么是 HTML DOM？

区别

children和childNodes的区别

练习：