Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元7 DOM编程

Web前端开发—交互式设计

（JavaScript+jQuery）主编：孙佳帝

孙文江编委：白哲佳张卓2023年电子工业出版社CONTENTS目录JavaScript概述01JavaScript语言基础02JavaScript函数 03面向对象编程 04JavaScript内置对象05BOM编程06DOM编程07DOM事件08利用JQuery编程09设计个性化网站10Web前端开发—交互式设计07单元7DOM编程

Web前端开发—交互式设计7.1认识DOM1.什么是DOM？文档对象模型DOM（DocumentObjectModule）是W3C组织推荐的处理可扩展标记语言的标准编程接口。根据W3C的DOM规范，DOM是一种与平台、浏览器、语言无关的应用程序接口（API），可以作为网站内容与JavaScript互通的接口，以便程序和脚本能够动态访问和更新文档的内容、结构及样式，给web开发者提供了一个标准的方法，让其方便的访问站点中的数据、脚本和表现层对象。

DOM也是一种跨语言的规范，是一种W3C标准，通过DOM编程可以实现对HTML文档的节点、属性、文本进行添加、删除、修改等操作。在实际开发带有交互效果的页面时，都离不开DOM。2.DOM类型DOM将HTML文档作为树结构来查看，把整个页面规划成由节点层级构成的文档。3.DOM节点在DOM中，文档是由节点（node）构成的集合，网页中的所有内容都是节点。节点的类型主要包括元素节点、属性节点和文本节点。一般来说，节点至少拥有3个基本属性，分别是nodeName（节点名称）、nodeType（节点类型）、nodeValue（节点值）。常见的节点类型如表所示。节点类型nodeNamenodeTypenodeValue元素元素名称1null属性属性名称2属性值文本#text3文本内容3.DOM节点（1）元素节点：整个DOM模型都是由元素节点（elementnode）构成的。元素节点可以包含其他的元素。（2）文本节点：具体的文本在DOM模型中称之为文本节点。（3）属性节点：页面中的元素一般都会有一些属性。例如：几乎所有的元素都有一个title属性。开发者可以利用这些属性来对包含

在元素里的对象做出更准确的描述。7.2DOM节点操作概述对于每个DOM节点node，都有一系列的属性、方法可以使用，node的常用属性和方法如表所示。属性和方法类型/返回类型描述nodeNameString返回节点的名称，根据其类型返回节点的名称nodeTypeNumber返回节点的类型nodeValueString根据其类型设置或返回某个节点的值childNodesNodeList返回某节点到子节点的节点列表parentNodeNode返回某节点的父节点firstChildNode返回某节点的首个子节点lastChildNode返回某个节点的最后一个子节点previousSiblingNode返回前一个兄弟节点，如果没有这样的节点，则返回nullnextSiblingNode返回后一个兄弟节点，如果没有这样的节点，则返回nullappendChild()Node将node节点添加到childNodes的末尾insertBefore()Node在childNodes中的refnode节点之前插入newnode节点removeChild()Node从childNodes删除node节点replaceChild()Node将childNodes中的oldnode节点替换成newnode节点hasChildNodes()Boolean当childNodes，包含一个或多个节点时，返回true1.访问节点（1）getElementsByTagName()方法用来返回一个包含某个相同标签名的元素的NodeList。例如<p>标记的标签名为“p”。

该方法的语法格式如下：var=document.getElementsByTagName("TagName");参考【训练7-1】（2）getElementById()方法返回id为指定值的元素。标准的HTML中id都是唯一的，因此该方法主要用来获取某个指定的元素。参考【训练7-2】（3）getElementsByName()方法主要用来获取表单元素。name属性的值不要求必须是唯一的，多个元素可以有一样的名字。参考【训练7-3】2.创建节点在访问元素节点后，还可以利用DOM实现节点的创建，例如创建一个ol元素节点，为ol元素节点创建一个textnode等。（1）创建元素节点采用createElement()方法，其语法格式如下：varnewElement=document.createElement("name");

其中，参数为字符串，为此元素节点规定名称。（2）创建文本节点采用createTextNode()方法，其语法格式如下：varnewText=document.createTextNode("text");

其中，参数为字符串，用于设定节点的文本。创建文本节点后，可以使用appendChild()方法将此节点添加到一个节点列表里。3.添加节点使用createElement()方法、createTextNode()方法来创建元素节点和文本节点后，可以使用appendChild()方法将元素添加到节点列表中。appendChild()方法表示在节点列表的末端添加一个子节点。其语法格式如下:Node.appendChild(newchild)

其中，Node表示当前节点，newchild为所添加的节点。通过appendChild()方法可以实现添加节点的操作。参考【训练7-4】4.插入节点insertBefore()方法表示在某个指定的节点之前插入一个子节点，其语法格式如下：varbeforenote=parentNode.insertBefore(newChild,beforeChild);该方法需要设置两个参数，newChild表示要插入的元素节点，而beforeChild为参考节点元素，将newChild插入beforeChild节点之前。如果beforeChild不存在，则将newChild插入parentNode节点列表的最后。参考【训练7-5】

