在学习了解了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/