4_13.DOM--常用HTML DOM对象:Image\Table\Select\Form

最新推荐文章于 2024-03-28 10:30:58 发布

ATWLee

最新推荐文章于 2024-03-28 10:30:58 发布

阅读量200

点赞数 1

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/101449020

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

之前介绍的创建新元素以及添加到DOM树等操作，都是使用核心DOM的API进行操作的。
HTML DOM对一些常用的，复杂的元素对象进行了部分简化

Image对象，Table对象，Select对象，Form对象

Image对象

image对象，代表< img>元素
< img>标签每出现一次，一个image对象就会被创建
HTML DOM提供了更加方便的创建image对象的API
new Image();

Table对象

table对象，代表一个html表格
每一对table标签，都是一个table对象
HTML DOM提高了更加方便的创建表格中的元素的API
在table中创建一个行分组：
table.createTHead/TBody/TFoot();
创建同时，就将行分组添加到table
返回新创建的行分组对象
删除一个行分组
table.deleteTHead/TFoot();
获取一个行分组
table.tHead/tFoot();
table.tBodies[i]

行：
在行分组中创建一个行
Table/THead/TBody/TFoot.insertRow(i)
i为下标位置，如果省略，则表示在末尾添加
如果直接在Table中创建，则会自动创建到最后一个TBody中
返回新创建的行对象
获取指定范围内的所有行：Table/THead/TBody/TFoot.rows
删除指定范围内下标为i的行：Table/THead/TBody/TFoot.deleteRow(i)
获取当前行在整个表中的下标：tr.rowIndex

列：
在行中创建一个列
tr.insertCell(i)
i为下标位置，如果省略，则表示在末位添加
返回新创建的列对象
获取指定行中的所有列：tr.cells
删除指定行中下标为i的列：tr.deleteCell(i)

var div=document.getElementById("div");
var table=document.createElement("table")

//创建表头/体/尾

var thead=table.createTHead();
var tbody=table.createTBody();
var tfoot=table.createTFoot();

//thead添加行/列
var tr=thead.insertRow();
for(var i=0;i<5;i++){
	var td=tr.insertCell().innerHTML=i;
}
//tbody添加行/列
for(var i=0;i<5;i++){
	var tr=tbody.insertRow();
	for(var j=0;j<5;j++){
		var td=tr.insertCell().innerHTML=(i+"-"+j);
	}
	var td=tr.insertCell(3).innerHTML="new insertTD";
}
tbody.insertRow(2).innerHTML="new insertTR";

//tfoot添加行/列

div.appendChild(table);

4-10：DOM动态创建表格：

优化代码：

var json=[
	{"name":"A","score":"100","age":18},
	{"name":"B","score":"90","age":19},
	{"name":"C","score":"80","age":20}
];

var div=document.getElementById("div");
//创建table
var table=document.createElement("table");
//表头thead
var thead=table.createTHead();
//thead内行/列
var tr=thead.insertRow();
for(key in json[0]){
	tr.insertCell().innerHTML=key;
}
//thead添加删除选型
thead.rows[0].insertCell().innerHTML="Delete";

//表体tbody
var tbody=table.createTBody();
//tbody内行/列
for(var i=0;i<json.length;i++){
	var tr=tbody.insertRow();
	for(key in json[i]){
		tr.insertCell().innerHTML=json[i][key];
	}
	//tbody添加删除按钮
	var td=tr.insertCell()
	var btn=document.createElement("button");
	btn.innerHTML="Delete";
	td.appendChild(btn);
}

//表table添加到div
div.appendChild(table);
//功能：删除
//1.构建DOMTree
//2.查找触发事件的元素：删除按钮
var btns=tbody.getElementsByTagName("button");
//3.绑定事件
for(var i=0;i<btns.length;i++){
	btns[i].onclick=function(){
		table.deleteRow(this.parentElement.parentElement.rowIndex);
	}
}

Select对象

Select对象，代表HTML表单中的一个select元素
每一对select标签都是一个Select对象

常用属性：
.selectedIndex:获得当前选中项的下标
.value:获得当前选中项的值
.options:获得select下的所有option的集合
.length:表示选项的总个数。修改length的值，可以添加或删除option

常用方法：
add(option,i):在Select中添加一个option
remove(i):删除一个option。如果没有参数，删除整个select

常用事件：
onchange：当选中项改变时触发

option对象

option对象，代表HTML表单中Select下拉列表中的一个选项
每一对option标签都是一个option对象
创建一个option：
new Option(text,value);

常用属性：
.index:表示当前option在Select下的位置
.text:option中的内容，等同与innerHTML

4.12DOM—实现省市级二级列表

优化代码：

var citys=[
	[{"name":"海淀区","value":1},
	 {"name":"朝阳区","value":2},
	 {"name":"东城区","value":3}],
	[{"name":"A","value":4},
	 {"name":"B","value":5},
	 {"name":"C","value":6},
	 {"name":"D","value":7},
	 {"name":"E","value":8}],
	[{"name":"F","value":9},
	 {"name":"G","value":10},]
		]

//1.构建DOMTree
//2.查找触发事件的元素：两个Select
var selProvs=document.getElementById("selProvs");//省级列表
var selCity=document.getElementById("selCity");//市级列表
//3.绑定事件
selProvs.onchange=function(){
	//判断是否选择
	var v=parseInt(this.value);//省级列表当前选中项的value值（之前那个是获取的index值）
	if(v==0){
		//未选择
		selCity.innerHTML="";
		selCity.className="hide";
	}else{
		//清空selCity内容样式
		selCity.innerHTML="";
		selCity.className="";
		//选择
		//创建文档片段
		var frag=document.createDocumentFragment();
		//创建市级列表第一个option：请选择
		frag.appendChild(new Option("-请选择-"));
		//添加市级列表
		var citys_i=citys[v-1];//获取市级城市子数组
		for(var i=0;i<citys_i.length;i++){
			var option=new Option(citys_i[i]["name"],citys_i[i]["value"]);
			frag.appendChild(option)
		}
		//文档片段添加到selCity
		selCity.appendChild(frag);
	}
}