HTML DOM方法
HTML DOM方法
所有的HTML元素（标签）被定义为对象，对象具有一定的方法和属性。
这些方法都是非常常见且有用的，我在这里不做过多解释，分别举例如下：上图中的方法在下面的例子中均有涉及，请仔细查找！
getElementById()：通过元素的ID属性获取到唯一的元素
<div id="myid"></div>
<script>
var mydiv=document.getElementById("myid");
mydiv.innerHTML="<h1>hello world!</h1>";
</script>getElementsByTagName()：通过元素的名称获取到所有该元素名的元素集合，该方法获取的是元素数组。
<div></div>
<script>
var mydivs=document.getElementsByTagName("div");
mydivs[0].innerHTML="<h1>hello world!</h1>";
</script>getElementsByClassName()：同理，此方法是通过元素的CLASS属性获取元素集合
<div class="mydiv"></div>
<script>
var mydivs=document.getElementsByClassName("mydiv");
mydivs[0].innerHTML="<h1>hello world!</h1>";
</script>createElement()：创建HTML元素，即创建DOM对象，一般和createAttribute()，createTextNode()，appendChild()，replaceChild()共同使用
<body>
<div id="mydiv1">hello,mydiv1</div>
<script>
var mydiv2=document.createElement("div");//创建一个div节点
var myh1=document.createElement("h1");//创建一个h1节点
var mytext=document.createTextNode("hello world!!!");//创建一个文本节点
myh1.appendChild(mytext);//将文本节点添加到h1标签中
mydiv2.appendChild(myh1);//将h1节点添加到div标签中
//上面4行的操作等价于下面注释掉的一行的操作
//mydiv2.innerHTML="<h1>hello world!</h1>";
document.getElementsByTagName("body")[0].appendChild(mydiv2);//将div标签添加到body中
</script>
</body><body>
<div id="mydiv1">hello,<b>mydiv1</b></div>
<script>
var mydiv2=document.createElement("div");//创建一个div节点
mydiv2.innerHTML="<h1>hello world!</h1>";
var x=document.getElementsByTagName("div")[0];
x.replaceChild(mydiv2,x.firstChild.nextSibling);
//替换mydiv1中的第二个子元素为新建的元素
//hello, 和 <b></b> 是同一级元素，为兄弟元素
//firstChild取得'hello,' 其下一个兄弟元素，即为<b>mydiv1</b>
//将<b>mydiv1</b>替换为<div><h1>hello world!</h1></div>
</script>
</body>涉及到属性，元素前插入，删除的操作方法示例：
<body>
<div id="mydiv1">hello,<b>mydiv1</b></div>
<script>
var mydiv2=document.createElement("div");//创建一个div节点
mydiv2.innerHTML="<h1>hello world!</h1>";
var x=document.getElementsByTagName("div")[0];
x.insertBefore(mydiv2,x.firstChild);
//在hello,的前面添加<div><h1>hello world!</h1></div>
x.removeChild(x.firstChild.nextSibling.nextSibling);
//删除子元素<b></b>
//两种形式给属性设置值
var claNode=document.createAttribute("class");
claNode.value="hello";
x.setAttributeNode(claNode);
x.setAttribute("ref","mydiv");
var cla=x.getAttribute("class");
var ref=x.getAttribute("ref");
alert(cla+"-"+ref);
</script>
</body>