通过 HTML DOM（文档对象模型）,可访问 JavaScript HTML 文档的所有元素。
-
JavaScript能够改变页面中的所有HTML元素 -
JavaScript能够改变页面中的所有HTML属性 -
JavaScript能够改变页面中的所有CSS样式 -
JavaScript能够对页面中的所有事件做出反应
查找 HTML 元素
查找html元素分为三种：
- 通过
id找到HTML元素。例如：var x=document.getElementById("intro");如果未找到该元素，则 x 将包含 null。 - 通过标签名找到
HTML元素。 - 通过类名找到
HTML元素
HTML DOM 允许 JavaScript 改变 HTML 元素的内容
改变 HTML 输出流
在 JavaScript 中，document.write()可用于直接向 HTML 输出流写内容。
注意：提示：绝不要使用在文档加载之后使用 document.write()。否则会覆盖该文档。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用innerHTML 属性。
语法如下：
document.getElementById(id).innerHTML=new HTML;
JavaScript HTML DOM - 改变 CSS
改变 HTML 样式
改变 HTML 元素的样式，语法如下：
document.getElementById(id).style.property=new style;
例如：改变p标签内容
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>```
###JavaScript HTML DOM 事件
**HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。**
对事件做出反应,可以在事件发生时执行 `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 `事件。
###JavaScript HTML DOM 元素（节点）
**创建新的 HTML 元素**
例如：
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");//创建新的 <p> 元素
var node=document.createTextNode("这是新段落。");//如需向 <p> 元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点
para.appendChild(node);//向 <p> 元素追加这个文本节点
var element=document.getElementById("div1");//向一个已有的元素追加这个新元素
element.appendChild(para);//向已有的元素追加新元素
</script>```
删除已有的 HTML 元素
例如：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");//找到父元素
var child=document.getElementById("p1");//找到子元素
parent.removeChild(child);//从父元素中删除子元素
</script>```
网友评论