十一. DOM操作

11.1 DOM的概念

DOM编程思想指的是通过操作文档对象模型（DOM）来动态地改变HTML文档的内容、结构和样式的编程方法。DOM是一种和平台和语言无关的API，用于访问和操作HTML和XML文档的内容和结构。

DOM编程思想的核心是将HTML文档视为一个对象树(DOM树），通过JavaScript代码来操作这个对象树实现对文档的动态改变。

11.2 DOM树

简述：

浏览器把HTML文档从服务器上下载下来之后就开始按照从上到下的顺序读取HTML标签。每一个标签都会被封装成一个对象。

而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的父子关系被放到一个树形结构的对象中。

以上的对象中包含了所有标签对象的整个树形结构，该对象就是JavaScript中的一个可以直接使用的内置对象document

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f() {
            var arrs=new Array();
            arrs[0]=10;
            arrs[1]="java";
            //压入数据
            arrs.push(12);
            arrs.push("mysq1");
            console.log(arrs)
            var splice = arrs.splice(1,2);
            console.log(splice);
        }
    </script>
</head>
<body>
<p>天空之花</p>
<input type="button" value="点我" onclick="f()">
</body>
</html>

以上的HTML标签会被解析如下所示：

11.3 各个组成部分的类型

整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

其实严格来说，JavaScript并不支持真正意义上的继承，这里借用Java中的继承概念，从逻辑上来帮助我们理解各个类型之间的关系。

组成部分	节点类型	具体类型
整个文档	文档节点	Document
HTML标签	元素节点	Element
HTML标签内的文本	文本节点	Text
HTML标签内的属性	属性节点	Attr
注释	注释节点	Comment

11.4 查询

①在整个文档范围内查询元素节点

功能	API	返回值
根据id值查询	document.getElementById(“id值”)	一个具体的元素节
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementsByName(“name值”)	元素节点数组
根据类名查询	document.getElementsByClassName(“类名”)	元素节点数组

从文档中找id属性值为username的元素（标签）

代码演示如下：

document.getElementById("username");

从文档中查找标签名为input的元素节点数组

代码演示如下：

document.getElementsByTagName("input");

从文档中查找name属性值为aaa的元素节点数组

document.getElementsByName("aaa");

从文档中查询相应类名的元素节点数组（一般前端人员主要使用）

代码演示如下：

document.getElementsByclassName()；

②在具体元素节点范围内查找子节点

功能	API	返回值
查找子标签	element.children	返回子标签数组
查找第一个子标签	element.firstElementChild	标签对象
查找最后一个子标签	element.lastElementChild	节点对象

③查找指定元素节点的父节点

功能	API	返回值
查找指定元素节点的父标签	element.parentElement	标签对象

④查找指定元素节点的兄弟节点

功能	API	返回值
查找前一个兄弟标签	node.previousElementSibling	标签对象
查找后一个兄弟标签	node.nextElementSibling	标签对象

⑤查询案例

部分代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div id="div1">
            <input type="text" id="username" name="aa"><br>
            <input type="text" id="password" name="aa"><br>
            <input type="text" id="email" name="aa"><br>
            <input type="text" id="address" name="d"><br>
        </div>
        <input type="button" value="提交" id="btn1"/>
        <input type="button" value="重置" id="btn2"/>
        <script>
             //btn2 已经加载了
             var  e =  document.getElementById("btn2");
             console.log(e);
             //使用 DOMContentLoaded 事件来等待 DOM 加载完成后再执行代码。在事件处理程序中，你可以访问 DOM 元素并执行任何必要的操作。
             document.addEventListener("DOMContentLoaded",
                 function() {
                  //通过 document.getElementById() 方法获取页面上具有指定 ID 的元素，并将它存储在 btn2 变量中。
                 let btn2 = document.getElementById("btn2");
               /*
                 这段代码首先检查 ID 为 “btn2” 的按钮是否存在，然后再设置它的 onclick 属性。
                 如果按钮存在，它将设置 onclick 属性为一个函数，该函数将在单击按钮时执行。
                 */
                 if (btn2) {
                     btn2.onclick = function () {
                         var div1 = document.getElementById("div1");
                         var children = div1.children;
                         console.log(children.length);
                         //如果要查找div标签中前两个元素
                         for (var i = 0; i < 2; i++) {
                             console.log(children[i]);
                         }
                         //获取第一个子标签
                         console.log(div1.firstElementChild);
                         //获取最后一个子标签
                         console.log(div1.lastElementChild);
                     }
                 }
             });
        </script>
</body>
</html>

11.5 操作标签体的内容(双标签)

①获取内容

element.innerText     获得纯文本
element.innerHTML     获得纯文本+html标签

②赋值

element,innerText="纯文本"
element.innerHTML="文本中的标签可以被识别"

11.6 操作属性（单标签和双标签都可以）

①取属性值

element.属性名

②赋属性值

element.属性名=值

11.7 dom操作之新建和删除

API	功能
document.createElement(“标签名”)	创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)	创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)	将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)	将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新节点替换原有的旧子节点
element.remove()	删除某个标签

增删案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul1">
    <li>武汉</li>
    <li id="sh">上海</li>
    <li>深圳</li>
    <li id="gz">广州</li>
