好家伙，我回来了，

本篇为《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编程(常用操作、动态脚本、样式及动态表格)的更多相关文章

8. Ceph 基础篇 - 运维常用操作
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247485300&idx=1&sn=aacff9f7 ...
Django进阶Model篇004 - ORM常用操作
一.增加 create和save方法实例: 1.增加一条作者记录 >>> from hello.models import * >>> Author.object ...
Jquery Dom节点常用操作
select 标签 form提交的时候提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...
vue行内动态添加样式或者动态添加类名
还是记录一下吧(๑•ᴗ•๑) <li :style="{backgroundImage:`url(${item.pic})`}" @click="chooseVip ...
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)
第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型以对象的方式来表示对应的html,它有一系 ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
《高性能javascript》领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

Debian 安装vim 提示版本问题的处理
https://blog.csdn.net/Oil__/article/details/113384278 purge 还有 --allow-remove-essential 安装失败提示解决方法安装 ...
element-ui表格展开行每次只能展开一行
element-ui表格展开行每次只能展开一行 <template> <el-table :data="tableData" :expand-row-keys=& ...
你对iframe知道多少
iframe 嵌套第三方页面出现的问题我们需要通过一个接口获取被嵌套的地址. 然后将改地址赋值给iframe的src中,代码如下 <template> <div> <i ...
【笔记】macbook m2 芯片中使用 gcc docker 镜像来交叉编译
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯一个 c 程序,如何在 macbook m2 芯片的笔记本 ...
【k哥爬虫普法】程序员183并发爬取官方网站，直接获刑3年？
我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...
6.2 Windows驱动开发：内核枚举SSSDT表基址
在Windows内核中,SSSDT(System Service Shadow Descriptor Table)是SSDT(System Service Descriptor Table)的一种变种 ...
C/C++ 实现URL路径拆分
URL路径拆分: 例如我们传入 http://www.baidu.com/index.php 拆分为 www.baidu.com 和 /index.php #include <Windows.h ...
Linux下修改MySQL可以远程访问
所有操作均在MySQL命令行下执行,进入MySQL命令行:mysql -uroot -p #允许root账户远程登录 update mysql.user set host='%' where user ...
基于minsit数据集的图像分类任务｜CNN简单应用项目
Github地址 Image-classification-task-based-on-minsit-datasethttps://github.com/Yufccode/CollegeWorks/t ...
CF765F Souvenirs 题解
题目链接:CF 或者洛谷想了很久,然后想起做过的一道题:秃子酋长,一开始以为差不多,结果写着写着就发现不对劲了.最后写出了个神仙回滚莫队解法,感觉很妙,记录下. 进入神仙分析时刻首先,我们来考虑 ...

第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编程创建这个节点