通过 JavaScript，来操作 HTML 元素。必须要找到该元素。我们可以通过以下三种方法找到该元素:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。(注意 : 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。)
改变 HTML 内容
使用 innerHTML 属性 , document.getElementById(id).innerHTML=new HTML 如:
< body>
< p id="p1">Hello World!< /p>
< script>
document.getElementById("p1").innerHTML= "New text!";
< /script>
< p>上面的段落被一条 JavaScript 脚本修改了。< /p>
< /body>
改变 HTML 样式
document.getElementById(id).style.property= new style , 如:
< body>
< h1 id="id1">My Heading 1< /h1>
< button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里！
< /button>
< /body>
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
onclick 当用户点击时会被触发
< body>
< p>点击按钮就可以执行 < em>displayDate()< /em> 函数。< /p>
< button id="myBtn">点击这里< /button>
< script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{ document.getElementById("demo").innerHTML=Date(); }
< /script>
< p id="demo">< /p>
< /body>
onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 和 onunload 事件可用于处理 cookie。
< body onload="checkCookies()">
< script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("已启用 cookie"); }
else {
alert("未启用 cookie"); }
}
< /script>
< p>提示框会告诉你，浏览器是否已启用 cookie。< /p>
< /body>
onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时，会调用 upperCase() 函数。
< head>
< script>
function myFunction() {
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
< /script>
< /head>
< body>
请输入英文字符：< input type="text" id="fname" onchange="myFunction()">
< p>当您离开输入字段时，会触发将输入文本转换为大写的函数。< /p>
< /body>
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
< body>
< div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面< /div>
< script>
function mOver(obj) {
obj.innerHTML="谢谢"
}
function mOut(obj) {
obj.innerHTML="把鼠标移到上面"
}
< /script>
< /body>
onmousedown , onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
< body>
< div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里< /div>
< script>
function mDown(obj) {
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj) {
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
< /script>
< /body>
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
< body>
< div id="div1">
< p id="p1">这是一个段落。< /p>
< p id="p2">这是另一个段落。< /p>
< /div>
< script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
< /script>
< /body>
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
< body>
< div id="div1">
< p id="p1">这是一个段落。< /p>
< p id="p2">这是另一个段落。< /p>
< /div>
< script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
< /script>
< /body>
