JavaScript HTML DOM粗略了解

简介 

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

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

JavaScript HTML DOM粗略了解_第1张图片
 所学内容

查找 HTML 元素

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

 方法

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

本例查找 id="intro" 元素:var x=document.getElementById("intro");

JavaScript HTML DOM粗略了解_第2张图片
 1、

通过标签名查找 HTML 元素

实例本例查找 id="main" 的元素,然后查找 "main" 中的所有元素:

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

var y=x.getElementsByTagName("p");

JavaScript HTML DOM粗略了解_第3张图片
  操作
JavaScript HTML DOM粗略了解_第4张图片
 结果

JavaScript HTML DOM - 改变 HTML


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

改变 HTML 输出流

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

今天的日期是:Fri May 20 2016 10:22:22 GMT+0800 (CST)

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

JavaScript HTML DOM粗略了解_第5张图片
  

提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

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

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

document.getElementById(id).innerHTML=new HTML

     例改变了

元素的内容:

JavaScript HTML DOM粗略了解_第6张图片
  操作
JavaScript HTML DOM粗略了解_第7张图片
 结果

      例改变了

元素的内容:

JavaScript HTML DOM粗略了解_第8张图片
  操作
JavaScript HTML DOM粗略了解_第9张图片
  结果

改变 HTML 属性

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

document.getElementById(id).attribute=new value

 本例改变了元素的 src 属性:

JavaScript HTML DOM粗略了解_第10张图片
 操作
JavaScript HTML DOM粗略了解_第11张图片
 结果

JavaScript HTML DOM - 改变 CSS

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

改变 HTML 样式

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

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

 例子会改变

元素的样式

JavaScript HTML DOM粗略了解_第12张图片
 操作
JavaScript HTML DOM粗略了解_第13张图片
 结果

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

JavaScript HTML DOM粗略了解_第14张图片
 操作
JavaScript HTML DOM粗略了解_第15张图片
 结果

 如何使元素不可见。您希望元素显示或消失吗?

JavaScript HTML DOM粗略了解_第16张图片
Visibility

HTML DOM Style 对象参考手册

如需完整的 HTML DOM Style 对象属性,请参阅我们的 HTML DOM Style 对象参考手册。

JavaScript HTML DOM 事件

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

对事件做出反应

JavaScript HTML DOM粗略了解_第17张图片
   

        当用户在

元素上点击时,会改变其内容

 操作

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

JavaScript HTML DOM粗略了解_第18张图片
 操作
JavaScript HTML DOM粗略了解_第19张图片
 结果

HTML 事件属性

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

例向 button 元素分配 onclick 事件:

JavaScript HTML DOM粗略了解_第20张图片
 操作
JavaScript HTML DOM粗略了解_第21张图片
 结果

使用 HTML DOM 来分配事件

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

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

JavaScript HTML DOM粗略了解_第22张图片
  操作   结果同上

onload 和 onunload 事件

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

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

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

JavaScript HTML DOM粗略了解_第23张图片
 操作
JavaScript HTML DOM粗略了解_第24张图片
 结果

on change 事件

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

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

JavaScript HTML DOM粗略了解_第25张图片
 操作
JavaScript HTML DOM粗略了解_第26张图片
 结果

onmouseover 和 onmouseout 事件

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

JavaScript HTML DOM粗略了解_第27张图片
 操作
JavaScript HTML DOM粗略了解_第28张图片
 结果

onmousedown、onmouseup 以及 o'clock 事件

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

JavaScript HTML DOM粗略了解_第29张图片
 操作
JavaScript HTML DOM粗略了解_第30张图片
 结果


HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的完整列表,请参阅 W3School 提供的 HTML DOM Event 对象参考手册。

你可能感兴趣的:(JavaScript HTML DOM粗略了解)