最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

第120篇: DOM编程(常用操作、动态脚本、样式及动态表格)

来源:博客园

好家伙,我回来了,


【资料图】

本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记

1.DOM编程

我们知道DOM是HTML文档的编程接口,

我们可以通过HTML代码实现DOM操作,

也同样能够通过JavaScript实现DOM操作。

2.JS操作DOM

我们来简单的举个例子:

随便开一个空白的html页面

                Document      

来试试使用js实现dom操作吧

效果如下:

此处我们直接在html元素中进行操作,在页面中添加了一行标题(

来试试使用js实现dom操作吧

接下来我们使用JS进行相同的DOM操作

                Document      <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>

我们实现了同样的效果

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 页面中可以通过两个元素加载。元素用于包含 CSS 外部文件,而

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操作也十分复杂

                                                                
Cell 1,1Cell 2,1
Cell 1,2Cell 2,2

以这个表格为例

// 创建表格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 给、和 元素添加了一些属性和方法。

元素添加了以下属性和方法: caption,指向元素的 HTMLCollection; tFoot,指向元素(如果存在); tHead,指向元素(如果存在); rows,包含表示所有行的 HTMLCollection; createTHead(),创建元素,放到表格中,返回引用; createTFoot(),创建元素,放到表格中,返回引用; createCaption(),创建元素; deleteTFoot(),删除元素; deleteCaption(),删除元素添加了以下属性和方法: rows,包含元素中所有行的 HTMLCollection; deleteRow(pos),删除给定位置的行; insertRow(pos),在行集合中给定位置插入一行,返回该行的引用。元素添加了以下属性和方法: cells,包含元素所有表元的 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,然后你不会操作,就很尴尬.所以还是得学

关键词: 外部文件 高级程序设计

元素的指针(如果存在); tBodies,包含元素,放到表格中,返回引用; deleteTHead(),删除元素; deleteRow(pos),删除给定位置的行; insertRow(pos),在行集合中给定位置插入一行。