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

养肥胖虎 2023-03-28 原文

好家伙，我回来了，

本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记

1.DOM编程

我们知道DOM是HTML文档的编程接口，

我们可以通过HTML代码实现DOM操作，

也同样能够通过JavaScript实现DOM操作。

2.JS操作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>

我们实现了同样的效果

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,然后你不会操作,就很尴尬.所以还是得学

有关第120篇: DOM编程(常用操作、动态脚本、样式及动态表格)的更多相关文章

ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby-on-rails - 独立 ruby 脚本的配置文件 - 2
我有一个在Linux服务器上运行的ruby脚本。它不使用rails或任何东西。它基本上是一个命令行ruby脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。最佳答案首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg
ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2
几个月前，我读了一篇关于rubygem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？最佳答案是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby-on-rails - Prawn - 表格单元格内的链接 - 2
我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c
网络编程套接字 - 2
网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑：需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手（建立连接）数据传输四次挥手（断开连接）TCP和UDP对比网络编程基础知识
postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2
//1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

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

1.DOM编程

2.JS操作DOM

3.动态脚本

3.1.进行动态加载

3.2.通过DOM编程创建这个节点

4.动态样式

4.1.<link>导入

4.2.<style>元素

5.DOM操作表格:

6.小结

有关第120篇: DOM编程(常用操作、动态脚本、样式及动态表格)的更多相关文章

随机推荐

　　3.1.进行动态加载

　　3.2.通过DOM编程创建这个节点