一、本课目标
- 熟练使用JS操作DOM节点：能够熟练的进行节点的创建、添加、删除、替换等；能够熟练的设置元素的样式
二、节点信息
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>节点信息</title>
</head>
<body>
<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
var nodes=document.getElementById("nodeList");
// alert(nodes.childNodes.length);
var type1=nodes.firstChild.nodeType;
// alert(type1);
var type2=nodes.firstChild.firstChild.nodeType;
// alert(type2);
var name1=nodes.firstChild.firstChild.nodeName;
var str=nodes.firstChild.firstChild.nodeValue;
var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>
</body>
</html>
运行结果：
image.png
此时修改一下代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>节点信息</title>
</head>
<body>
<ul id="nodeList">
<li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
var nodes=document.getElementById("nodeList");
alert(nodes.childNodes.length); //4
var type1=nodes.firstChild.nodeType;
alert(type1); // 3
var type2=nodes.firstChild.firstChild.nodeType;
alert(type2); //无输出，因为此时ul下面第一个节点是文本节点，并且这个文本节点下面已经没有节点了
var name1=nodes.firstChild.firstChild.nodeName;
var str=nodes.firstChild.firstChild.nodeValue;
var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>
</body>
</html>
三、操作节点
image.png
3.1操作节点属性
语法：
getAttribute("属性名")
setAttribute("属性名", "属性值")
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
div{padding: 5px; text-align: center;
}
div span{display: block;}
</style>
</head>
<body>
<p>
选择你喜欢的书：
<input type="radio" name="book" onclick="book()">我和狗狗一起活下来
<input type="radio" name="book" onclick="book()">灰霾来了怎么办
</p>
<div>
<img src="" alt="" id="image" onclick="img()"><span></span>
</div>
<script>
function book(){
var ele=document.getElementsByName("book");
var img=document.getElementById("image");
if(ele[0].checked){
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
img.nextSibling.innerHTML="我和狗狗一起活下来";
}
else if(ele[1].checked){
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.nextSibling.innerHTML="灰霾来了怎么办";
}
}
function img(){
var alt=document.getElementById("image").getAttribute("alt");
alert("图片的alt："+alt)
}
</script>
</body>
</html>
3.2创建和插入节点
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
div{padding: 5px; text-align: center;
}
div span{display: block;}
</style>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div></div>
<script>
function book(){
var ele=document.getElementsByName("book");
var bName=document.getElementsByTagName("div")[0];
if(ele[0].checked){
var img=document.createElement("img");
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
bName.appendChild(img);
}
else if(ele[1].checked){
var img=document.createElement("img");
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.setAttribute("onclick","copyNode()")
bName.appendChild(img);
}
}
function copyNode(){
var bName=document.getElementsByTagName("div")[0];
var copy=bName.lastChild.cloneNode(false);
bName.insertBefore(copy,bName.firstChild);
}
</script>
</body>
</html>
3.3删除和替换节点
这两种都是通过父节点来进行操作的
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除和替换节点</title>
<style>
*{padding: 0; margin: 0; font-size: 12px;}
ul,li{list-style: none;}
li{float: left; text-align: center; width: 140px;}
</style>
</head>
<body>
<ul>
<li>
<img src="images/f01.jpg" id="first">
<p><input type="button" value="删除我吧" onclick="del()"></p>
</li>
<li>
<img src="images/f02.jpg" id="second">
<p><input type="button" value="换换我吧" onclick="rep()"></p>
</li>
</ul>
<script>
function del(){
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
}
function rep(){
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
}
</script>
</body>
</html>
3.4操作节点样式
改变样式的属性思路：
- 改变style属性
- 改变className属性
1、style属性
语法示例：
image.png
可修改的属性：
image.png
修改属性的触发事件：
image.png
2、className属性
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<section id="shopping">
<div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
<div id="cartList">
<h2>最新加入的商品</h2>
<ul>
<li><img src="images/makeup.jpg"></li>
<li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
<li>¥558.00×1<br/>删除</li>
</ul>
<div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
</div>
</section>
<script>
/*document.getElementById("cartList").style.display="none";
function over(){
document.getElementById("cart").style.backgroundColor="#ffffff";
document.getElementById("cart").style.zIndex="100";
document.getElementById("cart").style.borderBottom="none";
document.getElementById("cartList").style.display="block";
document.getElementById("cartList").style.position="relative";
document.getElementById("cartList").style.top="-1px";
}
function out(){
document.getElementById("cart").style.backgroundColor="#f9f9f9";
document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
document.getElementById("cartList").style.display="none";
}*/
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
// alert(document.getElementById("cartList").display);
//alert(document.getElementById("cartList").currentStyle.display); //使用currentStyle获取属性值
/*使用getComputedStyle获取属性值
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);*/
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
</script>
</body>
</html>
CSS样式：
*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}
ul,li{list-style: none;}
#shopping{margin: 20px auto 0 auto; width: 320px;
}
#cart{
background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;
border: solid 1px #dcdcdc;
float: right;
width: 100px;
height: 28px;
padding-left: 45px;
line-height: 28px;
position: relative;
cursor: pointer;
}
#cart span{
position: absolute;
color: #fff;
background: #dc1742;
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
top:-5px;
right: 20px;
font-size: 8px;
line-height: 15px;
text-align: center;
}
#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}
#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}
#cartList li{float: left;}
#cartList li:nth-of-type(1){width: 65px; text-align: center;}
#cartList li:nth-of-type(2){width: 155px;}
#cartList li:nth-of-type(3){text-align: center; width: 85px;}
#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0 5px;}
#cartList .footer span{padding: 0 12px;}
#cartList .footer span:nth-of-type(2){
color: #fff;
background: #dc1742;
display: block;
height: 25px;
border-radius: 6px;
float: right;
text-align: center;
font-weight: bold;
margin-top: 5px;
}
#shopping .cartOver{
background-color: #ffffff;
z-index: 100;
border-bottom: none;
}
#shopping .cartListOver{
display:block;
position:relative;
top:-1px;
}
#shopping .cartOut{
background-color:#f9f9f9;
border-bottom:solid 1px #dcdcdc;
}
#shopping .cartListOut{
display:none;
}
这两种思路一个是选中了之后直接在js里面改样式，一个是选中了之后，调用css文件里面的其他样式。推荐第二种。
3.5获取元素的样式
image.png
只能获取内联样式表的属性值，无法获取到内部样式表或外部样式表的属性值。但是在实际工作当中，通常样式和内容是分离的，所以在实际的工作当中，不能使用上面这种方式来获取元素样式。可以使用下面这种方式来获取样式：
但是上面这种方式在IE中是不兼容的，在IE中要使用如下的方式：
image.png
四、总结
image.png
