好家伙，我回来了，

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

随机推荐

【JS 逆向百例】W店UA，OB反混淆，抓包替换CORS跨域错误分析
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...
[2] HEVD 学习笔记：栈溢出漏洞训练
2. HEVD 栈溢出漏洞训练 2.1 漏洞原理当函数退出的时候,会将保存在栈中的返回地址取出,跳转到该地址继续执行,以此来执行函数调用以后的程序.而如果用户的输入没有得到控制,覆盖掉了这个返回 ...
python自动化高效办公第二期，带你项目实战【二】｛数据可视化、发送邮件（定时任务监控）、python聊天机器人（基于微信、钉钉）｝
相关文章和数据源: python自动化高效办公第二期,带你项目实战[一]{excel数据处理.批量化生成word模板.pdf和ppt等自动化操作} Python自动化办公--Pandas玩转Excel ...
parser.add_argument()用法——命令行选项、参数和子命令解析器
argparse是一个Python模块:命令行选项.参数和子命令解析器.通过使用这种方法,可以在使用 1.argparse简介: argparse 模块是 Python 内置的一个用于命令项选项与参数 ...
关于debug一晚上的一些思考，做开发到底要养成什么习惯？
总结:日志一定要写,日志一定要写,日志一定要写! 今天晚上是我学开发过程中很不一样的一晚,今晚学到了很多. 虽然我也只是一个开发的初学小白,今天的debug分享是我的一个小方法和一个小记录,如果大佬们 ...
使用DoraCloud构建远程办公桌面云
公司总部在上海.员工分布在各地.部分员工需要远程办公.为了实现远程办公,有几种备选方案. 方案1.在员工的PC上安装向日葵.ToDesk之类的远程工具. 方案2.公司总部提供VPN,员工通过VPN拨号 ...
JS leetcode 翻转字符串里的单词题解分析
壹 ❀ 引今天来做一道难度中等,但实际难度并不是很高的题目,题目来源leetcode151. 翻转字符串里的单词,题目描述如下: 给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: & ...
JS leetcode 两数之和 II - 输入有序数组题解分析
壹 ❀ 引我在JS leetcode 两数之和解答思路分析一文中首次解决两数之和等于目标值的问题,那么今天遇到的是两数之和的升级版,题目为leetcode167. 两数之和 II - 输入有序数组 ...
NC19325 游戏
题目链接题目题目描述 BLUESKY007,fengxunling和dreagonm三个人发现了一个像素游戏,这款神奇的游戏每次会生成一个nxm的网格,其中每一个格子都被随机染色为R,G,B三种颜 ...
Python Print 显示颜色
1.顺序:显示方式,前景颜色,背景颜色 2.顺序非固定,但尽量按默认书写方式 3.也可以在input中输出使用 4.格式: print('\033[显示方式:前景颜色:背景颜色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编程创建这个节点