JS-DOM的回顾-第四篇

JS HTML DOM

通过 HTML DOM(文档对象模型)，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的DOM；

DOM的三大操作：
1、通过 id 查找 HTML 元素

var x=document.getElementById("intro");

2、通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3、通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

改变HTML

1、改变HTML内容

document.getElementById(id).innerHTML=新的 HTML
本例改变了 <p>元素的内容：

2、改变HTML属性

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

改变CSS

//语法
document.getElementById(id).style.property=新样式
//例子
document.getElementById("p2").style.color="blue";

事件

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

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

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

//语法
element.addEventListener(event, function, useCapture);

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

事件冒泡和事件捕获
事件传递有两种方式：冒泡和捕获。
事件传递定义了元素事件触发的顺序。
如果你将

元素插入到

元素中，用户点击

元素，哪个元素的"click"事件先被触发呢？
在冒泡中，内部元素先被触发，再触发外部元素（由内到外）；
在捕获中，外部元素先被触发，然后再触发内部元素（由外到内）。

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

addEventListener(event, function, useCapture);
//默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);

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