JavaScript DOM（全选反选全不选的实现、动态表格增加删除的实现）

什么是文档对象模型

u文档对象模型， Document Object Model，简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口

uDOM是一个允许程序和脚本，动态读取和更新文档内容、样式的语言和平台

uDOM是针对html与xml的应用程序接口，编程人员可以通过dom修改html或xml文档中某个元素及其属性和属性值

DOM的树形结构

<html>
    <head>
        <title>树形结构</title>
    </head>

    <body>
        <h1>文档对象模型</h1>
        <p>
            <b>树形结构</b>
        </p>
    </body>
</html>

document对象方法

u在所有的节点类型中，document节点是一个HTML文档中所有元素的根节点，是整个文档树的根(root)，我们使用document节点生成页面中的元素

方法名	说明
createAttribute()	根据指定的属性名，创建一个属性节点，返回新的Attr对象
createElement()	根据指定的元素名，创建一个元素
createTextNode()	创建一个文本元素
getElementById()	根据ID获取元素
getElementsByName()	返回指定名称的元素列表

属性名	说明
childNodes	返回当前节点的子节点组成的node数组列表，没有子节点返回空数组
firstChild	返回当前节点的node型的第一个子节点，没有返回null
lastChild	返回当前节点的node型的最后一个子节点，没有则返回null
nextSibling	返回当前节点的node型的下一个兄弟节点，没有则返回null
nodeName	返回当前节点的名字
nodeType	返回当前节点的类型
parentNode	返回当前节点的Node型的父节点，没有则返回null
previousSibling	返回当前节点的Node型的前一个兄弟节点，没有返回null

Node对象方法

方法名	说明
appendChild(arg)	为当前节点添加一个子节点
hasChildNodes()	判断当前节点是否有子节点
insertBefore(arg,arg)	当前节点指定的子节点之前添加一个子节点；如果指定的子节点为null或不存在，直接在指定的节点的最后添加一个子节点
removeChild(arg)	将指定的子节点删除并返回
replaceChild(arg)	返回被替代的子节点，并用指定的子节点代替；如果指定的子节点为null或不存在，直接将被替代的子节点删除

节点与元素

uA node can be an element node, an attribute node, a text node, or any other of the node types

一个节点可以是一个元素节点，一个属性节点，一个文本节点，或任何其他的节点类型的节点

节点 :HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

Ø整个文档是一个文档节点

Ø每个 HTML 标签是一个元素节点

Ø包含在 HTML 元素中的文本是文本节点

Ø每一个 HTML 属性是一个属性节点

Ø注释属于注释节点

u通过Element对象的属性和方法可以方便地进行对页面元素各种控制和操作

属性名	说明
id	返回当前元素的ID
innerHTML	返回当前元素的HTML标记内容
innerText	以文本的形式返回当前元素的内容
style	返回当前元素的样式
tagName	返回当前元素的标记名

方法名	说明
blur()	将键盘焦点从当前元素移开的事件
click()	在当前元素上模拟鼠标单击的事件
focus()	使当前元素获得焦点的事件
getAttribute()	返回当前节点中指定属性的值
getAttributeNode()	返回当前节点的指定属性值得Attr节点
getElementsByTagName()	返回指定标记名的元素数组
hasAttribute()	如果指定的属性存在，返回true；否则返回false
removeAttribute()	将制定的属性删除
setAttribute()	为元素添加指定的属性

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。JavaScript能改变页面中所有HTML元素，能改变所有HTML属性，能改变所有CSS属性，能对页面中的所有事件作出反应。

通过JavaScript操作HTML元素的时候，需要找到该元素，有以下方式来找到该元素：

①通过id找到HTML元素：document.getElementById("id")

②通过标签名找到HTML元素：document.getElementByTagName("标签名")

③通过类名找到HTML元素:document.getElementByClassName("类名")