</ul>
<input type="button" value="添加城市" id="citys">
<script>
    document.getElementById("citys").onclick=function () {
       //1.创建新城市纽约，把它放到ul标签中的末尾
        var li =   document.createElement("li");//创建元素
        li.innerText="纽约";
        /*var text=document.createTextNode("纽约")；//创建文本节点
          li.appendchild(text);*/
        //追加至末尾
        var  ul1 =  document.getElementById("ul1");
        ul1.appendChild(li);
        //把纽约放到上海前面
      /*
        var sh = document.getElementById("sh");
        ul1.insertBefore(li,sh);
      */
      //用纽约将广州替换
        var gz = document.getElementById("gz");
        ul1.replaceChild(li,gz);
        //删除url
        ul1.remove();
    }
</script>
</body>
</html>

十二.事件绑定

12.1 事件的概念

HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

12.2 事件的绑定方式

①动态绑定

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点我" id="btn01"/>
    <script>
        document.getElementById("btn01").onclick=function (ev) {
            var flag=confirm("确认删除吗?");
            if (flag){
                alert("已成功删除")
            }else {
                alert("未成功删除")
            }
            console.log(flag)
        }
    </script>
</body>
</html>

在js代码内获得需要绑定的元素对象

var btne1=document.getElementById("btne1");

为该元素绑定事件类型

btne1.οnclick=function 函数名() {
  代码体
}

②静态绑定

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun01(a,b) {
            alert("调用到fun01函数"+a+"\t"+b)
        }
    </script>
</head>
<body>
<input type="button" value="按钮" onclick="fun01(10,'java')" >
</body>
</html>

在需要添加事件的元素上，设置属性

<body>
<input type="button" value="按钮" onclick="fun01(10,'java')" >
</body>

准备一个有名函数

function fun1(a,b){
  alert("调用到fun01函数"+a+b);
}

12.3 事件的类型

onclick ：单击事件

ondblclick： 双击事件

tips：

event：事件对象

event.target 事件作用在的那个元素对象上

附注：常见事件（了解）

属性	此事件发生在何时…
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onchange	域的内容被改变。
onblur	元素失去焦点。
onfocus	元素获得焦点。
onload	一张页面或一幅图像完成加载。
onsubmit	确认按钮被点击；表单被提交。
onkeydown	某个键盘按键被按下。
onkeyup	某个键盘按键被松开。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmouseout	鼠标从某元素移开。
omouseover	鼠标移到某元素之上。
onmousemove	鼠标被移动。

12.4 综合案例：动态表格

案例需求：

① 创建一个table，初始化用户的一些信息(编号、姓名、性别等)

② 创建一个表单，用户输入用户的信息

③ 表单中创建添加按钮，点击添加按钮，输入的用户信息追加到表格内

④ 每条用户信息后都有一个删除的超链接，点击删除，删除当前用户信息

案例图解如下：

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <script>
            //删除用户
            function f() {
              var elementById = document.getElementById(event.target.id);
              var parentElement = elementById.parentElement.parentElement;
              parentElement.remove();
            }
            //添加用户
            function f1() {
                //1.新建一行外加四个单元格
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                //2.新建三个文本框
                var text01 = document.getElementById("text01");
                var text02 = document.getElementById("text02");
                var text03 = document.getElementById("text03");
                //3.用户会写内容到文本框中，我们将文本框中的内容写到td中，然后tr追加td
                td1.innerText=text01.value
                tr.appendChild(td1)
                td2.innerText=text02.value
                tr.appendChild(td2)
                td3.innerText=text03.value
                tr.appendChild(td3)
                td4.innerHTML="<input type='button' value='删除'  id='btn' οnclick='f()'/>"
                tr.appendChild(td4)
                //5.将tr添加至table1表中
                document.getElementById("table1").appendChild(tr);
                //每次输入用户信息，文本框就自动清空·
                text01.value=" ";
                text02.value=" ";
                text03.value=" ";
            }
    </script>
</head>
<body>
<table border="1" cellspacing="0px" width="250px"  align="center" id="table1">
    <tr>
        <th>序号</th>
        <th>用户</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr id="table1_tr1">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>
            <input type="button" value="删除" id="btn01" onclick="f()">
        </td>
    </tr>
    <tr id="table1_tr2">
        <td>2</td>
        <td>李四</td>
        <td>女</td>
        <td>
            <input type="button" value="删除" id="btn02" onclick="f()">
        </td>
    </tr>
    <tr id="table1_tr3">
        <td>3</td>
        <td>王五</td>
        <td>不详</td>
        <td>
            <input type="button" value="删除" id="btn03" onclick="f()">
        </td>
    </tr>
</table>
<table border="0" cellspacing="0px" width="250px"  align="center" id="table2">
    <tr>
        <td>序号</td>
        <td colspan="3"><input type="text" id="text01"> </td>
    </tr>
    <tr>
        <td>姓名</td>
        <td colspan="3"><input type="text" id="text02"></td>
    </tr>
    <tr>
        <td>性别</td>
        <td colspan="3"><input type="text" id="text03"></td>
    </tr>
    <tr>
        <td colspan="4" align="center"><input type="button" value="添加用户" id="btn04" onclick="f1()"></td>
    </tr>
</table>
</body>
</html>

详解JavaScript（ECMAScript与DOM）（下）

十一. DOM操作

11.1 DOM的概念

11.2 DOM树

11.3 各个组成部分的类型

11.4 查询

11.5 操作标签体的内容(双标签)

11.6 操作属性（单标签和双标签都可以）

11.7 dom操作之新建和删除

十二.事件绑定

12.1 事件的概念

12.2 事件的绑定方式

12.3 事件的类型

12.4 综合案例：动态表格

热门文章

最新文章

相关课程

相关电子书

相关实验场景