前端Javascript(js)-------dom笔记知识点`

最新推荐文章于 2024-04-19 13:22:49 发布

西楠

最新推荐文章于 2024-04-19 13:22:49 发布

阅读量124

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/x_xinan9416/article/details/108918378

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

简介

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

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model)

1.改变HTML内容

innerHTML

<html>
<body>

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

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

</body>
</html>

2.改变 HTML 属性

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

3.改变 HTML 样式

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

4.事件类型

鼠标事件

事件	作用
onchange	改变
onmousemove	鼠标移动
ondblclick	双击
onmouseover	鼠标移入
onmouseout	鼠标移出
onclick	点击事件
onmousedown	鼠标按下
onmouseup	鼠标抬起
onload	页面加载完成时
onfocus	获取焦点

键盘事件

属性	描述
onkeydown	键盘按下
onkeyupress	键盘按下并松开
onkeyup	某个键盘按键被松开

5.`addEventListener()` 方法

语法:

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

6.事件冒泡或事件捕获？

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

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，

7.`removeEventListener()` 方法

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

element.removeEventListener(“mousemove”, myFunction);
第一个参数为要移除的事件
第二个参数为要移除事件的函数

8.浏览器支持

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
跨浏览器解决方法

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}