HTML DOM

DOM是W3C标准，定义了访问ＨＴＭＬ和ＸＭＬ的标准
根据Ｗ３Ｃ标准，ＨＴＭＬ文档中的所有内容都是节点

1.编程接口

可以通过ＪＳ对之进行访问

innerHTML属性

var txt=document.getElementById("intro").innerHTML;

获取 id="intro" 的

元素的 innerHTML：

2.nodeName属性

3.nodeVlue属性

属性规定节点的值

x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);

3.nodeType属性

返回节点类型
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

4.访问方法

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

5.创建ＨＴＭＬ内容

eg:

document.getElementById("p1").innerHTML="New text!";
document.getElementById("p2").style.color="blue";

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

6.元素

创建新的 HTML 元素 - appendChild()向最后子元素添加
创建新的 HTML 元素 - insertBefore()向最前父元素添加
删除已有的元素

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

替换已有元素

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);

7.事件

对事件做出反应

onclick="this.innerHTML='hello!'

使用事件属性

试一试

分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};