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));
}
JavaScript（7）——DOM的更多相关文章
- JavaScript（5）——DOM
DOM操作 为了写这一篇随笔真的是费了好多力气,虽然还是写不好.本来是从周一都开始写的,但是周二周三忙着去帮忙招新了,哈哈哈.感觉做自己喜欢的事特别好玩,虽然挺忙的.看着那些小鲜肉,感觉自己真的老了啊 ...
- JavaScript（四）——DOM操作——Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- JavaScript（三）——DOM操作一
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...
- Javascript——（2）DOM
1.DOM 1)直接寻找 (1)document.getElementById() //根据ID获取一个标签: (2) document.getElementsByName() // ...
- JavaScript（三）-- DOM编程
JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...
- javascript （六）DOM
学习后的总结: DOM:document object model 关于DOM的简介:http://www.w3school.com.cn/htmldom/dom_intro.asp 本文说的是HTM ...
- JavaScript（十一）Dom
Dom(Document object module) 1.获取dom对象的方法 正常用的方法 推荐 getElementById()//通过id选择唯一的dom getElementsByClass ...
- Day4 JavaScript（二）dom操作
dom(文档对象模型) 文档结构 文档加载,转换为文档对象模型.将所有的标签,文本,属性转换为dom节点,形成一棵dom树. 标签,元素,节点: <a> 标签开始到结束的部分 标签,文本, ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
随机推荐
- 1.安装Loucust
python 3.x 通过pip安装: pip install locustio 如果是以分布式队列运行locust,需要装一种通信队列的库pyzmq :pip install pyzmq 安装成功 ...
- 前端知识体系：JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则
理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...
- Windows 刷新系统图标缓存
rem 关闭Windows外壳程序explorer taskkill /f /im explorer.exe rem 清理系统图标缓存数据库 attrib -h -s -r "%userpr ...
- DockerAPI版本不匹配的问题
1.问题描述 在执行docker指令的时候显示client和server的API版本不匹配,如下: 说明:在这里server API的版本号比client API版本号低,因此不能有效实现cilent ...
- 第四届西安邮电大学acm-icpc校赛 流浪西邮之寻找火石碎片 多体积条件背包
题目描述 众所周知,由于木星引力的影响,世界各地的推进发动机都需要进行重启.现在你接到紧急任务,要去收集火石碎片,重启西邮发动机.现在火石碎片已成为了稀缺资源,获得火石碎片需要钱或者需要一定的积分.火 ...
- bbs项目---表关系
表关系 用户表个人博客表点赞表文章表文章描述表文章和标签多对多关系表评论表分类表标签表 表关系设计示例收集: 1 https://bbs.csdn.net/topics/390260474 2 上图博 ...
- Spring Boot中@OneToMany与@ManyToOne几个需要注意的问题
@OneToMany如果不加@JoinColumn,系统会自动在主从表中增加一个中间表. 主表: @Entity(name = "Post") public class Post ...
- node中fs内置模块
Node.js内置的fs模块就是文件系统模块,负责读写文件. 和所有其它JavaScript模块不同的是,fs模块同时提供了异步和同步的方法. 回顾一下什么是异步方法.因为JavaScript的单线程 ...
- DataTable转List，DataTable转为Model对象帮助类
DataTable转List,DataTable转为Model对象帮助类 public class ModelConvertHelper<T> where T : new() { publ ...
- php &#编码/php unicode转码/php &#数字编码
今天使PHP开发用到了Unicode的编码与解码,将unicode转为中文,再将中文转Unicode这样的操作是非常常见的,所以小编将这两个unicode中文互转函数给作为一个笔记保存起来,非常的简单 ...