一、DOM模型

1、DOM对象简介

（1）DOM，全称“Document Object Model（文档对象模型）”。

（2）DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

（3）在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

（4）可以将其理解成js操作html时的API。

（5）DOM树

①DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素，叫做“DOM树”。

②HTML文档和DOM树中节点是一一对应的。树中的每个节点都是一个DOM对象，树的顶层为document对象，表示整个文档。

在这里插入图片描述
（6）DOM对象，指通过getElementById()、getElementsByTagName()等方法获取到的元素节点。

2、DOM节点常见类型

（1）元素节点

（2）属性节点

（3）文本节点

JavaScript会把元素、属性以及文本当作不同的节点来处理。表示元素的叫做“元素节点”，表示属性的叫做“属性节点”，表示文本的叫做“文本节点”。

只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点

3、DOM节点操作

（1）获取节点

获取的是”元素节点“。

只有选取了元素，才可以对元素进行相应的操作，因此，获取节点是DOM一切操作的基础。

表3-1 获取节点

属性	说明
getElementById(“id值”)	根据id属性来查询节点，返回匹配的第一个节点
getElementsByName(“name 属性值”)	根据name属性来查询，返回所有匹配的节点集合
getElementsByTagName(“标签名”)	根据标签名来查询，返回所有匹配的节点集合
querySelector(“选择器”)	根据css选择器来查询，返回匹配的第一个节点
querySelectorAll(“选择器”)	根据css选择器来查询，返回所有匹配的节点集合

① getElementById()

“get element by id（通过id来获取元素）”

类似于CSS中的id选择器.

document.getElementById("id名")

举例：

<body>
    <div id="xiaoyu">JavaScript入门</div>
    <script type="text/javascript">
        var e = document.getElementById("xiaoyu");
        e.style.color = "red";
    </script>
</body>

使用document.getElementById()的方法获取id为xiaoyu的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。

效果图：
在这里插入图片描述

② getElementsByName()

想要通过name属性来获取表单元素，可以使用getElementsByName()方法来实现。

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

document.getElementsByName("name名")

举例：

<body>
    <input name="web" id="radio1" type="radio" value="HTML"/>
    <input name="web" id="radio2" type="radio" value="CSS"/>
    <input name="web" id="radio3" type="radio" value="JavaScript"/>
    <script type="text/javascript">
        alert(document.getElementsByName("web")[2].value);
    </script>
</body>

结果：弹出对话框，上面显示：JavaScript

③document.title和document.body

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            document.title = "前端核心技术？";
            document.body.innerHTML = "<strong style='color:red'>HTML、CSS、JavaScript</strong>";
        }
    </script>
</head>
<body>
</body>
</html>

结果：
红色加粗HTML、CSS、JavaScript。

（2）创建节点

在JavaScript中，可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。

这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素，一开始在HTML中是不存在的。

		var e1 = document.createElement("元素名");      //创建元素节点
		var txt = document.createTextNode("文本内容");   //创建文本节点
		e1.appendChild(txt);                          //把文本节点插入元素节点中
		e2.appendChild(e1);                          //把组装好的元素插入已存在的元素中

e1表示JavaScript动态创建的元素节点，

txt表示JavaScript动态创建的文本节点，

e2表示HTML中已经存在的元素节点。

A.appendChild(B)表示把B插入到A内部中去，也就是使得B成为A的子节点。

举例：创建简单元素（不带属性）

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oDiv = document.getElementById("content");
            var e1 = document.createElement("strong");
            var txt = document.createTextNode("JavaScript！");
            //将文本节点插入e1元素
            e1.appendChild(txt);
            //将e1元素插入div元素（这个div在HTML已经存在）
            oDiv.appendChild(e1);
        }
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

效果图：
在这里插入图片描述
举例：动态创建提交按钮（带属性）

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oInput = document.createElement("input");
            oInput.id = "submit";
            oInput.type = "button";
            oInput.value = "提交";
            document.body.appendChild(oInput);
        }
    </script>
</head>
<body>
</body>
</html>

效果图：
在这里插入图片描述
举例：动态创建多个元素：（动态创建表格）

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table {
      
      border-collapse:collapse;}
        tr,td
        {
      
      
            width:80px;
            height:20px;
            border:1px solid gray;
        }
    </style>
    <script>
        window.onload = function () 
        {
      
              
            //动态创建表格
            var oTable = document.createElement("table");
            for (var i = 0; i < 3; i++)
            {
      
      
                var oTr = document.createElement("tr");
                for (var j = 0; j < 3; j++)
                {
      
      
                    var oTd = document.createElement("td");
                    oTr.appendChild(oTd);
                }
                oTable.appendChild(oTr);
            }
            //添加到body中去
            document.body.appendChild(oTable);
        }
    </script>
