![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
简单的用户留言本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的用户留言本</title>
</head>
<body>
<label for="content"> 请留言:</label>
<input type="text" id="content" onkeydown="addcontent(this)" autofocus>
<ul id="list"></ul>
<script>
function addcontent(content) {
if (event.keyCode ===13 ){
//1.创建一个新留言
var item = document.createElement('li');
item.innerText = content.value;
//2.将留言添加到列表中
// 获取 ul
var list = document.querySelector('#list');
if (list.childElementCount === 0) {
list.appendChild(item);
} else {
var first = list.firstElementChild;
list.insertBefore(item,first);
}
//3.清空留言框
content.value = '';
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
创建一个对象数组，以它为表格数据， 将期填充到页面中的表格中，动态生成一张表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作表格的基本技巧</title>
<style>
table,th,td{
border: 1px solid #666;
}
table {
width: 500px;
text-align: center;
border-collapse: collapse;
}
table caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
/* 这里必须在nth-of-type(1)前添加父元素,否则thead,tbody中的第一行都会生效 */
thead tr:nth-of-type(1) {
background-color: lightblue;
}
</style>
</head>
<body>
<table id ='gwc'>
<caption>购物车</caption>
<thead>
<tr>
<th>编号</th>
<th>课程</th>
<th>课时</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var data = [
{id: 1, name : 'html' , day : 2},
{id: 2, name : 'css' , day : 3},
{id: 3, name : 'javascript' , day : 7}
];
var gwc = document.getElementById('gwc');
var tbody =gwc.children[2];
data.forEach(function(value) {
var tr =document.createElement('tr')
tr.innerHTML = '<td>' +value.id + '</td>';
tr.innerHTML += '<td>' +value.name + '</td>';
tr.innerHTML += '<td>' +value.day + '</td>';
tbody.appendChild(tr);
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
学习要点
属性:
children:某个节点下有多少个子节点
childNodes:子节点(复数形式)
childElementCount:统计子元素数量
keyCode:按键对应的编码 13回车 要用event.keyCode调用
firstElementChild:第一个子元素
nodeName:节点名称
innerText:添加纯文本 也可用append()添加文本
innerHTML:添加标签(带格式)
涉及方法:
creatElement():生成元素
例: var item = document.creatElement(“li”);
querySelector() : 获取名为ID=’XX’的元素
getElementsByTagName():
appendChild():在父节点的尾部添加一个子元素/子节点
list.appendChild(item);简写:list.append(item);
append(): 添加文本,作用同innerText
insertBefore(父对象,子对象): 在父对象中的子对象前插入
简写:prepend():
focus():获得焦点