DOM操作技术

Posted gaoxuerong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM操作技术相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态脚本   动态样式  操作表格   使用NodeList</title>
	</head>

	<body>
	</body>
	<script>
		/*动态脚本
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "client.js";
				document.body.appendChild(script)
				 * */
		/*
		  动态样式
		  var link = document.createElement("link");
		link.rel = "stylesheet";
		link.type = "text/css";
		link.href = "style.css";
		var head = document.getElementsByTagName("head")[0];
		head.appendChild(link);

		 * */
		/*
		  操作表格
		 * */
		//创建 table
		var table = document.createElement("table");
		table.border = 1;
		table.width = "100%";
		//创建 tbody
		var tbody = document.createElement("tbody");
		table.appendChild(tbody);
		//创建第一行
		var row1 = document.createElement("tr");
		tbody.appendChild(row1);
		var cell1_1 = document.createElement("td");
		cell1_1.appendChild(document.createTextNode("Cell 1,1"));
		row1.appendChild(cell1_1);
		var cell2_1 = document.createElement("td");
		cell2_1.appendChild(document.createTextNode("Cell 2,1"));
		row1.appendChild(cell2_1);
		//创建第二行
		var row2 = document.createElement("tr");
		tbody.appendChild(row2);
		var cell1_2 = document.createElement("td");
		cell1_2.appendChild(document.createTextNode("Cell 1,2"));
		row2.appendChild(cell1_2);
		var cell2_2 = document.createElement("td");
		cell2_2.appendChild(document.createTextNode("Cell 2,2"));
		row2.appendChild(cell2_2);
		//将表格添加到文档主体中
		document.body.appendChild(table);
		
		
		/*为<table>元素添加的属性和方法如下。
? caption：保存着对<caption>元素（如果有）的指针。
? tBodies：是一个<tbody>元素的 HTMLCollection。
? tFoot：保存着对<tfoot>元素（如果有）的指针。
? tHead：保存着对<thead>元素（如果有）的指针。
? rows：是一个表格中所有行的 HTMLCollection。
? createTHead()：创建<thead>元素，将其放到表格中，返回引用。
? createTFoot()：创建<tfoot>元素，将其放到表格中，返回引用。
? createCaption()：创建<caption>元素，将其放到表格中，返回引用。
? deleteTHead()：删除<thead>元素。
? deleteTFoot()：删除<tfoot>元素。
? deleteCaption()：删除<caption>元素。
? deleteRow(pos)：删除指定位置的行。
? insertRow(pos)：向 rows 集合中的指定位置插入一行。
	为<tbody>元素添加的属性和方法如下。
? rows：保存着<tbody>元素中行的 HTMLCollection。
? deleteRow(pos)：删除指定位置的行。
? insertRow(pos)：向 rows 集合中的指定位置插入一行，返回对新插入行的引用。
	为<tr>元素添加的属性和方法如下。
? cells：保存着<tr>元素中单元格的 HTMLCollection。
? deleteCell(pos)：删除指定位置的单元格。
? insertCell(pos)：向 cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。
	使用这些属性和方法，可以极大地减少创建表格所需的代码数量。例如，使用这些属性和方法可以
	将前面的代码重写如下（加阴影的部分是重写后的代码）。*/
	//创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主体中
document.body.appendChild(table); 
/*
 使用NodeList
 理解 NodeList 及其“近亲”NamedNodeMap 和 HTMLCollection，是从整体上透彻理解 DOM 的
关键所在。这三个集合都是“动态的”；
 * */
	</script>

</html>

 

以上是关于DOM操作技术的主要内容，如果未能解决你的问题，请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

5、dom 结构操作怎样添加、移除、移动、复制、创建和查找节点

第10章 DOM （2 DOM操作技术）

DOM操作技术

DOM操作

JavaScript单行代码，也就是代码片段