</head>
<body>
</body>
</html>

效果图：
在这里插入图片描述

（3）插入节点

①appendChild()

把新节点插入到当前节点的“内部”。

当前节点.appendChild(新节点)

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oBtn = document.getElementById("btn");
            //为按钮添加点击事件
            oBtn.onclick = function () 
            {
      
      
                var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中去
                oLi.appendChild(textNode);
                //将li元素插入ul元素中去
                oUl.appendChild(oLi);
            };
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>

效果图：

在文本框中输入“jQuery”，然后点击【插入】按钮

注：用JavaScript实现动态换行

//首先创建一个换行的div
var brDiv = document.createElement('br');

brDiv.innerHTML = "<br/>";
					
oUl.appendChild(brDiv);

②insertBefore()

将新节点添加到当前节点的“末尾”。

		当前节点.insertBefore(新节点,ref)

ref指定一个节点，在这个节点前插入新的节点。

举例：

将上述例子中

		//将li元素插入ul元素中去
		oUl.appendChild(oLi);

换成

		//将li元素插入到ul的第1个子元素前面
		oUl.insertBefore(oLi, oUl.firstElementChild);

效果图：

（4）删除节点removeChild()

删除当前节点下的某个子节点。

		当前节点.removeChild(要删除的当前节点下的某个子节点的位置);

举例：删除整个列表

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
      
      
                var oUl = document.getElementById("list");
                document.body.removeChild(oUl);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="删除" />
</body>
</html>

举例：

删除最后一个子元素

		oUl.removeChild(oUl.lastElementChild);

删除第一个子元素

		oUl.removeChild(oUl.firstElementChild);

删除中间元素，要使用DOM遍历。

（5）复制节点cloneNode()

		被复制节点.cloneNode(bool)

参数bool是一个布尔值，取值如下：

（1）true：表示复制节点本身以及复制该节点下的所有子节点；

（2）false：表示仅仅复制节点本身，不复制该节点下的子节点；

举例：

		document.body.appendChild(oUl.cloneNode(1));

（6）替换节点replaceChild()

		被替换节点的父节点.replaceChild(替换后的新节点,被替换的旧节点)

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
      
      
                //获取body中的第1个元素
                var oFirst = document.querySelector("body *:first-child");
                //获取2个文本框
                var oTag = document.getElementById("tag");
                var oTxt = document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                var oNewTag = document.createElement(oTag.value);
                var oNewTxt = document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag, oFirst);
            }
        }
    </script>
</head>
<body>
    <p>JavaScript</p>
    <hr/>
    输入标签：<input id="tag" type="text" /><br />
    输入内容：<input id="txt" type="text" /><br />
    <input id="btn" type="button" value="替换" />
</body>
</html>

效果图：

4、HTML属性操作

指使用JavaScript来操作一个元素的HTML属性，有两种方法：（1）使用“对象属性”。（2）使用“对象方法”。

元素操作，操作的是“元素节点”，在上面1-3节讲述。

属性操作，操作的是“属性节点”，这里讲述。

（1）“对象属性”方式

①获取HTML属性值

		元素名.属性名

举例：获取动态DOM中的属性值

    <script>
        window.onload = function () 
        {
      
      
            //动态创建一个按钮
            var oInput = document.createElement("input");
            oInput.id = "submit";
            oInput.type = "button";
            oInput.value = "提交";
            document.body.appendChild(oInput);
            //为按钮添加点击事件
            oInput.onclick = function () 
            {
      
      
                alert(oInput.id);
            };
        }
    </script>

以下举例获取静态HTML中的属性值。

举例：获取文本框的值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
      
      
                var oTxt = document.getElementById("txt");
                alert(oTxt.value);
            };
        }
    </script>
</head>
<body>
    <input id="txt" type="text"/>
    <input id="btn" type="button" value="获取"/>
</body>
</html>

对于表单元素，HTML会默认给它添加了一个value属性，只是这个value属性是空的。

举例：获取单选框的值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oBtn = document.getElementById("btn");
            var oFruit = document.getElementsByName("fruit");
            oBtn.onclick = function () 
            {
      
      
                //使用for循环遍历所有的单选框
                for(var i=0;i<oFruit.length;i++)
                {
      
      
                    //判断当前遍历的单选框是否选中（也就是checked是否为true）
                    if(oFruit[i].checked)
                    {
      
      
                        alert(oFruit[i].value);
                    }
                }
            };
        }
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <input id="btn" type="button" value="获取" />
</body>
</html>

