20141128--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="background-color:#000;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="background-color:green;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>