《Javascript 高级程序设计(第三版)》笔记0x11 DOM操作技术

最新推荐文章于 2024-01-16 11:51:31 发布

原创最新推荐文章于 2024-01-16 11:51:31 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动态脚本 #动态样式 #操作表格 #NodeList #DOM操作技术

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

JavaScript

152 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态加载脚本和样式表，以及如何创建和操作HTML表格。通过具体的代码示例，展示了如何利用DOM操作实现网页元素的动态加载和修改。

动态脚本

<script type="text/javascript" src="client.js"></script>

function loadScript(url){
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
}
loadScript("client.js");

动态样式

<link rel="stylesheet" type="text/css" href="styles.css">

function loadStyles(url){
	var link = document.createElement("link");
	link.rel = "stylesheet";
	link.type = "text/css";
	link.href = url;
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(link);
}
loadStyles("styles.css");

操作表格

<table border="1" width="100%">
	<tbody>
		<tr>
			<td>Cell 1,1</td>
			<td>Cell 2,1</td>
		</tr>
		<tr>
			<td>Cell 1,2</td>
			<td>Cell 2,2</td>
		</tr>
	</tbody>
</table>

//创建 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

var divs = document.getElementsByTagName("div"),
	i,
	len,
	div;
for (i=0, len=divs.length; i < len; i++){
	div = document.createElement("div");
	document.body.appendChild(div);
}