最新要闻
- 世界讯息:可孚医用N95口罩30只装 灭菌独立包装19.9元大促
- 男子因缺钙CT图像中没有肋骨:“像一个透明人”
- 全球新消息丨189元 OPPO Enco Air3无线耳机上架:HiFi 5 DSP、支持蓝牙5.3
- 腾讯XR业务转向:或将合作引进Quest 2头显
- 闲鱼上买显示器靠谱吗?注意这几点就可以
- 飞利浦推出两款44.5英寸带鱼屏:1500R大曲率、75Hz刷新率
- 行驶中小车后备箱塞人露双脚!司机称其喝醉了:遭网友谴责
- 世界播报:低头族注意了!9岁女孩长期低头颈椎老如50岁
- 领1030元大额券:骆驼户外徒步鞋179元起大促
- 世界观点:亚马逊要求员工一周到岗工作3天:公司一度像个鬼城
- 天天热资讯!埃塞俄比亚政府和“提人阵”武装达成停火协议
- 天天新消息丨义乌自己的全球支付工具!义支付发布:打通16个币种
- 这待遇简直了!美团外卖进军香港 正疯狂招骑手:月入3万+
- 消息!手机套餐费太贵 韩国三大运营商被批:是否串通涨价
- 与剧版强烈反差!《三体》动画豆瓣跌至3.9分:官方已停播
- 特斯拉最入门车型国内现身?别被骗了:“披着狼皮的羊”而已
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
第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 外部文件,而元素用于添加嵌入样式。
4.1.导入
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.
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,1 Cell 2,1 Cell 1,2 Cell 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 给、和 元素添加了一些属性和方法。