④通过name属性找到HTML元素:document.getElementByName("name")

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>爱好</title>
    <script type="text/javascript">
        //实现全选
        function checkAll() {
            var hobby = document.getElementsByName("hobby");
            for (var i = 0; i < hobby.length; i++) {
                hobby[i].checked = true;
            }
        }

        //实现全不选
        function clearAll() {
            var hobby = document.getElementsByName("hobby");
            for (var i = 0; i < hobby.length; i++) {
                hobby[i].checked = false;
            }
        }

        //实现反选
        function checkInverse() {
            var hobby = document.getElementsByName("hobby");
            for (var i = 0; i < hobby.length; i++) {
                hobby[i].checked = !hobby[i].checked;
            }
        }

        //实现输入数字选择
        function numberCheck() {
            var number = document.getElementById("number").value;
            if (parseInt(number) > 3 || parseInt(number) < 1) {
                alert("请输入1-3之间的数字！");
            } else {
                var hobby = document.getElementsByName("hobby");
                hobby[parseInt(j) - 1].checked = true;
            }
        }
    </script>
</head>

<body>
    <form>
        请选择你的爱好：<br />
        <input type="checkbox" name="hobby" />1.音乐
        <input type="checkbox" name="hobby" />2.登山
        <input type="checkbox" name="hobby" />3.跑步<br />
        <input type="button" value="全选" onclick="checkAll()" />
        <input type="button" value="全不选" onclick="clearAll()" />
        <input type="button" value="反选" onclick="checkInverse()" />
        <p>请输入您要选择爱好的序号，序号为1-3:</p>
        <input id="number" name="number" type="text">
        <input name="ok" type="button" value="确定" onclick="numberCheck()">
    </form>
</body>

</html>

改变HTML输入流

document.write(),可用于直接向输出流写内容。

改变HTML内容

document.getElementById(id).innerHTML="abcd";

innerHTML:添加元素到指定节点，可以添加文本及html标签：属于覆盖式写入

innerText：添加文本内容，html标签不会格式化

改变HTML属性

document.getElementById(id).attribute=新属性值

attribute指属性

改变CSS样式

document.getElementById(id).style.property=新样式

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    <title>javascript</title>

    <link rel="stylesheet" href="change.css" />
    <script type="text/javascript">
        //定义"改变宽高"的函数
        function changeWidth() {
            var hw = document.getElementById("idtest")
            hw.style.width = "700px";
            hw.style.height = "500px";
        }

        //定义"隐藏内容"的函数
        function changeNone() {
            var None = document.getElementById("idtest");
            None.style.display = "none";
        }

        //定义"显示内容"的函数
        function changeBlock() {
            var Block = document.getElementById("idtest");
            Block.style.display = "block";
        }

        //定义"取消设置"的函数
        function cancel() {
            var message = confirm("你确定要重置所有设置么？");
            if (message == true)
                idtest.removeAttribute("style");
        }

        //定义"改变颜色"的函数
        function changeColor() {
            var color = document.getElementById("idtest");
            color.style.color = "red";
            color.style.backgroundColor = "green";
        }
    </script>
    <scr </head> <body>
        <div id="idtest">
            <p>JavaScript的DOM模型</p>
        </div>
        <form>
            <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
            <input type="button" value="改变颜色" onClick="changeColor()">
            <input type="button" value="改变宽高" onClick="changeWidth()">
            <input type="button" value="隐藏内容" onClick="changeNone()">
            <input type="button" value="显示内容" onClick="changeBlock()">
            <input type="button" value="取消设置" onClick="cancel()">
        </form>

        </body>

</html>

body {
    font-size: 12px;
}

#idtest {
    height: 300px;
    width: 400px;
    border: #333 solid 1px;
    padding: 5px;
}

p {
    line-height: 18px;
    text-indent: 2em;
}

元素操作

创建新元素：如果需要在HTML中添加新的元素，必须先创建改元素的节点，然后向一个已经创在的元素追加该元素。

步骤：

①获取父节点

②createElement(标签名)，创建标签

③父节点.appendChild(创建的子节点)，追加

