好家伙，我回来了，

本篇为《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则承载着整 ...

随机推荐

Mysql数据库部分管理命令极简学习总结
背景今天遇到一个得很奇怪的问题. Mysql一个运行时间很长的select阻塞了对select里面左连接表做create index 操作的SQL 当时感觉不应该, 一直以为读锁不会与独占更新锁互斥 ...
K8S 知识点
1. K8S集群大小在 v1.7 版本中,Kubernetes 支持集群节点(node)数可达1000个.更具体地说,我们配置能够支持所有如下条件: 不超过2000个节点不超过总共6000个 po ...
京东金融APP-新交互技术“虚拟数字人”赋能世界杯主题营销
作者:平台研发部,智能服务与产品部距离加文·伍德提出web3.0已经过去8年时间,这8年加文·伍德创建的以太坊大放异彩,同时由web3.0引出的数字人.元宇宙也生根发芽,茁壮成长,带来了非凡的用户体 ...
vuex中action中发送数据
state: { actionData: "", }, mutations: { actioncomAPi: (state, data) => { state.actionD ...
ABP-VNext 用户权限管理系统实战05----扩展授权类型（单点登录）
一.适合场景: 1.我方系统在集成到别人的集成本台时一般是拿别的平台的用户名,在我方系统进行登录 2.我方系统是前后端分离,前端要拿到token 二.解决方案:自定义授权类型我们知道Identity ...
C语言输出键盘
使用printf()函数输出样式 #include <stdio.h> int main() { printf("┌───┬───┬───┬───┬───┬───┬───┬─── ...
Spring源码——初识Spring容器
Spring源码之工厂(容器) 为什么把Spring的工厂又叫做容器呢? 工厂的责任是创建对象,但是创建完对象后还要进行存储(针对于单例的对象来讲),以供其他地方使用,这就是容器.为了能存多个对象,并 ...
携程Java三面面经，已拿 offer！！
分享一位读者投稿的携程校招 Java 岗位的面经. 下面是正文. 个人背景:双非本,机械专业转码. 携程在正式面试之前,会有一个性格测试(40分钟).性格测试之后,大概过一周进行笔试.笔试之后,会邮件 ...
python快速入门【二】----常见的数据结构
python入门合集: python快速入门[一]-----基础语法 python快速入门[二]----常见的数据结构 python快速入门[三]-----For 循环.While 循环 python ...
驱动开发：通过SystemBuf与内核层通信
内核层与应用层之间的数据交互是必不可少的部分,只有内核中的参数可以传递给用户数据才有意义,一般驱动多数情况下会使用SystemBuf缓冲区进行通信,也可以直接使用网络套接字实现通信,如下将简单介绍通过 ...

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