HTML DOM
DOM是W3C标准,定义了访问HTML和XML的标准
根据W3C标准,HTML文档中的所有内容都是节点
1.编程接口
可以通过JS对之进行访问
innerHTML属性
var txt=document.getElementById("intro").innerHTML;
获取 id="intro" 的 <p> 元素的 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.创建HTML内容
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!'
使用事件属性
<button onclick="displayDate()">试一试</button>
分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};