在學習瞭解了DOM的基礎知識後，我們來看下如何進行DOM的操作。
首先，我們先了解下操作元素屬性有哪幾種方法：
- xxx.style.background = 'red'
- xxx.style['background'] = 'red'
- DOM方式
前兩種方法我就不說了，大家應該很熟悉了，我就說說DOM方式。
1、getAttribute
獲取指定元素的屬性的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>getAttribute</title>
<style type="text/css">
#div1{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
alert(oDiv.getAttribute('id')); //div1
}
</script>2、setAttribute
設置指定元素的屬性的值，或者添加新的屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>setAttribute</title>
<style type="text/css">
#div1{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.setAttribute('name', 'div1'); //添加新的屬性
alert(oDiv.getAttribute('name'));
oDiv.setAttribute('name', 'div2'); //設置屬性
alert(oDiv.getAttribute('name'));
}
</script>3、removeAttribute
顧名思義，刪除指定元素的屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>removeAttribute</title>
<style type="text/css">
div{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="div1" style="background:red;"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.removeAttribute('style'); //刪除style屬性，背景變藍
}
</script>4、創建DOM元素
createElement 創建一個節點
appendChild 追加一個子節點
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>appendChild</title>
</head>
<body>
<input type="text" name="" id="txt1" />
<input type="button" value="創建li" id="btn1" /><br />
<ul id="ul1">
<li>aaa</li>
</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oTxt = document.getElementById('txt1');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
}
}
</script>通過例子我們可以發現：appendChild 是將元素添加到尾部。那麼我們如何像微博那樣插入到前面呢？我們可以用 insertBefore
5、insertBefore
在已有元素前插入節點
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>insertBefore</title>
</head>
<body>
<input type="text" name="" id="txt1" />
<input type="button" value="創建li" id="btn1" /><br />
<ul id="ul1">
<li>aaa</li>
</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oTxt = document.getElementById('txt1');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');
oLi.innerHTML = oTxt.value;
oUl.insertBefore(oLi,aLi[0]);
}
}
</script>6、removeChild
刪除指定元素的子節點
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>removeChild</title>
</head>
<body>
<ul id="ul1">
<li>11111111 <a href="javascript:;">刪除</a></li>
<li>22222222 <a href="javascript:;">刪除</a></li>
<li>33333333 <a href="javascript:;">刪除</a></li>
<li>44444444 <a href="javascript:;">刪除</a></li>
<li>55555555 <a href="javascript:;">刪除</a></li>
</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul1');
var aA = oUl.getElementsByTagName('a');
for(var i = 0; i < aA.length; i++){
aA[i].onclick = function(){
oUl.removeChild(this.parentNode);
}
}
}
</script>PS：博客搬家了，以後不再 CSDN 更新了，見諒。最新博客地址：http://www.cnblogs.com/yjzhu/