通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素
1 修改HTML元素内容
document.write(Date()); //在输入流中直接写 document.getElementById(id).innerHTML=new HTML //改变已经有的元素内容 document.getElementById("image").src="landscape.jpg"; //改变属性值
2 修改CSS的值
document.getElementById(id).style.property=new style
利用这个可以改变文字的大小,颜色,字体等,示例如下:
document.getElementById("p2").style.color="blue"; //改变颜色 onclick="document.getElementById(‘p1‘).style.visibility=‘visible‘" /> //改变可见性
3 对事件作出反应
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
<1> 使用DOM语句
<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
<2> 在元素标签中分配事件,使用函数
<head> <script> function changetext(id) { id.innerHTML="谢谢!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击该文本</h1> </body>
<3> 在javaScript脚本中添加匿名事件
这个格式跟前面的不一样,以function开头
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
<4> javaScript中添加事件
这个需要注意的是,函数后面不能添加括号()。
document.getElementById("myBtn").onclick=displayDate;
<5> 常见的事件
onload //进入页面
onunload //离开页面
onchange //用户改变输入字段的内容时
onmouseover //鼠标移动进去
onmouseout //鼠标离开
onmousedown //鼠标按键按下
onmouseup //鼠标按键弹起
onclick //单击
4 javaScript创建或者删除节点
<1> 创建新节点
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素
<!DOCTYPE html> <html> <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>
<2> 删除节点
如需删除 HTML 元素,您必须首先获得该元素的父元素:
<!DOCTYPE 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> </html>
时间: 2024-11-05 16:02:26