HTML DOM方法

所有的HTML元素（标签）被定义为对象，对象具有一定的方法和属性。

HTML DOM方法

这些方法都是非常常见且有用的，我在这里不做过多解释，分别举例如下：上图中的方法在下面的例子中均有涉及，请仔细查找！

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>

HTML DOM方法

HTML DOM方法

相关推荐