下面通过代码来学习一下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function create() {
            //获取父节点
            var para = document.getElementById("div1");
            //获取要创建的节点名
            var e1 = document.getElementById("e").value;
            console.log(e1);
            //获取要创建的元素
            var t1 = document.getElementById("t").value;
            //创建节点
            var ele = document.createElement(e1);
            //添加元素
            var node = document.createTextNode(t1);
            //将元素追加入节点
            ele.appendChild(node);
            //将要创建的节点追加到已有的节点
            para.appendChild(ele);
        }
    </script>
</head>

<body>
    <div id="div1">
        <p>第一个段落</p>
        <p>第二个段落</p>

    </div>
    请输入需要创建的节点:<input type="text" id="e" />
    请输入需要创建的元素:<input type="text" id="t" />
    <input type="button" value="创建" onclick="create()" />
</body>

</html>

删除已有的HTML元素

步骤：

①找到父节点

②找到需要删除的子节点

③父节点.removeChild(子节点)

或者

①找到需要删除的子节点

②子节点.parentNode:通过值节点直接找到父节点

③删除子节点

下面通过代码来学习：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function removeTest() {
            //获取需要删除的子节点的名称
            var sonName = document.getElementById("r").value;
            //获取需要删除的子节点
            var sonNode = document.getElementById(sonName);
            //获取需要删除的子节点的父节点
            var para = sonNode.parentNode;
            para.removeChild(sonNode);
        }
    </script>
</head>

<body>
    <div id="div1">
        <p id="p1">第一个段落</p>
        <p id="p2">第二个段落</p>
        <p id="p3">第三个段落</p>
    </div>
    请输入要删除的段落（p1~p3）:<input type="text" id="r" />
    <input type="button" value="删除" onclick="removeTest()" />
</body>

</html>

下面我们来做一个练习，需求：创建一个学生表格，可以实现添加学生和删除学生，初始表格只有表头

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //获取tr
        window.onload = function () {
            var tr = document.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++) {
                bc(tr[i]);
            }
        }
        //使鼠标移上和移开tr发生一点背景的变化
        function bc(obj) {
            obj.onmouseover = function () {
                obj.style.backgroundColor = "#f2f2f2";
            }
            obj.onmouseout = function () {
                obj.style.backgroundColor = "#fff";

            }
        }
        //添加
        function addTest() {
            //获取父节点
            var table = document.getElementById("table1");
            //创建子节点tr
            var tr = document.createElement("tr");
            //创建子节点td1-td3
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            //获取姓名和学号
            var name = prompt("请输入学号");
            var num = prompt("请输入姓名");
            if (name && num) {
                td1.innerHTML = num;
                td2.innerHTML = name;
                td3.innerHTML = "<input type='button' value='删除' onclick='deleteTest(this)'>";
                //设置属性，居中
                tr.align = "center";
                //把td1-td3追加到tr中
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);

                //把tr添加到table
                table.appendChild(tr);
                var tr = document.getElementsByTagName("tr");
                for (var i = 0; i < tr.length; i++) {
                    bc(tr[i]);
                }
            } else if ((name === "") || (num === "")) {
                alert("学号或姓名不能为空，创建失败");
            } else {
                alert("您已取消添加");
            }


        }
        //删除
        function deleteTest(obj) {
            var r = confirm("是否删除？")
            if (r) {
                //获取table节点
                var table = document.getElementById("table1");
                //获取table下的子节点,即需要删除的节点
                var son = obj.parentNode.parentNode;
                //删除
                table.removeChild(son);
            } else {
                alert("您已取消删除！");
            }

        }
    </script>
</head>

<body>
    <table id="table1" border="1px" width="50%">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>操作</th>
        </tr>
    </table>
    <input type="button" value="添加一行" onclick="addTest()" />
</body>

</html>

操作HTML标签：

①获取/修改属性：document.getElementById("ID值");

②获取/修改标签内容：

文本属性：document.getElementById("ID值").innerText="";

内嵌HTML：document.getElementById("ID值").innerHTML = "<p>xxxx</p>"

获取输入框的值：document.getElementById("ID值").value = "";

JavaScript DOM（全选反选全不选的实现、动态表格增加删除的实现）

猜你喜欢