原生DOM的理解和留言板实例

对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">
                 ![](img/1afba8663cd0642d43f3f2859d620dfc.jpg)
                 <span class="content">今天是周一,但是很瞌睡!</span>
                 <span>2016-09-23</span>
                 <a href="#">删除</a>
               </li>
                <li class="liuyan">
                 ![](img/1afba8663cd0642d43f3f2859d620dfc.jpg)
                 <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 = `
     
                 ![](img/1afba8663cd0642d43f3f2859d620dfc.jpg)
                 <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);

}

能够帮助大家多了解一些底层的东西!!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容