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

什么是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);