document.getElementsByName(“fruit”)表示获取所有name属性值为fruit的表单元素。

getElementsByName()只限用于表单元素，它获取的也是一个元素集合，也就是类数组。

获取复选框的值时

		 var str = "";

		if(oFruit[i].checked)
		{
         str += oFruit[i].value;
		}

②设置HTML属性值

		元素名.属性名 = "值"

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var flag = true;
            oBtn.onclick = function () 
            {
      
      
                if (flag){
      
      
                    oPic.src = "/code/js/2.png";
                    flag = false;
                } else {
      
      
                    oPic.src = "/code/js/1.png";
                    flag = true;
                }
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="/code/js/1.png"/>
</body>
</html>

使用了一个布尔变量flag来标识两种状态，使得两张图片可以来回切换。

（2）“对象方法”方式

5、innerHTML和innerText

使用innerHTML属性可以获取和设置一个元素的“内部元素”

使用innerText属性可以获取和设置一个元素的“内部文本”。

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            var oImg = document.createElement("img");
            oImg.className = "pic";
            oImg.src = "images/JavaScript.png";
            oImg.style.border = "1px solid silver";
            document.body.appendChild(oImg);
        }
    </script>
</head>
<body>
</body>
</html>

上面的例子用innerHTML实现如下：

document.body.innerHTML = '<img class="pic" src="images/JavaScript.png" style="border:1px solid silver"/>';

举例：获取innerHTML和innerText

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
      
      
            var oP = document.getElementById("content");
            document.getElementById("txt1").value = oP.innerHTML;
            document.getElementById("txt2").value = oP.innerText;
        }
    </script>
</head>
<body>
    <p id="content"><strong style="color:hotpink;">JavaScript</strong></p>
    innerHTML是：<input id="txt1" type="text"><br />
    innerText是：<input id="txt2" type="text">
</body>
</html>

效果图：

innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
      
      
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.innerHTML = '<span>HTML,</span>\
                           <span style="color:hotpink;">CSS,</span>\
                           <span style="color:deepskyblue;">JavaScript</span>';
        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

innerHTML中使字符串截断分行显示可通过在字符串每一行后面加上个反斜杠（\）来实现，如上述代码所示。

二、事件

①事件：发生在HTML元素上的，可以是用户的行为，也可以是浏览器的行为，如：

·用户点击了某个HTM元素

·用户将鼠标移动到某个HTML元素上

·用户输入数据时光标离开

·页面加载完成

②事件组成

事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数。

1、事件的调用方式

（1）在script标签中调用

		var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
		变量名.事件处理器 = function()
		{
		    ……
		}

举例:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
      
      
            //获取元素
            var oBtn = document.getElementById("btn");
            //为元素添加点击事件
			oBtn.onclick = function () {
      
      alert("JavaScript！");};
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="弹出" />
</body>
</html>

结果：点击弹出按钮，弹出显示JavaScript的对话框。

（2）在元素中调用

指直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
      
      
            alert("JavaScript！");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>

等价于：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" onclick="alert('JavaScript!')" value="弹出" />
</body>
</html>

结果同上。

在script标签中调用事件，需要使用getElementById()等方法来获取想要的元素，然后才能对其进行事件操作。

在元素属性中调用事件，不需要使用getElementById()等方法来获取想要的元素的，因为系统已经知道是哪个元素了。

在实际开发中，更倾向于在script标签中调用事件，因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性。

2、常见事件

（1）鼠标事件

表2-1 鼠标事件

事件	说明
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件

（2）键盘事件

表2-2 键盘事件

事件	说明
onkeydown 按下键事件	（包括数字键、功能键）
onkeypress 按下键事件	（只包含数字键）
onkeyup 放开键事件	（包括数字键、功能键）

（3）表单事件

表2-3 表单事件

事件	说明
onfocus	获取焦点事件
onblur	失去焦点事件
onchange	状态改变事件
onselect	选中文本事件

（4）编辑事件

表2-4 编辑事件

事件	说明
oncopy	复制事件
oncut	剪切事件
onpaste	粘贴事件

（5）页面事件

表2-5 页面事件

事件	说明
onload	页面加载事件
onresize	页面大小事件
onerror	页面或图片加载出错事件

参考：

绿叶学习网

DOM模型和事件

目录