发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

第120篇: DOM编程(常用操作、动态脚本、样式及动态表格)

婧若钰熙

10

主题

10

帖子

30

积分

新手上路

Rank: 1

积分
30
显示全部楼层
好家伙，我回来了，
本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记
 
1.DOM编程

我们知道DOM是HTML文档的编程接口，
我们可以通过HTML代码实现DOM操作，
也同样能够通过JavaScript实现DOM操作。
 
2.JS操作DOM

我们来简单的举个例子：
随便开一个空白的html页面
 
  1. <strong><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>  
  10.    
  11.         <h1>来试试使用js实现dom操作吧
  12.         </h1>
  13.    
  14. </body>
  15. </html></strong>
复制代码
效果如下：

 
此处我们直接在html元素中进行操作，在页面中添加了一行标题（
  1. <strong>　
  2.         <h1>来试试使用js实现dom操作吧
  3.         </h1>
  4.     </strong>
复制代码
）
 
接下来我们使用JS进行相同的DOM操作
  1. <strong><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>  
  10.    
  11. </body>
  13. </html></strong>
复制代码
 

我们实现了同样的效果
 
3.动态脚本


[/code]　　
　　3.2.通过DOM编程创建这个节点
  1. <strong>let script = document.createElement("script");
  2. script.src = "plane.js";
  3. document.body.appendChild(script); </strong>
复制代码
(DOM编程农夫三拳:1.新建节点,2.某些操作,3.挂载到父节点上)
　　
　　我们把上述过程抽象成一个函数
  1. <strong>function loadScript(url) {
  2. let script = document.createElement("script");
  3. script.src = url;
  4. document.body.appendChild(script);
  5. } <br><br>loadScript("plane.js");<br>//外部文件名作为参数</strong>
复制代码
(便于使用)
 
　　3.3.script的text属性
现在就有人会想了,如果我有一大串方法或者函数,该怎么处理:
  1. [/code] 
  2. [b]js开发者早就替我们想好了,<script>元素上有一个 text 属性，可以用来添加 JavaScript 代码[/b]
  3. [code]<strong>　　let script = document.createElement("script");
  4.     script.text = "function dosomething(){alert('hi');} dosomething()";
  5.     document.body.appendChild(script);</strong>
复制代码
 
4.动态样式


CSS 样式在 HTML 页面中可以通过两个元素加载。元素用于包含 CSS 外部文件，而 [/code]DOM编程:
  1. <strong>let style = document.createElement("style");
  2. style.type = "text/css";
  3. style.appendChild(document.createTextNode("body{background-color:red}"));
  4. let head = document.getElementsByTagName("head")[0];
  5. head.appendChild(style);</strong>
复制代码
 
 
5.DOM操作表格:

HTML 中最复杂的结构之一,通常要涉及大量标签,其相应DOM操作也十分复杂
  1. <strong><table border="1" width="100%">
  2. 　　<tbody>
  3. 　　　　<tr>
  4. 　　　　　　<td>Cell 1,1</td>
  5. 　　　　　　 <td>Cell 2,1</td>
  6. 　　　　 </tr>
  7. 　　　　<tr>
  8. 　　　　　　<td>Cell 1,2</td>
  9. 　　　　　　<td>Cell 2,2</td>
  10. 　　　　 </tr>
  11. 　　</tbody>
  12. </table> </strong>
复制代码
以这个表格为例
  1. <strong>// 创建表格
  2. let table = document.createElement("table");
  3. table.border = 1;
  4. table.width = "100%";
  5. // 创建表体
  6. let tbody = document.createElement("tbody");
  7. table.appendChild(tbody);
  8. // 创建第一行
  9. let row1 = document.createElement("tr");
  10. tbody.appendChild(row1);
  11. let cell1_1 = document.createElement("td");
  12. cell1_1.appendChild(document.createTextNode("Cell 1,1"));
  13. row1.appendChild(cell1_1);
  14. let cell2_1 = document.createElement("td");
  15. cell2_1.appendChild(document.createTextNode("Cell 2,1"));
  16. row1.appendChild(cell2_1);
  17. // 创建第二行
  18. let row2 = document.createElement("tr");
  19. tbody.appendChild(row2);
  20. let cell1_2 = document.createElement("td");
  21. cell1_2.appendChild(document.createTextNode("Cell 1,2"));
  22. row2.appendChild(cell1_2);
  23. let cell2_2= document.createElement("td");
  24. cell2_2.appendChild(document.createTextNode("Cell 2,2"));
  25. row2.appendChild(cell2_2);
  26. // 把表格添加到文档主体
  27. document.body.appendChild(table); </strong>
复制代码
(看的眼都花了,八个标签不停套娃,DOM操作十分复杂)
于是,为了方便创建表格，HTML DOM 给、和 元素添加了一些属性和方法。
 
  1. <strong><table>元素添加了以下属性和方法：
  2.  caption，指向<caption>元素的指针（如果存在）；
  3.  tBodies，包含<tbody>元素的 HTMLCollection；
  4.  tFoot，指向<tfoot>元素（如果存在）；
  5.  tHead，指向<thead>元素（如果存在）；
  6.  rows，包含表示所有行的 HTMLCollection；
  7.  createTHead()，创建<thead>元素，放到表格中，返回引用；
  8.  createTFoot()，创建<tfoot>元素，放到表格中，返回引用；
  9.  createCaption()，创建<caption>元素，放到表格中，返回引用；
  10.  deleteTHead()，删除<thead>元素；
  11.  deleteTFoot()，删除<tfoot>元素；
  12.  deleteCaption()，删除<caption>元素；
  13.  deleteRow(pos)，删除给定位置的行；
  14.  insertRow(pos)，在行集合中给定位置插入一行。
  15. <tbody>元素添加了以下属性和方法：
  16.  rows，包含<tbody>元素中所有行的 HTMLCollection；
  17.  deleteRow(pos)，删除给定位置的行；
  18.  insertRow(pos)，在行集合中给定位置插入一行，返回该行的引用。
  19. <tr>元素添加了以下属性和方法：
  20.  cells，包含<tr>元素所有表元的 HTMLCollection；
  21.  deleteCell(pos)，删除给定位置的表元；
  22.  insertCell(pos)，在表元集合给定位置插入一个表元，返回该表元的引用</strong>
复制代码
  1. <strong>// 创建表格
  2. let table = document.createElement("table");
  3. table.border = 1;
  4. table.width = "100%";
  5. // 创建表体
  6. let tbody = document.createElement("tbody");
  7. table.appendChild(tbody);
  8. <br>// 创建第一行
  9. tbody.insertRow(0);
  10. //插入单元
  11. tbody.rows[0].insertCell(0);
  12. //单元插入元素
  13. tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
  14. tbody.rows[0].insertCell(1);
  15. tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
  16. // 创建第二行
  17. tbody.insertRow(1);
  18. tbody.rows[1].insertCell(0);
  19. tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
  20. tbody.rows[1].insertCell(1);
  21. tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
  22. // 把表格添加到文档主体
  23. document.body.appendChild(table); </strong>
复制代码
这样一看,整个表格的DOM操作变得十分明了，且逻辑清晰
 
 
6.小结

感觉DOM操作是整个JS学习线路上非常重要的一环,这个感觉重要到就属于是别人默认你会的那种,还是得记一记.
比如某一天你要给别人写包了,被人给你一个div,然后你不会操作,就很尴尬.所以还是得学

来源:https://www.cnblogs.com/FatTiger4399/p/17138374.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: html引入js文件加 defer ，defer 什么作用

下一篇: js获取blob数据流中携带的msg消息

发表于 2023-2-20 20:10:17

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4