對DOM的理解
DOM即文檔對象模型途凫，針對HTML和XML文檔的API(應(yīng)用程序接口)
DOM描繪了一個層次化的節(jié)點(diǎn)樹，可以添加溢吻，移除和修改頁面的內(nèi)容维费。Document用于表現(xiàn)HTML頁面當(dāng)前窗體的內(nèi)容，document對象包含一個節(jié)點(diǎn)對象促王，此對象包含每個單獨(dú)頁面的所有HTML元素犀盟，這就是W3C.
DOM中的三個字母，D（文檔）可以理解為整個 Web加載的網(wǎng)站文檔蝇狼；O（對象）可以理解為類似window對象之類的東西阅畴，可以調(diào)用屬性和方法，這里我們說的是document對象迅耘；M（模型）可以理解為網(wǎng)頁文檔的樹型結(jié)構(gòu)混驰。
Document主要用于表現(xiàn)當(dāng)前窗體的內(nèi)容
image.png
上面是完成的簡易版的留言板塊圖片
html 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="liuc.css"/>
</head>
<body>
<div id="box">
<ul>
<li class="liuyan">
<span class="content">今天是周一屎蜓，但是很瞌睡！</span>
<span>2016-09-23</span>
<a href="#">刪除</a>
</li>
<li class="liuyan">
<span class="content">今天是周一，但是很瞌睡映皆！</span>
<span>2016-09-23</span>
<a href="#">刪除</a>
</li>
</ul>
<button class="btn">發(fā)表留言</button>
</div>
<!--彈出留言框-->
<div class="shade" style="display: none;">
<div class="shade_cont">
<span class="xhao">X</span>
<textarea name="txt" rows="30" cols="30" class="txt"></textarea>
<button class="confirm">確認(rèn)發(fā)布</button>
</div>
</div>
<script src="liuyan.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
display: none;
font-size: 16px;
text-decoration: none;
}
#box{
width: 500px;
margin: 0 auto;
border: 1px solid;
}
ul .liuyan{
height: 50px;
font-size: 15px;
box-sizing: border-box;
margin: 0 6px;
padding: 5px;
border-bottom: 1px dashed;
}
.liuyan img{
height: 40px;
width: 40px;
vertical-align: middle;
}
.liuyan .content{
display: inline-block;
width: 180px;
margin: 0 80px 0 12px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
/*.liuyan a{
display: inline-block;
margin-left: 100px;
}*/
ul li:hover a{
display:inline;
color: red;
}
#box button{
height: 45px;
width: 100px;
font-size: 14px;
text-align: center;
line-height: 45px;
margin: 5px 0 10px 300px;
}
.shade{
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
}
.shade_cont{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
background: gainsboro;
}
.shade_cont button{
height: 45px;
width: 100px;
font-size: 14px;
text-align: center;
line-height: 45px;
margin: 5px 0 10px 300px;
}
.shade_cont span{
float: right;
width: 28px;
height: 26px;
font-size: 24px;
}
.txt{
width: 400px;
height: 300px;
border: 1px solid #aaa;
margin: 38px 0 0 51px;
}
js部分
//獲取發(fā)表留言按鈕
var btn = document.getElementsByClassName('btn')[0];
//獲取遮罩層class
var shade = document.getElementsByClassName('shade')[0];
//獲取x,
var xhao = document.getElementsByClassName('xhao')[0];
//獲取發(fā)布按鈕
var confirm = document.getElementsByClassName('confirm')[0];
//獲取多行框
var txt = document.getElementsByClassName('txt')[0];
//獲取ul
var Eul = document.getElementsByTagName('ul')[0];
console.log(Eul);
//獲取刪除按鈕
var Eas = document.getElementsByTagName('a');
console.log(Eas);
//讓遮罩層彈出
btn.onclick = function(){
txt.value = '';
shade.style.display = 'block';
}
//讓遮罩層消失
xhao.onclick = function(){
shade.style.display = 'none';
}
//給每一個a都添加一個刪除時間;
for(var i =0; i<Eas.length; i++){
Eas[i].onclick = delie;
}
function delie(){
Eul.removeChild(this.parentNode);
}
//點(diǎn)擊發(fā)布蠢挡，
confirm.onclick = function(){
shade.style.display = 'none';
var Eli = document.createElement('li');
var txts = txt.value;
//判斷如果如果發(fā)布的內(nèi)容是空的嫩与，就直接返回
if(txts.trim()==''){
return;
}
Eli.innerHTML = `
<span class="content">${txts}</span>
<span>2016-09-23</span>
<a href="#">刪除</a>
`;
//需要重新獲取新添加的a標(biāo)簽涕刚，并且重新添加事件
var aEle = Eli.getElementsByTagName('a')[0];
aEle.onclick = delie;
//注意，給新添加的li標(biāo)簽增加新的class屬性
Eli.className = 'liuyan';
Eul.appendChild(Eli);
}
能夠幫助大家多了解一些底層的東西４睾础Ｖ豢恰！暑塑！
