JavaScript学习笔记（三）——留言板知操纵DOM节点

用JavaScript写了一个简易的留言板，暂不涉及数据库接入等。

1.功能以及流程

主要功能即为留言，用两个文本框接受用户输入的用户名以及留言内容，然后通过“提交留言”按钮将用户名+留言发布到下方的留言列表区域。

2.页面样式设计

样式很简单，就不上代码了。

3.使用JS实现留言功能

代码：

function getMessage(){

var btn = document.getElementById("btn1"); //绑定发布按钮

var message = document.getElementById("message");

var name = document.getElementById("name");

var nameValue = "";

var messageValue = "";

btn.onclick = function(){

nameValue = name.value || "Lon"; //设置默认值

messageValue =  message.value || "http://www.cnblogs.com/lonhon/" ;

var msgList = document.getElementById("messageList");

var msgDiv = document.createElement("div");

msgDiv.className="msg";  //设置留言Div样式

var msgTxt = document.createTextNode(nameValue+"留言："+messageValue);

msgDiv.appendChild(msgTxt);

msgList.appendChild(msgDiv);

}

}

function addLoadEvent(func)

{

var oldonload = window.onload; //得到上一个onload事件的函数

if(typeof window.onload != 'function')

{

window.onload = func;

}

else

{

window.onload = function()

{

oldonload(); //调用之前覆盖的onload事件的函数

func(); //调用当前事件函数

}

}

}

4.测试，首先不输入内容看是否有返回设置的默认值

这一步OK，返回去看JS中设置的默认值

5.测试，输入内容

总结，这个JS留言板设计的较为简陋，主要是练习JS操纵DOM节点，在本次中即为点击#btn1 下方列表则通过appendChild方法添加新DIV。

26行中，msgList绑定留言列表DIV，然后通过creatElement创建单个msgDiv，写入用户名和留言内容，再通过向父级msgList添加子节点的方式将msgDiv添加到留言列表，即实现了留言发布的功能。

加深了JS中一切皆为对象的理念，这也是面向对象编程的好处吧，能够很好的把控所操作的东西，比如上图中28行，向msgDiv添加css样式。下一步准备模仿腾讯微博的微博发布页面，实现相同的功能并加入新的元素比如时间、头像等。