DOM（文档对象模型）

最新推荐文章于 2024-08-09 21:30:00 发布

m0_63483865

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量103

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63483865/article/details/125408493

版权

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

DOM EventListener

addEventListener() 方法

DOM简介

什么是DOM

文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM树

文档（document）：一个页面就是一个文档。

元素（element）：页面中的所有标签都是元素。

节点（node）：网页中的所有内容都是节点（标签、属性、文本、注释等）。

获取元素

根据ID获取

使用getElementById()方法可以获取带有ID的元素对象，返回一个匹配特定ID的元素。由于元素的ID在大部分情况下要求是独一无二的。这个方法自然而然地成为了一个高校查找特定元素的方法。

查找id="intro"元素：

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

如果找到该元素，则该方法将以对象(在x中)的形式返回该元素。

如果为找到该元素，则x将包含null

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

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

注意：因为得到的是一个对象的集合，所以想要操作里面的元素需要遍历。

通过HTML5新增的方法获取

document.getElementsByClassName('类名') ；//根据类名返回元素对象集合

document.querySelector('选择器')；//根据制定选择器返回第一个元素对象

document.querySelectorAll('选择器')；//返回指定选择器的所有元素对象集合

获取特殊元素

获取body元素

document.body

获取html元素

document.documentElement

改变HTML

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

改变 HTML 输出流

document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

注意：绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

document.getElementById(id).innerHTML=new HTML

<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

改变 HTML 属性

document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

改变CSS

改变 HTML 样式

document.getElementById(id).style.property=new style

<html>
<body>

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

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

οnclick=JavaScript

HTML 事件的例子：

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

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

HTML 事件属性

<button onclick="move()">Try it</button>

在点击button之后move函数将会执行

使用 HTML DOM 来分配事件

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

onchange 事件

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

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

onmousedown、onmouseup 以及 onclick 事件

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

DOM EventListener

addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄，添加的事件句柄不会覆盖已存在的事件句柄。

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

向原元素添加事件句柄

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

向同一个元素中添加多个事件句柄

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

DOM 元素(节点)

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p"); //创建新的<p> 元素
var node=document.createTextNode("This is new."); //创建了一个文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element=document.getElementById("div1"); //找到一个已有的元素
element.appendChild(para); //添加新元素
</script>

删除已有的 HTML 元素

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1"); //找到元素
var child=document.getElementById("p1"); //找到p1元素
parent.removeChild(child); //删除元素
</script>