javascript中的DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中的DOM相关的知识,希望对你有一定的参考价值。

通过 html DOM(文档对象模型),可访问 javascript HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。
。。。。。。。。。。
查找 HTML 元素:
通常,通过 JavaScript,您需要操作 HTML 元素。
http://www.iis7.com/b/wzjk/
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
通过 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 元素

以上是关于javascript中的DOM的主要内容,如果未能解决你的问题,请参考以下文章

使用 dom Javascript 添加新创建的标签和输入文本以形成表单?

前端基础之BOM和DOM

JS04 DOM 文档对象模型 P1 查找元素改变内容绑定事件

Node中的JavaScript和浏览器中的JavaScript的区别

JavaScript中的对象

[JavaScript]JavaScript中的Array