【JS】04 DOM 文档对象模型 P1 查找元素、改变内容、绑定事件

2022-10-09 11:51:04

什么是DOM？ Document Object Model

文档指的是HTML文档

当浏览器打开一个网页的时候，实际上把HTML文档读取到内存中进行解析

整个HTML文档被封装为document文档对象，其里面各个标签被解析成文档对象的各个元素

这些元素和文档对象形成了一种树形结构，又被称为是DOM树

基于这样的对象结构，我们可以使用JS来操作DOM

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

JS可以像CSS一样根据选择器来获取HTML元素

基础的三种：

-　标签选择

-　类选择

-　属性选择

    let elementById = document.getElementById("id属性的值");

    // 类属性可以被多个html元素使用，所以返回的是一个数组
    let elementsByClassName = document.getElementsByClassName("class属性的值");

    // 按照html元素的名称查询，因为具备多个同名的元素，所以返回一个元素的数组
    let elementsByTagName = document.getElementsByTagName("标签的名称");

改变HTML内容

document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date());

【绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档】

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

修改html元素的内容

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

改变文本样式：

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

或者通过事件的触发来修改

<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById(‘id1‘).style.color=‘red‘">
点我!</button>

DOM事件

DOM对象可以让JavaScript 有能力对 HTML 得事件做出反应。

在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

事件类型 = 要执行的JS代码

onclick=JavaScript

点击这个H1标签会变更这个标签的内容

<h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1>

或者是用JS脚本声明函数对象来绑定使用

<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
<h1 onclick="changetext(this)">点击文本!</h1>

DOM 允许使用 JavaScript 来向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

主要事件的描述：

onload：用户进入页面时触发

　　可用于检测访问者的浏览器类型和浏览器版本，

　　并基于这些信息来加载网页的正确版本。

onunload：用户离开页面时触发

　　上述两者皆可以处理可用于处理 cookie。

onmouseover：鼠标移入元素区时域触发

onmouseout：鼠标移出元素区域时触发

onmousedown：鼠标按下时触发

onmouseup：鼠标松开时触发

onclick：鼠标左键点击时触发[就相当于上面2个事件的结合]

事件监听器 eventListener

样例：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法：

-　用于向指定元素添加事件句柄。

-　添加的事件句柄不会覆盖已存在的事件句柄

-　向一个元素添加多个事件句柄

-　向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

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

-　可以更简单的控制事件（冒泡与捕获）。

-　JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

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

语法Syntax

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

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

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

演示案例：

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

把函数单独挪出来写

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

允许多个函数触发

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

允许不同事件类型，且多个

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

还可以通过事件来传递参数

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

案例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

移除事件：

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

element.removeEventListener("mousemove", myFunction);