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()};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容