对DOM的理解
DOM即文档对象模型，针对HTML和XML文档的API(应用程序接口)
DOM描绘了一个层次化的节点树，可以添加，移除和修改页面的内容。Document用于表现HTML页面当前窗体的内容，document对象包含一个节点对象，此对象包含每个单独页面的所有HTML元素，这就是W3C.
DOM中的三个字母，D（文档）可以理解为整个 Web加载的网站文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
Document主要用于表现当前窗体的内容
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">发表留言</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">确认发布</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部分
//获取发表留言按钮
var btn = document.getElementsByClassName('btn')[0];
//获取遮罩层class
var shade = document.getElementsByClassName('shade')[0];
//获取x,
var xhao = document.getElementsByClassName('xhao')[0];
//获取发布按钮
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);
}
//点击发布，
confirm.onclick = function(){
shade.style.display = 'none';
var Eli = document.createElement('li');
var txts = txt.value;
//判断如果如果发布的内容是空的，就直接返回
if(txts.trim()==''){
return;
}
Eli.innerHTML = `
<span class="content">${txts}</span>
<span>2016-09-23</span>
<a href="#">删除</a>
`;
//需要重新获取新添加的a标签，并且重新添加事件
var aEle = Eli.getElementsByTagName('a')[0];
aEle.onclick = delie;
//注意，给新添加的li标签增加新的class属性
Eli.className = 'liuyan';
Eul.appendChild(Eli);
}
能够帮助大家多了解一些底层的东西！！！！
网友评论