JavaScript 之 DOM 操作（一）

一、DOM 操作的概念

1. DOM 概念

DOM 是指对页面标签进行操作(控制)的一系列标准 ，标准是指可以操作标签的属性和方法。

2. DOM 对象

页面上的每一个标签都可以理解为dom对象。

3. DOM 操作

DOM 操作是指对页面标签进行操作。如：设置样式、设置文本、设置属性、删除标签、事件绑定等。

二、获取标签的方法

（一）基本获取方法

1. 标签名

通过 getElementsByTagName( ) 方法获取标签标签名。

2. id 名

通过 getElementsByClassName( ) 获取 id 名标签。

3. 类名

通过 getElementById( ) 获取类名标签。

4. 选择器

通过 querySelector( ) 获取标签。

（二）通过属性获取

1. 获取子节点

childNodes 是一个 Node 对象的属性，它返回一个实时的NodeList，包含了该节点的所有子节点，包括文本节点、元素节点、标签节点等。

2. 获取父标签

通过 parentElement 获取父标签。

3. 获取兄弟标签

通过 previousElementSibling 和 nextElementSibling 获取标签的前一个标签和后一个标签。

4. 获取第一个和最后一个子标签

通过 firstElementChild 和 lastElementChild 获取子元素标签的第一个子元素标签和最后一个子元素标签。

三、设置标签样式

1. 通过CSS样式设置

通过 dom.style.CSS属性 = "属性值"；

2. 通过标签属性设置

2.1 setAttribute(属性,属性值)      设置标签属性值

2.2 getAttribute(属性)     获取标签属性

2.3 removeAttribute(属性)         删除标签属性

也可以通过className这个属性操作类名 

四、设置文本

1. 超文本

利用 innerHTML 设置超文本，返回或设置指定元素的 HTML 内容。

2. 纯文本

利用 innerText 设置纯文本，返回或设置指定元素的纯文本内容，不会解析文本内容。

五、标签的操作

（一）创建标签

通过 dom.createElement("标签名") 创建标签。

（二）添加标签

通过父元素.appendChild() 或 父元素.append() 添加标签  

（三）插入标签

通过父元素.insertBefore() 插入标签。

（四）删除标签

通过父元素.removeChild()或者元素.remove() 删除标签。

六、获取标签尺寸和位置

如下代码，设置了盒子的宽度、高度、内外边距、内容。

1. offset 方法

offset 方法返回元素相对于其定位父元素的位置信息。常用的有:
offsetLeft: 元素左上角相对于其定位父元素左边界的距离。
offsetTop: 元素左上角相对于其定位父元素上边界的距离。
offsetWidth: 元素的宽度，包括边框、内边距和滚动条。
offsetHeight: 元素的高度，包括边框、内边距和滚动条。

2. client 方法

client 方法返回元素可见部分的尺寸和位置信息。常用的有:
clientLeft: 元素左边框的宽度。
clientTop: 元素上边框的宽度。
clientWidth: 元素可见宽度，不包括滚动条、边框和外边距。
clientHeight: 元素可见高度，不包括滚动条、边框和外边距。

3. scroll 方法

scroll 方法返回元素的滚动位置和尺寸信息。常用的有:
scrollLeft: 元素水平滚动条的位置。
scrollTop: 元素垂直滚动条的位置。
scrollWidth: 元素的实际宽度，包括因滚动而隐藏的部分。
scrollHeight: 元素的实际高度，包括因滚动而隐藏的部分。

七、事件

（一）事件的定义

事件是指某种程序的驱动行为。事件就是行为，行为发生了，代码块被执行了 ，触发了事件。

通常通过 dom. 事件行为 = function(){函数内容} 绑定事件。

（二）常见的事件

1. 鼠标行为

2. 键盘行为

3. 表单行为

4. 窗口位置

（三）事件对象

当一个事件被触发时，浏览器会自动生成一个事件对象并将其作为参数传递给事件处理函数。这个事件对象包含了有关该事件的各种信息可以用来获取和操作事件的相关属性和方法。

（四）事件监听

事件监听是一种常用的交互机制,它允许我们在特定事件发生时执行相应的操作。

dom对象.addEventListener(参数1，参数2，参数3)，参数1：事件类型，参数2：回调函数，参数3：布尔值 （设置事件的执行顺序）

1. 冒泡行为

事件冒泡是指当一个元素上的事件被触发时，同样的事件也会在这个元素的所有祖先元素上依次触发。简单的说元素触发由内到外。

在指定事件添加 stopPropagation() 方法可以阻止事件冒泡。

2. 捕捉行为

事件捕获是指当一个元素上的事件被触发时，同样的事件会先在这个元素的祖先元素上依次触发,然后再在目标元素上触发。简单的说元素由外到内。

在指定标签添加 stopImmediatePropagation() 方法可以阻止捕捉行为。

（五）事件委托