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

科技2022-07-14 134

简介

通过 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); }

9.创建节点

1. appendChild()方法,用于添加新元素到尾部

以下代码是用于创建<p>元素:

var para = document.createElement(“p”);

为 <p> 元素创建一个新的文本节点：

var node = document.createTextNode(“这是一个新的段落。”);

将文本节点添加到 <p> 元素中：

para.appendChild(node);

最后，在一个已存在的元素中添加 p 元素。

查找已存在的元素：

var element = document.getElementById(“div1”);

添加到已存在的元素中:

element.appendChild(para);

2.insertBefore()方法用于添加到开始位置

第一个参数为创建的节点第二个参数为已有节点前

10.移除元素(从父元素移除子节点)

parent.removeChild(child);

11.替换HTML元素-replaceChild()

在父元素上替换子节点

parent.replaceChild(para, child); 第一个参数:新节点第二个参数:要替换的节点

Processed: 0.012, SQL: 8