3、javascript学习总结之Javascript的dom是什么

dom的意思是javascript把html文档看成一个模型，如图：

然后，整个html文档被看做是一个document对象，每个节点都是document的一个类成员，因此我们可以随意访问和修改html中任意的元素。

总共有两种方法可以访问和修改html的值：

1、通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

实例

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

2、通过标签名查找 HTML 元素

<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

 

3，用dom创建新的html节点

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>

 

4，删除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>