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 ...
随机推荐
- fonts/font-awesome-woff2 404问题
报错环境: vue 开发的项目 npm 引入的font-awesome, 页面正常显示,就是控制台会报这个错误 产生原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS ...
- Python 列表和元组 (2) 持续更新
数据结构就是数据的集合.Python最基本的数据结构就是序列,每个元素都会被分配一个元素的位置,也可以称为索引.注意索引都是从0开始的. Python包含6种内建的序列,分别是列表.元组.字符串.Un ...
- 用vs2013开启一个C拖控件的项目
visual studio作为一款集成开发环境备受青睐,笔者尤其喜爱它的拖控件功能,程序员应该追求业务逻辑和实际功能的优化,而不是把时间消耗在编写窗体和按钮上 笔者曾翻阅中关村图书大厦,西单图书大厦, ...
- 【Android-网络通讯】 客户端与.Net服务端Http通讯
以登陆系统为例: 一.创建服务端程序 1.打开VS2012,新建项目,创建ASP.NET WEB应用程序 ,命名为MyApp 2.添加新建项,选择一般处理程序,创建Login.ashx C# Code ...
- 011_linuxC++之_继承的引入
(一)面向对象程序设计中最重要的一个概念是继承.继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易.这样做,也达到了重用代码功能和提高执行时间的效果. (二)引入继承程序 # ...
- apply, bind, call--绑定this的方法
Function.prototype.call(),Function.prototype.apply(),Function.prototype.bind() 是三种改变函数内部this指向(即函数执行 ...
- lyc——2019.10.31
10:判决素数个数 总时间限制: 1000ms 内存限制: 65536kB 描述 输入两个整数X和Y,输出两者之间的素数个数(包括X和Y). 输入 两个整数X和Y(1 <= X,Y <= ...
- redis延时监控
一. slow log慢查询日志 Redis监控工具,命令和调优 slowlog是 Redis 用来记录查询执行时间的日志系统.slowlog-log-slower-than设置慢操作的阈值,单位是微 ...
- 9.Spring Cloud Config统一管理微服务配置
Spring Cloud Config统一管理微服务配置 9.1. 为什么要统一管理微服务配置 9.2. Spring Cloud Config简介 Spring Cloud Config为分布式系统 ...
- ./与sh区别
1 ./需要执行权限,使用脚本文件中第一行#!指定的shell(解释器)来执行命令(譬如常见的/bin/bash),不指定系统会调用默认shell程序 2 sh不需要执行权限,是使用sh这个s ...