好家伙，我回来了，
本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记
我们知道DOM是HTML文档的编程接口，
我们可以通过HTML代码实现DOM操作，
也同样能够通过JavaScript实现DOM操作。
我们来简单的举个例子：
随便开一个空白的html页面
<!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> </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>复制
我们实现了同样的效果
<script>元素用于向网页中插入 JavaScript 代码，可以是 src 属性包含的外部文件，也可以是作为该
元素内容的源代码。动态脚本就是在页面初始加载时不存在，之后又通过 DOM 包含的脚本。与对应的
HTML 元素一样，有两种方式通过<script>动态为网页添加脚本：引入外部文件和直接插入源代码。
<script src="plane.js"></script>复制
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);复制
CSS 样式在 HTML 页面中可以通过两个元素加载。<link>元素用于包含 CSS 外部文件，而<style>
元素用于添加嵌入样式。
<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); }复制
<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);复制
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操作变得十分明了，且逻辑清晰
感觉DOM操作是整个JS学习线路上非常重要的一环,这个感觉重要到就属于是别人默认你会的那种,还是得记一记.
比如某一天你要给别人写包了,被人给你一个div,然后你不会操作,就很尴尬.所以还是得学