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

来源：互联网发布：双系统怎么删除windows 编辑：程序博客网时间：2024/05/22 00:37

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的盒模型以及相应标签元素的分类来理解

0 0