js学习之HTML DOM的访问和修改
HTMLDOM访问
坚持接着把w3chool上的实例学完,最近因为上班有点小忙都没按时的学习了
访问HTML元素（节点）
访问HTML元素等同于访问节点
您能够以不同的方式来访问HTML元素：
·通过使用getElementById()方法
·通过使用getElementsByTagName()方法
·通过使用getElementsByClassName()方法
getElementById()通过ID查找HTML元素
获取id="intro"的元素：
document.getElementById("intro");getElementsByTagName()通过标签查找所有HTML元素
getElementsByTagName()返回带有指定标签名的所有元素
document.getElementsByTagName("p");getElementByClassName()查找相同类名的所有HTML元素
document.getElementByClassName("intro");范围类名为intro的所有元素列ps:getElementByClassNameInternetExplorer5,6,7,8中无效
HTMLDOM-修改
修改HTMLDOM意味着许多不同的方面：
·改变HTML内容
·改变CSS样式
·改变HTML属性
·创建新的HTML元素
·删除已有的HTML元素
·改变事件（处理程序）
创建HTML内容
改变元素内容的最简答的方法是使用innerHTML属性。
下面的例子改变一个<p>元素的HTML内容：
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>改变HTML样式
通过HTMLDOM，您能够访问HTML元素的样式对象。
下面的例子改变一个段落的HTML样式：
<html>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>创建新的HTML元素
如需向HTMLDOM添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>使用事件
HTMLDOM允许您在事件发生时执行代码。
当HTML元素”有事情发生“时，浏览器就会生成事件：
·在元素上点击
·加载页面
·改变输入字段
下面两个例子在按钮被点击时改变<body>元素的背景色：
<html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" /> </body> </html>
创建新的HTML元素-appendChild()
如需向HTMLDOM添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
创建了一个新的<p>元素：
var para=document.createElement("p");如需向<p>元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：
var node=document.createTextNode("This is a new paragraph.");然后必须向<p>元素追加文本节点：
para.appendChild(node);
最后，必须向已有元素追加这个新元素。这段代码查找到一个已有的元素：
var element=document.getElementById("div1");这段代码向这个已存在的元素追加新元素：
element.appendChild(para);
创建新的HTML元素-insertBefore()
上一个例子中的appendChild()方法，将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此，您可以使用insertBefore()方法：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>删除已有的HTML元素
如需删除HTML元素，您必须清楚该元素的父元素：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>ps:能否在不引用父元素的情况下删除某个元素？
很抱歉。DOM需要了解您需要删除的元素，以及它的父元素。
这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用parentNode属性来查找其父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);替换HTML元素
如需替换HTMLDOM中的元素，请使用replaceChild()方法：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
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);
</script>