好家伙,我回来了,

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

  1. 8. Ceph 基础篇 - 运维常用操作

    文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247485300&idx=1&sn=aacff9f7 ...

  2. Django进阶Model篇004 - ORM常用操作

    一.增加 create和save方法 实例: 1.增加一条作者记录 >>> from hello.models import * >>> Author.object ...

  3. Jquery Dom节点常用操作

    select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...

  4. vue行内动态添加样式或者动态添加类名

    还是记录一下吧(๑•ᴗ•๑) <li :style="{backgroundImage:`url(${item.pic})`}" @click="chooseVip ...

  5. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  6. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)

    第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型 以对象的方式来表示对应的html,它有一系 ...

  7. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  8. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  9. 前端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 ...

  10. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. vue动画进入-完整的动画/有进入离开

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. KubeSphere2.1踩坑记

    至少两台机器.推荐4X16.(完全安装KubeSphere会吃掉10G+内存) k8s安装(略1.14.8)可参考我上一篇文章或者基于kubeadmin快速安装 KubeSphere2.1前置条件 1 ...

  3. vue脚手架创建与环境安装

    1.安装 Node.jsDownload | Node.js 在这里下载的是最新版,如果要安装以前的版本,页面往下拉找到 Previous Releases-Donloads-下载msi文件. ​​ ...

  4. AiTrust下预训练和小样本学习在中文医疗信息处理挑战榜CBLUE表现

    项目链接: https://aistudio.baidu.com/aistudio/projectdetail/4592515?contributionType=1 如果有图片缺失参考项目链接 0.项 ...

  5. ubuntu系统单网卡配置多网段IP

    环境 系统版本:Ubuntu 16.04.5 LTS 配置 ubuntu系统网卡文件是interfaces,修改网卡配置文件vim /etc/network/interfaces添加2个IP地址: a ...

  6. 4、Web前端学习规划:JavaScript - 学习规划系列文章

    JavaScript作为Web前端里的第3重要的语言,笔者认为该重点进行学习.因为JavaScript衍生出来的框架和类库有不少,而且很强大.所以JavaScript的学习要抓好重点,在基本的语法及应 ...

  7. Socket.D 协议的开发缘由

    为什么搞个新协议? 2021年时,想为 Solon 生态 提供一种 MVC 体验的 Socket 和 WebSocket 开发方式.这个想法,要求消息"能路由"."有元信 ...

  8. 双端队列(deque)--python

    Python中的双端队列(deque)是一种特殊的数据结构,它允许在队列的两端进行插入和删除操作12.双端队列可以看成栈和队列的结合3.在Python中,我们可以使用collections模块中的de ...

  9. SecureCRT使用sftp上传较大文件意外暂停

    今天在一台跳转机使用SecureCRT的sftp上传较大文件时,发现中途会时常停止传输,给出提示如下: 如果此时选择Accept Once,会继续传输,但是过一段时间后,还是会停止并给出相同提示,如果 ...

  10. [JVM]GC日志解读解析

    GC日志解读解析 示例代码 package jvm.test1; import java.util.Random; import java.util.concurrent.TimeUnit; impo ...