5.删除节点在DOM中，删除节点是通过父节点的removeChild()方法实现的，通常的方法是找到要删除的节点，然后利用parentNode属性找到父节点，将其删除。removeChild()方法可用来删除某个指定的节点，其语法格式如下：

node.parentNode.removeChild(node);其中，参数node为要被删除的节点对象。参考【训练7-6】【案例7-1】实现简易留言板功能【案例分析】在这个信息技术高速发展的时代下，人们的生活节奏也在逐步加快，人们之间进行沟通的方式不仅仅局限于面对面实时交流，获取信息的方式也不仅仅局限在某个范围，这些传统的方式有着很大的受制性，受时间、地点等因素限制，不适用于各种场合。因此各大网站中的留言板功能及侧边信息展示栏是降低沟通成本的一种必要的方式。网站中的留言板功能可以实现留言的新增与删除，并保持最新的留言在顶部显示，使得人们可以随时随地的查看留言并做出回复用户输入留言后，若不是空格或空，点击发布按钮则会添加一条留言在留言区，并保持最新的留言总是在最上面，每条留言都有删除按钮，点击删除可以清除对应留言。【解决方案】

根据本案例的描述，可以选择利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。

在页面中实现点击“发布”按钮动态创建一个li，添加到ul里面。通过定义一个textarea多行文本输入框，供用户输入留言，button按钮用于单击发布留言，ul用于展示留言区。要实现点击“发布”按钮来添加留言，需要为button按钮添加单击事件，用于添加留言，并使用if条件语句进行判断，如果用户输入为空，提醒用户进行输入，否则执行else代码块。随后创建元素li并为创建好的元素li赋值，将创建好的li放到第一个元素的前面，保持最新留言在最上面。实现留言的删除功能，应在添加li时为它增加一个a元素，获取所有的a元素并利用for循环为a元素注册单击事件，找到a的父节点li，使用node.removeChild(child)方法删除当前a所在的li，即可实现删除功能。【解决方案】

多行文本输入框textarea用于输入留言，button按钮用于发布留言，ul用于展示留言区。为button按钮添加单击事件来实现点击“发布”按钮添加留言，如果用户输入为空，需要提醒用户输入文字，用户输入文字后点击发布按钮即可将最新留言展示在留言区最上方。如果想删掉已发布的留言，需要点击“删除”，调用node.removeChild(child)方法删除当前a所在的li，即可实现删除功能。7.3DOM样式操作1.存取样式信息DOM提供了专门存取样式信息的操作style属性方法，对于元素对象的样式信息，可直接通过“元素对象.style.样式属性名”的方式操作，样式属性名对应CSS样式名。【提示】样式属性名需要去掉CSS样式名里的半字线“-”，并将半字线后英文的首字母大写。例如，设置元素背景颜色的样式名background-color，对应的样式属性名为backgroundColor。1.存取样式信息

名称描述fontSize元素的字体大小height元素的高度left定位元素的左侧位置display元素的显示类型background元素的背景属性backgroundColor元素的背景颜色textAlign文本的水平对其方式textDecoration文本的修饰textIndent文本的第一行缩进listStyleType列表标记的类型overflow如何处理元素框外的内容transform向元素应用2D或3D转换常用style属性中的样式属性名2.存取元素尺寸所谓元素尺寸，就是指在HTML标签中设置的尺寸样式。在JavaScript中，使用以下属性可以获取元素的高度和宽度，如下表所示。元素尺寸属性描述clientWidth获取元素可视部分的宽度，即CSS的width和padding属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域clientHeight获取元素可视部分的高度，即CSS的height和padding属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域offsetWidth元素在页面中占据的宽度总和，包括width、padding、border以及滚动条的宽度offsetHeight元素在页面中占据的高度总和，包括height、padding、border以及滚动条的宽度2.存取元素尺寸网页上的每个元素，都有clientHeight和clientWidth属性。这两个属性表示可视区域的高度和宽度，指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的空间。如下图所示。3.存取元素位置首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积。如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。与元素位置相关的属性如下表所示。元素位置属性描述scrollWidth当元素设置了overflow:visible样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于clientWidth属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域。scrollHeight当元素设置了overflow:visible样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于clientWidth属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域。3.存取元素位置网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。offsetHeight用于获取元素的真实高度（border-box），它包含该元素的垂直内边距和边框，如果有水平滚动条的话，还需要加上水平滚动条的高度。offsetWidth用于获取元素的真实宽度（border-box），它包含该元素的水平内边距和边框，如果有垂直滚动条的话，还需要加上垂直滚动条的宽度。3.存取元素位置网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角

的距离。所以，只需要将这两个值

进行累加，就可以得到该元素的

绝对坐标。如图所示。4.操作class属性前面提到的DOM都是与结构层打交道的，例如查找节点、添加节点等，而DO