JavaScript操作HTML 元素
有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找HTML 元素
- 通过类名找到 HTML 元素
通过 id 查找 HTML 元素
在DOM 中查HTML 元素的最简单的方法，是通过使用元素id。
实例
本例查找 id="intro" 元素：
var x=document.getElementById("intro");
通过标签名查HTML 元素
实例
本例查找 id="main" 的元素，然后查找 "main" 中的所有<p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
onchange 事件
onchange 事件常结合对输入字段的验证来使用：
下面是一个如何使用onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和onmouseout 事件
onmouseover 、onmouseout 事件可用于在用户的鼠标移至HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown 事件，当释放鼠标按钮时，会触发onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
创建新的 HTML 元素
如需要HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段��?lt;/p>
<p id="p2">这是另一个段��?lt;/p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落��?);
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
实例
<div id="div1">
<p id="p1">这是一个段落��?lt;/p>
<p id="p2">这是另一个段落��?lt;/p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
使用对象构造器
本例使用函数来构造对象：
实例
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
创建 JavaScript 对象实例
一旦您有了对象构造器，就可以创建新的对象实例，就像这样：
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
<script type="text/javascript">
document.write(Date())
</script>
添加时钟：
<html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500) } function checkTime(i) { if (i<10) {i="0" + i} return i } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html>
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") document.write(arr.sort()) </script>
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
