DOM(Document Object Model)即文档对象模型,DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。D(文档)可以理解为整个Web 加载的网页文档;O(对象)可以理解为类似window 对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。
1.节点
加载HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成。说白了,DOM对象就是浏览器生成的树型结构,只是这种树型结构是有节点组成的。
从上图的树型结构,我们理解几个概念,html 标签没有父辈,没有兄弟,所以html 标签为根标签。head 标签是html 子标签,meta 和title 标签之间是兄弟关系。如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。我印象中我们总是谈论元素,那这里我们经常把标签称作为元素,说的就是一个意思。
2.节点种类:元素节点、文本节点、属性节点。
<div title="属性节点">测试Div</div>
3.编程任务
任务效果:
文字素材:
房产:
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
家居:
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
二手房:
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0px;
margin: 0px;
font:15px normal "microsoft yahei";
}
#tabs{
width:312px;
padding:5px;
height:150px;
margin:20px;
}
#tabs ul{
list-style:none;
display: block;
height:30px;
line-height:30px;
border-bottom:2px saddlebrown solid;
}
#tabs ul li{
line-height:28px;
border:1px solid #aaaaaa;
border-bottom:none;
display:inline-block;
width:60px;
text-align: center;
margin:0px 3px;
}
#tabs ul li.on{
border-top:2px solid #600;
border-bottom: 2px solid #fff;
}
#tabs div{
border:1px solid #336699;
border-top:none;
line-height:25px;
padding:5px;
width:300px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
function show(x){
//alert(document.getElementsByTagName("li").length);
if("房产"==x.innerHTML){
document.getElementById("fangchan").className="on";
document.getElementById("jiaju").className="";
document.getElementById("ershoufang").className="";
document.getElementById("fcdiv").className="";
document.getElementById("jjdiv").className="hide";
document.getElementById("esfdiv").className="hide";
} else if ("家居"==x.innerHTML) {
document.getElementById("fangchan").className="";
document.getElementById("jiaju").className="on";
document.getElementById("ershoufang").className="";
document.getElementById("fcdiv").className="hide";
document.getElementById("jjdiv").className="";
document.getElementById("esfdiv").className="hide";
} else if ("二手房"==x.innerHTML) {
document.getElementById("fangchan").className="";
document.getElementById("jiaju").className="";
document.getElementById("ershoufang").className="on";
document.getElementById("jjdiv").className="hide";
document.getElementById("fcdiv").className="hide";
document.getElementById("esfdiv").className="";
}
}
</script>
<div id="tabs">
<ul>
<li id="fangchan" class="on" οnclick="show(this)">房产</li>
<li id="jiaju" οnclick="show(this)">家居</li>
<li id="ershoufang" οnclick="show(this)">二手房</li>
</ul>
<div id="fcdiv">
275万购昌平邻铁三居 总价20万买一居<br>
200万内购五环三居 140万安家东三环<br>
北京首现零首付楼盘 53万购东5环50平<br>
京楼盘直降5000 中信府 公园楼王现房<br>
</div>
<div id="jjdiv" class="hide">
40平出租屋大改造 美少女的混搭小窝<br>
经典清新简欧爱家 90平老房焕发新生<br>
新中式的酷色温情 66平撞色活泼家居<br>
瓷砖就像选好老婆 卫生间烟道的设计<br>
</div>
<div id="esfdiv" class="hide">
通州豪华3居260万 二环稀缺2居250w甩<br>
西3环通透2居290万 130万2居限量抢购<br>
黄城根小学学区仅260万 121平70万抛!<br>
独家别墅280万 苏州桥2居优惠价248万<br>
</div>
</div>
</body>
</html>
PS:CSS的样式,结合CSS的盒模型以及相应标签元素的分类来理解