好家伙，我回来了，

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

随机推荐

Mark 一下 Redisson 可能需要升级版本
貌似有bug 我们高并发的情况下貌似遇到了 https://github.com/redisson/redisson/issues/2299
MySQL 常见面试题/知识点总结！（2021 最新版）| JavaGuide
相关阅读: 2.7w字!Java基础面试题/知识点总结!(2021 最新版) 这篇文章之前发过,不过,我最近对其进行了重构完善并且修复了很多小问题.所以,在公号再同步一下! 内容很硬!强烈建议小伙伴们 ...
C/C++ 关于继承与多态笔记
继承的基本语法: 继承的目的就是用于提高代码的可用性,减少代码的重复内容,高效开发. #include <iostream> using namespace std; class Base ...
深空物联网通信中视频流的智能多路TCP拥塞控制｜文献阅读｜文献分析和学习｜拥塞控制｜MPTCP｜SVC
前言那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总https://blog.cs ...
Apache和Nginx是什么？｜Nginx和Reactor是什么？｜网路IO的本质｜阻塞队列｜异步非阻塞IO
前言那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量干货博客汇总https://blog. ...
【预定义】C语言预定义代码（宏、条件编译等）内容介绍【最全的保姆级别教程】
浅谈C语言预定义中的预定义符号,#define,以及符号#,##的相关运用求个赞求个赞求个赞求个赞谢谢先赞后看好习惯打字不容易,这都是很用心做的,希望得到支持你大家的点赞和支持对于我来说是一 ...
P2216 [HAOI2007] 理想的正方形题解
题目链接:理想的正方形比较明显的,我们可以用二维 ST 表解决,具体的二维 ST 表的实现,只需要知道一点: 对于 \(st[i][j][t]=max(i \sim i+2^t,j \sim j+2 ...
教你用JavaScript实现搜索展开
欢迎来的我的小院,恭喜你今天又要涨知识了! 案例内容利用JavaScript实现搜索框的移动展开. 演示学习 <!DOCTYPE html> <html lang="e ...
FDConnection的事务测试讲解。。
总之用事务的宗旨是: 1.不用嵌套事务EnableNested设置为False 2.事务一定要回滚,避免发生异常的情况下,没有回滚造成,不可估量的错误. try frmClientDm.MyMain ...
ASP.NET Core分布式项目实战（集成ASP.NETCore Identity）--学习笔记
任务24:集成ASP.NETCore Identity 之前在 Index 页面写了一个 strong 标签,需要加个判断再显示,不然为空没有错误的时候也会显示 @if (!ViewContext.M ...

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