JavaScript总结（六）HTML-DOM内容

1、查找HTML元素
①通过 id 找到 HTML 元素
查找 id=“intro” 元素var x=document.getElementById("intro");
②通过标签名找到 HTML 元素
查找 id=“main” 元素中的所有

元素var y=x.getElementsByTagName("p");
③通过类名找到 HTML 元素
通过 getElementsByClassName 函数来查找 class=“intro” 的元素
var x=document.getElementsByClassName("intro");
2、HTML DOM - 改变 HTML
①改变 HTML 输出流
②改变 HTML 内容document.getElementById(id).innerHTML=新的 HTML
③改变 HTML 属性document.getElementById(id).attribute=新属性值
3、HTML DOM - 改变CSS
改变 HTML 样式document.getElementById(id).style.property=新样式

• HTML DOM 允许我们通过触发事件来执行代码。
  比如以下事件：
  元素被点击。
  页面加载完成。
  输入框被修改。

4、HTML DOM 事件
对事件做出反应onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时；当网页已加载时；
当图像已加载时；当鼠标移动到元素上时；
当输入字段被改变时；当提交 HTML 表单时；当用户触发按键时。

• HTML 事件属性：如需向 HTML 元素分配 事件，可以使用事件属性。
  向 button 元素分配 onclick 事件：<button onclick="displayDate()">点这里</button>

• onload 和 onunload 事件
  onload 和 onunload 事件会在用户进入或离开页面时被触发。
  onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  onload 和 onunload 事件可用于处理 cookie。

• onchange 事件
  onchange 事件常结合对输入字段的验证来使用。

• onmouseover 和 onmouseout 事件
  onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

• onmousedown、onmouseup 以及 onclick 事件
  onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

• onmousedown 和onmouseup
  当用户按下鼠标按钮时，更换一幅图像。

• onloa
  当页面完成加载时，显示一个提示框。

• onfocus
  当输入字段获得焦点时，改变其背景色。

• 鼠标事件
  当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。
  5、HTML DOM EventListener

• addEventListener() 方法
  在用户点击按钮时触发监听事件

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

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。

语法：element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

• 向原元素添加事件句柄
• 向同一个元素中添加多个事件句柄（addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件）
• 向 Window 对象添加事件句柄（addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。）
• 传递参数
• 事件传递（冒泡与捕获）
  事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 “click” 事件先被触发呢？

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

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

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

• removeEventListener() 方法
  removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。
  6、HTML DOM 元素 (节点)

• 创建新的 HTML 元素 (节点) - appendChild()
  添加新元素到尾部。

• 创建新的 HTML 元素 (节点) - insertBefore()
  将新元素添加到开始位置

• 移除已存在的元素
  要移除一个元素，你需要知道该元素的父元素。

• 替换 HTML 元素 - replaceChild()
  7、HTML DOM 集合(Collection)

• HTMLCollection 对象

• HTMLCollection 对象 length 属性

• 注意
  HTMLCollection 不是一个数组！
  HTMLCollection 看起来可能是一个数组，但其实不是。
  你可以像数组一样，使用索引来获取元素。
  HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
  8、HTML DOM 节点列表

• NodeList 对象是一个从文档中获取的节点列表 (集合) 。
  NodeList 对象类似 HTMLCollection 对象。

• NodeList 对象 length 属性

• HTMLCollection 与 NodeList 的区别：
  HTMLCollection 是 HTML 元素的集合。
  NodeList 是一个文档节点的集合。
  NodeList 与 HTMLCollection 有很多类似的地方。
  NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
  NodeList 与 HTMLCollection 都有 length 属性。
  HTMLCollection 元素可以通过 name，id 或索引来获取。
  NodeList 只能通过索引来获取。
  只有 NodeList 对象有包含属性节点和文本节点。