蓝旭工作室2023春季培训博客（五）

D1gnity_

已于 2024-04-20 17:21:43 修改

阅读量1.4k

点赞数 28

文章标签： javascript 前端

于 2024-04-18 15:27:57 首次发布

本文链接：https://blog.csdn.net/D1gnity_/article/details/137923206

版权

一. DOM

文档对象模型（Document Object Model）是一个应用编程接口，用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。

比如以下的HTML页面：

<html>
	<head>
		<title>Sample Page</title>
	</head>
	<body>
		<p>Hello World</p>
	</body>
</html>

这些代码通过DOM可以表示为一组分层节点，如图。

在这里插入图片描述

DOM通过创建表示文档的数，让开发者可以随心所欲地控制网页的内容和结构。使用DOM API，可以轻松地删除、添加、替换、修改节点。

1）节点类型

DOM规定文档中的每个成分都是一个节点（Node）,HTML文档可以说由节点构成的集合，DOM节点有：

类型	描述
元素节点（Element）	上图中`<html>`、`<body>`、`<p>`等都是元素节点，即标签。
文本节点（Text）	向用户展示的内容，如`<li>`…`</li>`中的JavaScript、DOM、CSS等文本。
属性节点（Attr）	元素属性，元素才有属性,如`<a>`标签的链接属性href=“http://www.baidu.com”。

2） DOM节点三大属性（XML DOM）

属性	描述
nodeName	元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。
nodeType	元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、
nodeValue	元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容

二. DOM方法

HTML DOM方法是我们可以在节点（HTML 元素）上执行的动作

方法	类型/返回类型	描述
getElementById()	Element	返回带有指定 ID 的元素。
getElementsByTagName()	HTMLCollection	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	NodeList	返回包含带有指定类名的所有元素的节点列表。
childNodes()	NodeList	所有子节点的列表
firstChild()	Node	指向在childNodes列表中的第一个节点
lastChild()	Node	指向在childNodes列表中的最后一个节点
parentNode()	Node	指向父节点
appendChild()	Node	把新的子节点添加到指定节点。
removeChild()	Node	删除子节点。
replaceChild()	Node	替换子节点。
insertBefore()	Node	在指定的子节点前面插入新的子节点。
createAttribute()	Attr	创建属性节点。
createElement()	Element	创建元素节点。
createTextNode()	Text	创建文本节点。
getAttribute()	String	返回指定的属性值。
setAttribute()	Void	把指定属性设置或修改为指定的值。

三. 获取元素

获取元素分为获取目标元素和获取元素内容

1. 获取目标元素

通过Id，class，或者标签等多种途径获取目标元素

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

1.1 getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素：

 node.getElementById("id");
//如document.getElementById("box1");

1.2 getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素：

 node.getElementsByTagName("tagname"); 
//如document.getElementsByTagName("p");    返回包含文档中所有 <p> 元素的列表
//又如document.getElementById("main").getElementsByTagName("p");    返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）

1.3 getElementsByClassName 方法

查找带有相同类名的所有 HTML 元素

 node.getElementById("classname");
//如 document.getElementsByClassName("box1");

2. 获取元素内容

innerHTML解析内容包含HTML标签，获取的内容包括空白换行等；
innerText只解析纯文本，不包含HTML标签，获取的内容会去掉换行和缩进等空白；

四. DOM修改

DOM修改包含：

改变 HTML内容
改变 CSS样式
改变 HTML属性
创建新的 HTML元素
删除已有的 HTML 元素
改变事件（处理程序）

使用对象.属性=‘指定值’方法修改

修改元素属性：src、herf、title等
修改普通元素内容：innerHTML、innerText等
修改表单元素：value、type、disabled等
修改元素样式：style、className等

语法：

element.innerHTML = new html content    //改变元素内容: inner HTML
element.attribute = new value	//改变 HTML 元素的属性值
element.setAttribute(attribute, value)    //改变 HTML 元素的属性值
inputelement.value = new value    //改变 input 元素的 value 值
element.style.property = new style    //改变 HTML 元素CSS样式

五. DOM事件

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。

事件流描述了页面接收事件的顺序。

事件组成部分：

事件源，通过获取获取元素的方式获得
事件类型， JS常用事件(使用时在最前面加上on)
事件处理程序，通过函数赋值的方式完成

常用事件(使用时在最前面加上on)
        //  blur 失去焦点
        //  change 下拉列表选项中项改变或文本框内容改变
        //  click 鼠标点击  
        //  dbclick 鼠标双击
        //  focus 获得焦点
        //  keydown键盘按下
        //  keyup 键盘弹起
        //  load 页面加载完毕
        //  mousedown 鼠标按下
        //  mouseover 鼠标经过
        //  mousemove鼠标移动
        //  mouseout 鼠标离开
        //  mouseup 鼠标弹起
        //  reset 表单重置
        //  select 文本被选择
        //  submit 表单提交

1.事件冒泡

IE事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。

<html>
    <head>
        <title>Event Bubbling Example</title>
    </head>
    <body>
        <div id="myDiv">
            Click Me
        </div>
    </body>
</html>

在点击页面中的<div>元素后，click事件会以如下顺序发生：

<div>
<body>
<html>
document

2. 事件捕获

事件捕获是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。使用前面的例子进行事件捕获，则点击<div>元素会以下列顺序触发click事件：

document
<html>
<body>
<div>

六. DOM事件监听器

addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

可以向一个元素添加多个事件句柄。

可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。

可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

可以使用 removeEventListener() 方法来移除事件的监听。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”) 此处事件类型无需再加“on”前缀。

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为false -> 事件冒泡，true -> 事件捕获。

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。

七. BOM

详见此篇博客

D1gnity_

关注

28
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
蓝旭工作室2023春季培训博客（五）

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。事件捕获是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。IE事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
复制链接

扫一扫