JavaScript HTML DOM 事件

知识点：

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

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

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

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

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

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

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

通过 JavaScript，查找 HTML 元素

通过 id 找到 HTML 元素

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

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素

如果未找到该元素，则 x 将包含 null

通过标签名找到 HTML 元素

var x = document.getElementById("xxx");
var y = x.getElementsByTagName("xxx");

通过类名找到 HTML 元素

var x = document.getElementsByClassName（"xxx"）;

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

通过 JavaScript，改变HTML 元素的内容

改变 HTML 输出流

document.write("xxx");

改变 HTML 内容

document.getElementById("xxx").innerHTML = HTML;

改变 HTML 属性

document.getElementById("xxx").attribute = value;

通过 JavaScript，改变HTML 元素的样式

document.getElementById("xxx").style.property = style;

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

我们可以在事件发生时执行JavaScript，当用户在 HTML 元素上触发事件时，

如需执行某段代码，可向一个HTML事件属性添加 JavaScript 代码

点击元素时

<p onclick = "this.innerHTML = 'xxx'">HTML DOM</p>

事件处理器调用一个函数

<script> 
function change(id){ 
   id.innerHTML="变更内容"; 
}  
</script>
<p onclick = "change(this)">点击事件</p>

HTML 事件属性

<button onclick = "change()">点击</button>

使用 HTML DOM 来分配事件

document.getElementById("xxx").onclick = function(){
   代码块;
};

click事件

onmousedown,onmouseup以及onclick构成了鼠标点击事件的所有部分

当点击鼠标按钮时，会触发onmousedown 事件

当释放鼠标按钮时，会触发onmouseup事件

当完成鼠标点击时，会触发onclick事件

关键字：

onload              会在用户进入页面时被触发，可用于检测访问者的浏览器类型和版本，并加载网页的正确版本

onunload          会在用户离开页面时被触发，与onload一样，可用于处理 cookie

onchange          常结合对输入字段的验证来使用。当用户改变输入字段的内容时，会调用函数

onmouseover   在用户的鼠标移至 HTML 元素上方时触发的函数

onmouseout     在用户的鼠标移至 HTML 元素移除时触发的函数

onfocus             在对象获得焦点时被触发

源码对应：

dom-html           JavaScript 查找HTML元素

dom-html - 1     JavaScript 改变 HTML内容

dom-html - 2      JavaScript 改变 HTML属性

dom-html - 3      JavaScript 改变 CSS样式

dom-html - 4      HTML DOM事件

dom-html - 5      HTML DOM事件