DOM------文档对象模型

目录

一.DOM简介​​​​​​

1.HTML DOM 树​

2.查找 HTML 元素

3.HTML DOM 教程

二.DOM - 改变 HTML

1.改变 HTML 输出流

2.改变 HTML 内容

3.改变 HTML 属性

三.DOM - 改变 CSS

四.DOM 事件

1.对事件做出反应

2.HTML 事件属性

3.使用 HTML DOM 来分配事件

①onload 和 onunload 事件

②onchange 事件

③onmouseover 和 onmouseout 事件

④onmousedown、onmouseup 以及 onclick 事件


一.DOM简介​​​​​​

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素

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

HTML DOM 模型被构造为对象的树。

1.HTML DOM 树

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

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

2.查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

3.HTML DOM 教程

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件对做出反应
  • 如何添加或删除 HTML 元素

二.DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1.改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容:

今天的日期是 Thu Aug 02 2018 16:16:08 GMT+0800 (中国标准时间)

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

实例:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

2.改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

3.改变 HTML 属性

document.getElementById(id).attribute=new value

三.DOM - 改变 CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

如需改变 HTML 元素的样式,请使用这个语法:

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

例子 1:下面的例子会改变 <p> 元素的样式:

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

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

例子 2:本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:

<h1 id="id1">My Heading 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

四.DOM 事件

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

1.对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript

HTML 事件的例子:

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

例子 1:在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

<h1 
onclick="this.innerHTML='谢谢!'"
>请点击该文本</h1>

 

例子 2:本例从事件处理器调用一个函数:

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 
onclick="changetext(this)"
>请点击该文本</h1>
</body>
</html>

 

2.HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

实例:向 button 元素分配 onclick 事件

<button onclick="displayDate()">点击这里</button>

在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。

3.使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:

实例:向 button 元素分配 onclick 事件:

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

 

在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

当按钮被点击时,会执行该函数。

①onload 和 onunload 事件

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

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

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

实例:

<body onload="checkCookies()">

②onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

实例

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

③onmouseover 和 onmouseout 事件

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

④onmousedown、onmouseup 以及 onclick 事件

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

靓仔很忙i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值