DOM ------ 简易留言功能

功能分析:
1.当没有内容输入时, 弹窗提示
2.可在文本框输入内容, 发布显示到网页上
3.新发布的内容在最上面
4.可以对发布的内容进行删除操作

输入为空时:

输入内容并发布

		//html代码
		<textarea placeholder="留言内容..."></textarea>
	    <button>发布</button>
	    <ul>
	        <li>留言板</li>
	    </ul>
	    //js代码
	    // 1.获取元素
        var btn = document.querySelector('button')
        var text = document.querySelector('textarea')
        var ul = document.querySelector('ul')
        // 2.注册事件
        btn.onclick = function() {
            if(text.value == ''){
                alert('您没有输入内容!')
                return false
            }else{
                // (1).创建元素
                var li = document.createElement('li')
                // 先有li 才能赋值
                // javascript:; 用来阻止页面跳转
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
                // (2).添加元素
                // ul.appendChild(li)
                ul.insertBefore(li,ul.children[0])
                // (3).删除元素 删除的是当前链接的li 它的父亲
                var as = document.querySelectorAll('a')
                for(var i=0;i<as.length;i++){
                    as[i].onclick = function() {
                        // node.removeChild(child) 删除的是li 当前a所在的li this.parentNode
                        ul.removeChild(this.parentNode)
                    }
                }
            }
        }

href 的值设置为 javascript:; 可用来阻止页面跳转

不积跬步无以至千里 不积小流无以成江海