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() 方法添加的事件句柄。