HTML DOM(文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM模型被构造为对象的树。
通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。
1、JavaScript能够改变页面中的所有HTML元素
2、JavaScript能够改变页面中的所有HTML属性
3、JavaScript能够改变页面中的所有CSS样式
4、JavaScript能够对页面中的所有事件作出反应
提示:不要在文档加载之后使用document.write()。这会覆盖该文档。
HTML DOM允许JavaScript改变HTML元素的内容:
document.write();
改变HTML内容:
document.getElementById(id).innerHTML=new HTML;
改变HTML属性
document.getElementById(id).attribute=new value;
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
document.getElementById(id).style.property=new style;
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
JavaScript 添加和删除节点(HTML 元素)
1、创建新的HTML元素
创建新的<p>
元素:
var para=document.createElement("p");
如需向<p>
元素添加文本,必须先创建文本节点:
var node=document.createTextNode("这是新段落。");
然后向<p>
元素追加这个文本节点:
para.appendChild(node);
最后,必须向一个已有的元素追加这个新元素。
先找到一个已有元素:
var element=document.getElementById("div1");
然后,向已有元素追加新元素
element.appendChild(para);
2、删除已有的HTML元素
一个含有两个子节点(<p>
元素)的<div>
元素
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
找到id=“div1”的元素(要删除的元素的父元素):
var parent=document.getElementById("div1");
找到id=“p1”的<p>
元素(要删除的元素):
var child=document.getElementById("p1");
从父元素中删除子元素
parent.removeChild(child);