JavaScript HTML DOM
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
每个标签都可以称为节点，
DOM,的主要作用是，使得HTML之间的元素关系更加直观。
一、查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1. 通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
查找 id="intro" 元素：
var x=document.getElementById("intro");
2. 通过标签名查找 HTML 元素
查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
二、改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
列：
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>上面的段落被一条 JavaScript 脚本修改了。</p>
三、改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
实例
本例改变了 <img> 元素的 src 属性：
<img id="image" src="/i/eg_tulip.jpg" />
<script>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script>
<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>
四、HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
DOM事件，
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
1）onclick 事件
<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
onclick也可以调用函数，function
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
onclick,也可应用与button标签
2）onload 和 onunload 事件
onload（进入页面） 和 onunload（离开页面） 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("已启用 cookie")
}
else
{
alert("未启用 cookie")
}
}
</script>
onunload:
<script>
function checkCookies()
{
window.open("http://www.baidu.com")
}
</script>
<p>离开页面时会自动打开baidu页面</p>
注意，onunload,有可能被一些浏览器当做广告自动拦截。
3） onchange 事件
onchange 事件常结合对输入字段的验证来使用。只有当光标离开时才会触发
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
4）onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
一个简单的 onmouseover-onmouseout 实例：
<!--onmouseover="mOver(this)"中的this是传入当前元素-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢";
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
5）onmousedown、onmouseup 以及 onclick 事件
onmousedown（当鼠标点下去没有松开时）, onmouseup（鼠标松开后） 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="color:#ffffff;width:90px;height:20px;padding:40px;font-size:16px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
点击之前：
点击鼠标时，没有松开
松开鼠标后
6）onfocus 当输入字段活的焦点时，改变其背景色，
<script>
function myFunction(x)
{
x.style.background="yellow";
x.value="";
}
</script>
</head>
<body>
请输入英文字符：<input type="text" onfocus="myFunction(this)" value="输入用户名">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
焦点 ： 鼠标变成 大写的 I
五、JavaScript HTML DOM 元素（节点）
可以添加或删除节点（HTML元素）。
1）添加新的节点（HTML元素）
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<script>
/*注意 这段代码不可以写在<head></head> 内，如果在head内，网页加载时会先加载这个 script ，但是它无法获取到body和body内的标签等*/
/*createElement 创建标签。
createTextNode 创建文本*/
var p = document.createElement("p");/*创建标签 p*/
var f = document.createElement("font");/*创建标签 font */
var t = document.createTextNode("Hello World!");/*创建文本 Hello World!*/
p.appendChild(f);/*将变量 f 追加到变量 p*/
f.appendChild(t);/*将变量 t 追加到变量 f*/
var bd = document.body;/*获取body标签*/
bd.appendChild(p);/* 将变量 p 追加到变量bd*/
</script>
2）删除已有的 HTML 元素
<div>
<p id="p1">测试一</p> <p id="p2">测试二</p> <p id="p3">测试三</p> </div> <!--以上事先创建好的文字--> <script>/*方法1*/ var parent = document.getElementById("div1");/*先找到要删除标点的父级标签id*/ var child = document.getElementById("p1");/*找到需要删除的标签id*/ parent.removeChild(child);/*删除标签*/ </script> <script>/*方法2*/ var child=document.getElementById("p3");/*找到要删除的节点标签id*/ child.parentNode.removeChild(child);/*Node是节点意思， 删除父节点中的 child，即子节点p3*/ </script>