javascript(DOM)(DAY19)
在上一篇文章中说明了javascript的DOM和event是什麽，而这篇文章会介绍如何利用上一篇所认识的一些DOM属性来简单的完成一个小小的例子。
-
动态留言板
这个例子将会使用一些DOM属性来完成一个非常简易的动态的留言板，只要使用者在输入栏位输入自己想留言的字，接着使用者就可以将留言的字动态的加入到网页内容中让自己看到!在这个范例中，因为是非常简易版的，只是利用DOM来测试看看它带给我们什麽样的功能，所以使用者自己输入留言板时，只有自己看得到，别人浏览此网页时是还无法看到自己留的言的，且重新进入网页後，之前留的言也是看不到的。在这边就开始来建立一个简单的留言板吧!
Example
1. 原始的样子:
2. 新增第一则留言:
3. 新增第二则留言:
<head>
<style>
body {
text-align: center;
background-color: antiquewhite
}
#area1 {
font-size: x-large;
}
#area2 {
padding: 6px 10px;
width: 50%;
height: 200px;
margin-bottom: 1em;
overflow-y: scroll;
/*overflow用意是若文字超过预设区块大小，将会自动加大区块或加入滚轴*/
border: 2px solid;
position: relative;
left: 25%;
background-color: azure;
font-size: x-large;
}
#count {
font-size: x-large;
color:red;
}
</style>
<script>
function add() {
var message = document.getElementById("area1");
var textnode = document.createTextNode("user:" + message.value);
//将textarea内的文字建立文字节点
var br = document.createElement("br");
//建立br换行元素节点
var area = document.getElementById("area2")
area.appendChild(textnode);
//将textnode文字节点加入area(id="area2")的子节点
area.appendChild(br);
//将br元素节点加入area(id="area2")的子节点
document.getElementById("count").innerText = area.children.length;
//总共有多少个文字节点(共多少则留言)
//br元素节点不算在children.length的长度中，而是算在属性childrenNodes.length中
}
</script>
</head>
<body style="">
<form>
<h1>留言版</h1><hr />
<textarea id="area1" name="area" rows="8" cols="30" placeholder="在此留言!"></textarea><br />
<input type="button" value="新增留言" onclick="add()" /><br />
<p>现在有<span id="count">0</span>则留言</p>
<div id="area2"></div>
</form>
</body>
结语
这篇文章介绍了如何实际用DOM的元素来达成一个简易的留言板，将上一篇所认识的元素稍微透过例子做了小小的统整。而下一篇会介绍几个常用的event事件以及addEventListener()监听事件喔!
Day 30 - 结束其实是另外一个旅程的开始
在人生真正划上句点之前，其实没有真的结束。 NBA 每年都会有冠军，每年各大网球赛事都会举办，每四年...
[Day3] - 前端，後端是在做什麽？ --续 前端後端的历史及架构
其实每个时期程序流行的架构以及写法会略有不同，每个时期前端後端负责的范畴也不尽相同，我们无法知道我们...
[Day23] CH11：刘姥姥逛物件导向的世界——多型
今天要来接续昨天没介绍完的物件导向的第三个特性——多型。 多型（Polymorphism） 父类别可...
iT铁人赛完赛感想 - 30天的结束不是完结
今天原本要发表的内容是「用Keycloak学习JWT权杖格式」，然後应该还会有1-2篇与JWT相关...
连续 30 天 玩玩看 ProtoPie - Day 25
看到这篇觉得满实用的，来跟着看一下。 连结： https://www.protopie.io/blo...