ITPub博客

Javascript中的文档对象模型

原创 Javascript 作者:as507169008 时间:2018-10-12 13:28:48 0 删除 编辑

通过 HTML DOM(文档对象模型),可访问 JavaScript HTML 文档的所有元素。

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

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

JavaScript 能够改变页面中的所有 HTML 元素。

JavaScript 能够改变页面中的所有 HTML 属性。

JavaScript 能够改变页面中的所有 CSS 样式。

JavaScript 能够对页面中的所有事件做出反应。

。。。。。。。。。。

查找 HTML 元素:

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

http://www.iis7.com/a/lm/yczmljgj/

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

通过 id 找到 HTML 元素。     getElementById,查找元素。

通过标签名找到 HTML 元素。getElementsByTagName,查找元素中的子元素。

通过类名找到 HTML 元素。    getElementsByClassName,查找类名为class定义的元素。

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。如果找到该元素,则该方法将以对象的形式返回该元素,如果未找到该元素,则 # 将包含 null。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

JavaScript HTML DOM - 改变 HTML

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

在 JavaScript 中,document.write():可用于直接向 HTML 输出流写内容,绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容:

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

如需改变 HTML 元素的内容,请使用这个语法:document.getElementById(id).innerHTML=新的 HTML。

改变 HTML 属性:

如需改变 HTML 元素的属性,请使用这个语法:document.getElementById(id).attribute=新属性值。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

JavaScript HTML DOM - 改变CSS

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

改变 HTML 样式(style):

如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style(样式).property(属性)=新样式。

。。。。。。。。。。

使用事件:HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件:

元素被点击。

页面加载完成。

输入框被修改。

。。。。。。。。。。。。。。。

JavaScript HTML DOM 事件:

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

对事件做出反应:

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

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

onclick=JavaScript。

HTML 事件的例子:

当用户点击鼠标时。

当网页已加载时。

当图像已加载时。

当鼠标移动到元素上时。

当输入字段被改变时。

当提交 HTML 表单时。

当用户触发按键时。

。。。。。。。。。。。。。。

onload 和 onunload 事件:

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

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

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

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

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

onmousedown、onmouseup 以及 onclick 事件:

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

onfocus:当输入字段获得焦点时,改变其背景色。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

JavaScript HTML DOM EventListener(事件监听器)

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

语法:element.addEventListener(event, function, useCapture)。

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

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

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

注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。

当传递参数值时,使用"匿名函数"调用带参数的函数。

事件冒泡或事件捕获?:

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

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在 "冒泡" 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在 "捕获" 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

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

 :

JavaScript HTML DOM 元素(节点)

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

 :

HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:

如何改变 HTML 元素的内容 (innerHTML)

如何改变 HTML 元素的样式 (CSS)

如何对 HTML DOM 事件作出反应

如何添加或删除 HTML 元素


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31552074/viewspace-2216178/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2018-09-14

  • 博文量
    75
  • 访问量
    23281