好家伙 ，我回来了 ，
本篇为《JS高级程序设计》第十四章“DOM编程 ”学习笔记
1.DOM编程
我们知道DOM是HTML文档的编程接口 ，
我们可以通过HTML代码实现DOM操作 ，
也同样能够通过JavaScript实现DOM操作 。
2.JS操作DOM
我们来简单的举个例子：
随便开一个空白的html页面
效果如下：
此处我们直接在html元素中进行操作 ，在页面中添加了一行标题（
<
div>
<
h1>来试试使用js实现dom操作吧
</
h1>
</
div>
）
接下来我们使用JS进行相同的DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div>
<h1>来试试使用js实现dom操作吧
</h1>
</div> -->
</body>
<script>
//创建div元素
let div =document.createElement(div)
//创建h1元素
let h1 =document.createElement(h1)
//创建文本元素
let text1 = document.createTextNode(来试试使用js实现dom操作吧)
//将文本元素添加到h1中
h1.appendChild(text1)
//将h1添加到div元素中
div.appendChild(h1);
//将该div元素挂载到body下
document.body.appendChild(div);
</script>
</html>
我们实现了同样的效果
3.动态脚本
<script>元素用于向网页中插入 JavaScript 代码 ，可以是 src 属性包含的外部文件 ，也可以是作为该元素内容的源代码 。动态脚本就是在页面初始加载时不存在 ，之后又通过 DOM 包含的脚本 。与对应的HTML 元素一样 ，有两种方式通过<script>动态为网页添加脚本：引入外部文件和直接插入源代码 。
3.1.进行动态加载
<script src="plane.js"></script>
3.2.通过DOM编程创建这个节点
let script = document.createElement("script");
script.src = "plane.js";
document.body.appendChild(script);
(DOM编程农夫三拳:1.新建节点,2.某些操作,3.挂载到父节点上)
我们把上述过程抽象成一个函数
function loadScript(url) {
let script = document.createElement("script");
script.src = url;
document.body.appendChild(script);
} loadScript("plane.js");//外部文件名作为参数
(便于使用)
3.3.script的text属性
现在就有人会想了,如果我有一大串方法或者函数,该怎么处理:
<script>
function dosomething() {
alert("hi");
}
dosomething();
</script>
js开发者早就替我们想好了,<script>元素上有一个 text 属性 ，可以用来添加 JavaScript 代码
let script = document.createElement("script");
script.text = "function dosomething(){alert(hi);} dosomething()";
document.body.appendChild(script);
4.动态样式
CSS 样式在 HTML 页面中可以通过两个元素加载 。<link>元素用于包含 CSS 外部文件 ，而<style>元素用于添加嵌入样式 。
4.1.<link>导入
<link rel="stylesheet" type="text/css" href="styles.css">
DOM编程:
function loadStyles(url){
let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
let head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
4.2.<style>元素
<style type="text/css">
body {
background-color: red;
}
</style>
DOM编程:
let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
let head = document.getElementsByTagName("head")[0];
head.appendChild(style);
5.DOM操作表格:
HTML 中最复杂的结构之一,通常要涉及大量标签,其相应DOM操作也十分复杂
<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>
以这个表格为例
// 创建表格
let table = document.createElement("table");
table.border = 1;
table.width = "100%";
// 创建表体
let tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建第一行
let row1 = document.createElement("tr");
tbody.appendChild(row1);
let cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
let cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);
// 创建第二行
let row2 = document.createElement("tr");
tbody.appendChild(row2);
let cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
let cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);
// 把表格添加到文档主体
document.body.appendChild(table);
(看的眼都花了,八个标签不停套娃,DOM操作十分复杂)
于是,为了方便创建表格 ，HTML DOM 给 、和 元素添加了一些属性和方法 。
<
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) ，在行集合中给定位置插入一行 。
<
tbody>元素添加了以下属性和方法：
rows ，包含<
tbody>元素中所有行的 HTMLCollection；
deleteRow(pos) ，删除给定位置的行；
insertRow(pos) ，在行集合中给定位置插入一行 ，返回该行的引用 。
<
tr>元素添加了以下属性和方法：
cells ，包含<
tr>元素所有表元的 HTMLCollection；
deleteCell(pos) ，删除给定位置的表元；
insertCell(pos) ，在表元集合给定位置插入一个表元 ，返回该表元的引用
// 创建表格
let table = document.createElement("table");
table.border = 1;
table.width = "100%";
// 创建表体
let 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);
这样一看,整个表格的DOM操作变得十分明了 ，且逻辑清晰
6.小结
感觉DOM操作是整个JS学习线路上非常重要的一环,这个感觉重要到就属于是别人默认你会的那种,还是得记一记.
比如某一天你要给别人写包了,被人给你一个div,然后你不会操作,就很尴尬.所以还是得学
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
