摘自:www.w3school.com.cn
HTML DOM(文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型
通过可编程对象模型,JavaScript获得了足够的能力来创建动态的HTML。
- JavaScript 能够改变页面中所有的HTML元素
- JavaScript能够改变页面中所有的HTML属性
- JavaScript能够改变页面中所有的CSS样式
- JavaScript能够对页面中的所有事件作出反应
查找HTML元素
通过id找到HTML元素
var x=document.getElementById(“intro”);
通过标签名找到HTML元素
var x=document.getElementById(“main”);
var y=x.getElementsByTagName(“p”);- 通过类名找到HTML元素
如何改变HTML元素的内容(innerHTML)
document.write() 可直接向HTML输出流写内容
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
修改HTML内容的最简单方法就是使用innerHTML:
document.getElementById(id).innerHTML=new HTML
改变HTML属性(例如img标签的src属性)
document.getElementById(id).attribute=new value
如何改变 HTML 元素的样式 (CSS)
改变HTML样式
document.getElementById(id).style.property=new style
HTML DOM Style对象参考手册
如何对 HTML DOM 事件对做出反应
当用户在点击某个元素时执行代码,请向一个HTML事件属性添加JavaScript代码:
οnclick=JavaScript
age:<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
使用HTML DOM 来分配事件
-
原理
- 先获取元素ID然后再通过onclick添加事件,即 分配事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
- onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
- onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
- onload 和 onunload 事件可用于处理 cookie。
- onchange 事件常结合对输入字段的验证来使用。
- onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
HTML DOM Event 对象参考手册
如何添加或删除 HTML 元素
创建新的HTML元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<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>
-
步骤
- 先创建标签:var para=document.createElement(“p”);
- 创建文本节点:var node=document.createTextNode(“这是新段落。”); 为了向上一步的p标签添加内容
- 向节点追加这个文本:para.appendChild(node);
删除已有的HTML元素
如需删除 HTML 元素,您必须首先获得该元素的父元素:
<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>