DOM基础浅谈及编程任务实践

最新推荐文章于 2024-07-25 14:28:22 发布

原创最新推荐文章于 2024-07-25 14:28:22 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript学习专栏收录该内容

14 篇文章

订阅专栏

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" onclick="show(this)">房产</li>
        <li id="jiaju" onclick="show(this)">家居</li>
        <li id="ershoufang" onclick="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的盒模型以及相应标签元素的分类来理解