javascript学习笔记五

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器就会创建页面的文档对象模型（Document Object Model）。

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

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

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

查找 HTML 元素

JavaScript有3种方式查找元素，
1、通过 id 找到 HTML 元素

	<p id="pId">HTML元素!</p>
	<p>该实例展示了 <b>getElementById</b> 方法!</p>
	<script>
		x = document.getElementById("pId");
		document.write("<p>文本来自 id 为 pId段落: " + x.innerHTML + "</p>");
	</script>
	//如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。如果未找到该元素，则 x 将包含 null。

2、通过标签名找到 HTML 元素

<div id="divId">
		<p> DOM 过标签名找到 HTML 元素。</p>
		<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
	</div>
	<script>
	//查找 id="divId" 的元素，然后查找 id="main" 元素中的所有 <p>
		var x = document.getElementById("divId");
		var y = x.getElementsByTagName("p");
		document.write('id="divId"元素中的第一个段落为：' + y[0].innerHTML);
	</script>

3、通过类名找到 HTML 元素

<p class="pText">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
// getElementsByClassName 函数来查找 class="pText" 的元素
	x = document.getElementsByClassName("pText");
	document.write("<p>文本来自 class 为 pText段落: " + x[0].innerHTML + "</p>");
</script>

JavaScript HTML DOM 事件

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

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

onmouseover 和 onmouseout 事件

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

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