JavaScript(7)——DOM
什么是 DOM?
DOM是 Document Object Model(文档对象模型)的缩写
DOM是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型,无论是XML,HTML以及其它的标记语言都是通用的
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
什么是 HTML DOM?
HTML DOM 是:
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
区别
对于核心DOM, API简单,原理简单,编码复杂;
HTML DOM,API复杂,编程形象化,编码轻松
对于核心DOM只有标记语言的概念,并不认识各个标签的含义,标记语言是由节点互相嵌套而成;
- 元素结点
- 属性节点
- 文本节点
- 注释结点
核心DOM API:
document.createElement(nodename)
The createElement() method creates an Element Node with the specified name.
document.createTextNode(text)
The createTextNode() method creates a Text Node with the specified text.
node.appendChild(node)
The appendChild() method appends a node as the last child of a node.
node.insertBefore(newnode,existingnode)
The insertBefore() method inserts a node as a child, right before an existing child, which you specify.You can also use the insertBefore method to insert/move an existing element (See "More Examples").
node.firstChild
The firstChild property returns the first child node of the specified node, as a Node object.
坑点:返回第一个结点,通常来说都有一个换行,它属于文本节点,因此firstChild通常会返回文本结点;因此建议用element.firstElementChild
element.firstElementChild
The firstElementChild property returns the first child element of the specified element.
node.removeChild(node)
The removeChild() method removes a specified child node of the specified element.
children和childNodes的区别
element.children
The children property returns a collection of an element's child elements, as an HTMLCollection object.children only contain element nodes.
element.childNodes
The childNodes property returns a collection of a node's child nodes, as a NodeList object.,including text nodes and comment nodes。
创建一个结点基本步骤:
创建元素结点 tag【createElement】,创建文本节点text【createTextNode】,添加到元素结点【tag.appendChild】,创建属性节点 attr【createAttribute】
,设置属性节点值【attr.value = ...】,设置到元素节点【tag.setAttributeNode】;
核心DOM就是:节点套节点,孩子找双亲
HTML DOM API:
专门用来操作HTML的API
核心DOM是万能的,若HTML DOM也没有想要的API就要自己合理利用两者去编程;
练习:
添加,修改,删除学生信息
table显示学生信息
点击学生信息对应行,将学生信息再次显示在输入框中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script src="../../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../base.js"></script>
<style>
.rows{
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1 class="my-5">学生信息登记</h1>
<form class="form-inline">
<div class="form-group mr-3">
学号:
</div>
<div class="form-group">
<label for="elemt" class="sr-only"></label>
<input type="text" class="form-control mr-3" id="id">
</div>
<div class="form-group mr-3">
姓名:
</div>
<div class="form-group">
<label for="elemt" class="sr-only"></label>
<input type="text" class="form-control mr-3" id="name">
</div>
<div class="form-group mr-3">
年龄:
</div>
<div class="form-group">
<label for="elemt" class="sr-only"></label>
<input type="text" class="form-control mr-3" id="age">
</div>
<button id="add" type="button" class="btn btn-primary mr-3" onclick="addStu();" >添加/修改</button>
</form>
<hr>
<h3 class="my-5">学生列表</h1>
<table class="table table-striped" id="tb">
<tbody>
<tr>
<th>#</th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</tbody>
</table>
</div>
<script src="stu_info.js"></script>
</body>
</html>
/**
* Class Page
*/
function Page(){
this.students = [new Student('3177102326','王有才',21)]; //数组
this.table = $('tb'); //表格
this.ipt = document.getElementsByTagName('input');
} /**
* Class Student
* @param {*} stuID
* @param {*} stuName
* @param {*} stuAge
*/
function Student(stuID,stuName,stuAge){
this.id = stuID;
this.name = stuName;
this.age = stuAge;
} /**
* 添加/更新学生到数组
*/
function addStu(){
var id = $('id').value;
var name = $('name').value;
var age = $('age').value;
for(var i = 0; i<page.students.length;i++){
if(page.students[i].id === id){
page.students[i].name = name;
page.students[i].age = age;
vendor(page.students, page.table);
return;
}
}
page.students.push(new Student(id,name,age));
vendor(page.students, page.table);
} /**
* 删除位于index下的数组元素
* @param {*} index
*/
function delStu(index){
page.students.splice(index,1);
vendor(page.students, page.table);
event.stopPropagation(); //防止冒泡
} /**
*
* 在index位置上的数组元素的信息填入输入框中
* @param {*} index
*/
function getStuInfo(index){
$('id').value = page.students[index].id;
$('name').value = page.students[index].name;
$('age').value = page.students[index].age;
} /**
* 将数组中的学生信息渲染到表格中
* @param {*} arr 渲染数组
* @param {*} tb 表格
*/
function vendor(arr,tb){
var strValue = "";
if (!arr.length) strValue = '<tr><td colspan="5" class="alert alert-primary" role="alert">nothing to be display</td></tr>';
else{
arr.forEach(function(item,index){
strValue
+= '<tr class="rows" onclick="getStuInfo('+index+')"><td>'+ (index+1) +'</td><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.age+'</td><td><span class="btn btn-danger" onclick="delStu('+index+')">删除</span></td></tr>'
});
}
tb.getElementsByTagName('tbody')[0].innerHTML = strValue;
} // /**
// * 将数组中的学生信息渲染到表格中
// * 既要添加节点又要添加属性
// * 若每个cell要添加attribute,必须还得缓存一下,会增加代码量
// * 单看方便,字符串拼接后使用innerHtml会笔记方便
// * @param {*} arr 渲染数组
// * @param {*} tb 表格
// */
// function vendor(arr, tb){
// tb.getElementsByTagName('tbody')[0].innerHTML = ""; // 清空原有表格
// if (!arr.length) {
// var row = tb.insertRow(-1);
// row.innerHTML = '<td colspan="5" class="alert alert-primary" role="alert">nothing to be display</td>'
// }else{
// arr.forEach(function(item,index){
// var row = tb.insertRow(-1); // 坑点:如果table下有thead和tbody,他会插入到thead中
// row.setAttribute('onclick','getStuInfo('+index+')');
// row.insertCell(0).innerHTML = index + 1;
// row.insertCell(1).innerHTML = item.id;
// row.insertCell(2).innerHTML = item.name;
// row.insertCell(3).innerHTML = item.age;
// row.insertCell(4).innerHTML = '<span class="btn btn-danger" onclick="delStu('+index+')">删除</span>';
// })
// } // } var page = new Page();
/**
* 每个input被focus时选中其value
*/
for(var i = 0; i<page.ipt.length;i++){
page.ipt[i].onclick = function(){
this.select();
}
}
vendor(page.students, page.table);
function $(id){
return document.getElementById(id);
}
function print(log){
console.log(log);
}
function getRandom(start, end){
if(!(start<=end)) return -1;
return Math.floor(start + Math.random()*(1 + end - start));
}
最新文章
- Lind.DDD.Utils.HttpHelper关于对HttpClient的正确使用
- EF--Codefirst 加密数据库连接字符串
- object sender ,EventArs e
- C语言关键字-volatile
- 【区间选点问题】uva 10148 - Advertisement
- 微信JSAPI支付 跟 所遇到的那些坑
- Jedis操作redis(转)
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.28
- MacBook 整个配置过程,供新入手MacBook的同学
- IntelliJ IDEA 注册码——亲测有效
- margin居中显示
- wepy框架须知
- javascript的函数、事件
- 微软 WPC 2014 合作伙伴keynote
- Android 显示Dialog的同时自动弹出软键盘;
- tar.gz和.rpm包的区别与使用(转)
- Yum Priorities
- 前端基础之HTML快速入门
- 阿里巴巴Java开发手册-并发处理
- 201621123008 《Java程序设计》第二周学习总结
热门文章
- docker: Error response from daemon: invalid mount config for type ";bind";: bind source path does not exist: /tmp/tfserving/
- idea如何打开右侧工具栏
- Python 列表和元组 (2) 持续更新
- (四)关于java.lang.IllegalMonitorStateException异常说明
- Java实现文件的上传下载(含源代码和jar包)
- Series和Dataframe分组时使用groupby函数的区别
- mongodb命令----批量更改文档字段名
- asyncio模块实现线程的嵌套和穿插
- config文件的实现
- vue_03总结