好家伙，我回来了，

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

随机推荐

[转帖]/etc/profile 和 /etc/profile.d/ 的区别
https://my.oschina.net/calmsnow/blog/2989570 /etc/profile 是文件, /etc/profile.d/ 是目录,用在设置环境变量方面,/etc ...
.net fromwork连接rabbitmq发布消息
1.创建连接工厂类 var factory = new RabbitMQ.Client.ConnectionFactory() { HostName = "120.237.72.46&quo ...
Typora 1.6.7永久激活
介绍Typora介绍具体看上面的我就不多介绍了接下来我们开始教程需要的文件 Typora安装包破解补丁包安装包下载破解补丁下载接下来我们全部下载后获得一个安装包一个补丁安装包直接安装就 ...
# 再次推荐github 6.7k star开源IM项目OpenIM性能测试及消息可靠性测试报告
本报告主要分为两部分,性能测试和消息可靠性测试.前者主要关注吞吐,延时,同时在线用户等,即通常所说的性能指标.后者主要模拟真实环境(比如离线,在线,弱网)消息通道的可靠性. 先说结论,对于容量和性能: ...
Axure谷歌浏览器扩展程序下载及安装方法(免FQ)
在用Axure在chrome查看原型时,没有安装Axure谷歌浏览器插件时无法显示会有提示信息,如果未FQ按照提示是无法直接安装扩展程序的,这里提供插件下载地址并教大家如何安装插件. 平时在使用谷歌浏 ...
layui下拉框可手动输入
先看效果 layui版本:layui@2.8.17 HTML代码: <div class="layui-form-item"> <label class=&quo ...
elasticsearch源码debug
一.下载源代码直接用idea下载代码https://github.com/elastic/elasticsearch.git 切换到特定版本的分支:比如7.17,之后idea会自己加上Run/Deb ...
uni-app+vue3会遇到哪些问题
已经用 uni-app+vue3+ts 开发了一段时间,记录一下日常遇见的问题和解决办法 uni-app 中的单端代码 uni-app 是支持多端,如果你想让你的代码,只在部分平台使用,那么就需要用的 ...
使用XAG配置GoldenGate在RAC集群环境中的高可用
背景:本文是根据实际客户测试需求整理,因为客户OGG所在环境只有GI集群,数据库部署在其他位置,所以会有一些差异,但核心思路一致,已完全测试通过,整理出来供大家参考. 1.前期准备 2.创建ACFS文 ...
一份55页Java性能调优PPT分享
提起"肖桦"这个人,相信很多小伙伴对他比较陌生.除去现任唯品会资深技术专家头衔外,他更为技术圈所熟知的是他的著名开源项目:SpringSide. SpringSide是以sprin ...

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