JavaScript DOM学习笔记6——HTML DOM

最新推荐文章于 2024-06-06 22:28:12 发布
最新推荐文章于 2024-06-06 22:28:12 发布
阅读量86 收藏
点赞数
分类专栏： JavaScript DOM 文章标签： JavaScript DOM HTMLDOM ViewUI

        DOM其实是一套操作XML文档的标准，不同语言都有实现。前面也提到，HTML有特有的DOM，HTML DOM主要是为了简化一些常用的操作。

        1.直接访问HTML元素的属性

        HTML元素具有各种各样的属性，如果按照DOM的方式来访问这些属性，则需要采用setAttribute()和getAttribute()方法。而HTML DOM简化了这个操作，可以直接通过.操作符直接访问这些属性。

        假设网页中有一个img元素，<img src="img.jpg" border="1">，我们已经获取了该元素的DOM对象oImg，如果需要操作其src或者border属性，我们之前讲过，需要写下列代码：

 

alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","newImg.jpg");
oImg.setAttribute("border","2");

        有了HTML DOM ，上面的代码可以写成：

 

alert(oImg.src);
alert(oImg.border);
oImg.src = "newImg.jpg";
oImg.border = "2";

        基本上所有HTML元素的特性对应的属性都是一样的，只有下面的例外：

 

<div class="myCls"></div>

        对于上面的div中的class特性，在使用HTML DOM操作的时候，就必须写成：

 

alert(oDiv.className);
oDiv.className = "newCls";

        2. HTML DOM处理表格的方法

        HTML的DOM给<table/><tbody/></tr>等元素添加了一些特性和方法，如下面几个表所示：

        (1)给table添加的部分：

caption指向<caption/>元素（如果存在）
tBodies<tbody/>元素的集合
tFoot<tfoot/>元素集合
tHead<thead/>元素集合
rows表格中所有行的集合
createTHead()创建<thead/>元素并且放入表格
createTFoot()创建<tfoot/>元素并且放入表格
createCaption()创建<caption/>元素并且放入表格
deleteTHead()删除<thead/>元素
deleteTFoot()删除<tfoot/>元素
deleteCaption()删除<caption/>元素
deleteRow(pos)删除指定位置的行
insertRow(pos)在指定位置插入行
 

         (2)<tbody/>元素添加了以下内容：

rows<tbody/>中所有行的集合
deleteRow(pos)删除指定位置的行
insertRow(pos)在指定位置插入行

         (3)<tr/>中添加的内容：

cells元素中所有单元格的集合
deleteCell(pos)删除制定位置单元格
insertCell(pos)指定位置插入单元格

 

        下面，使用HTML DOM写一个完整的添加表格的例子：

<html>
	<head>
		<title></title>
		<script type="text/javascript">
			function createTableUsingHtmlDOM() {
				//创建表格
				var oTbl = document.createElement("table");
				oTbl.setAttribute("border","1");
				oTbl.setAttribute("width","800");
				
				//插入一行
				oTbl.insertRow(0);
				//插入一列
				oTbl.rows[0].insertCell(0);
				//给列加入文本内容
				oTbl.rows[0].cells[0].appendChild(document.createTextNode("单元格11"));
				//插入一列
				oTbl.rows[0].insertCell(1);
				//给列加入文本内容
				oTbl.rows[0].cells[1].appendChild(document.createTextNode("单元格12"));

				//插入一行
				oTbl.insertRow(1);
				//插入一列
				oTbl.rows[1].insertCell(0);
				//给列加入文本内容
				oTbl.rows[1].cells[0].appendChild(document.createTextNode("单元格21"));
				//插入一列
				oTbl.rows[1].insertCell(1);
				//给列加入文本内容
				oTbl.rows[1].cells[1].appendChild(document.createTextNode("单元格22"));

				//别忘了把表格加到<body/>里面去
				document.body.appendChild(oTbl);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加表格" οnclick="createTableUsingHtmlDOM()">
	</body>
</html>

 

        至此，JavaScript DOM最基础的部分就学习完了。DOM还有很多很多其他的特性，在后续的学习中，如果接触到了，我会另外开一个小系列专门记录。

 

参考书目：

《JavaScript高级程序设计》

iteye_6931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础学习笔记01——变量、数据类型
visionchyw的博客
06-20 368
JavaScript基础学习笔记01——变量、数据类型
JavaScript学习笔记十四 —— 操作DOM对象
影龙武的博客qq_43594119
05-17 370
DOM：文档对象模型 ## 核心 浏览器网页就是一个DOM树形结构！ * 更新：更新DOM节点 * 遍历dom节点：得到DOM节点 * 删除：删除DOM节点 * 添加：添加一个新的节点 要操作一个dom节点，就必须要获得这个dom节点 ## 获得dom节点 ```javascript <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> //对应cs
JavaScript DOM 学习笔记
幸愉编程·信奥编程私教1v1
02-21 873
DOM学习笔记
JavaScript DOM学习笔记1——DOM节点层次
wawlian说
11-15 370
当讨论DOM树的时候，一般讨论的是节点的层次。DOM定义了Node的接口以及许多种节点类型来表现XML节点的多方面： Document 顶层节点，所有其他节点依附于该节点 DocumentType DTD引用。它不能包含子节点 DocumentFragment 可以像Document节点一样保存其他节点 Element
JavaScript学习笔记05【高级——DOM对象】
upward
02-08 512
JavaScript高级——DOM对象
JavaScript DOM学习笔记4——访问指定节点
wawlian说
11-15 534
DOM中访问指定节点主要需要用到以下几个函数： 1.getElementsByTagName(tag): (1)用来返回一个包含指定标签的节点列表NodeList。然后可以通过前面博客中提到的数组语法（方括号）或者item(pos)来取得该NodeList中具体的那个元素。看下面的代码片段： //获得img元素列表  var oImgs = document.getElementsByTag
JavaScript HTML DOM 学习笔记
weixin_51302779的博客
12-12 481
JavaScript HTMLDOM学习笔记，随手一记
JavaScript基础——DOM节点操作学习笔记
爱前端的程序媛的博客
03-10 638
目录 笔记 方法的使用 案例一、动态生成表格 案例二、下拉菜单，鼠标经过和离开实现 案例全部代码 笔记 ###节点概述 1.网页中的任何内容都是节点——文字、标签、元素、文档等。 节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)三个基本属性 节点的类型nodeType 元素节点：...
Java Web学习笔记15——DOM对象
CCH2024的专栏
06-06 314
Java Web学习笔记
javascript DOM编程艺术笔记——CH8 Enhancing content
Adrianna的专栏
09-16 701
本章内容：用DOM充实文档的内容，运用上一章学习的用DOM动态创建标记的办法，实现更多的功能函数。 缩略语列表（abbreviation list） 文献来源链接（cite links） 快捷键清单（access keys） 缩略语列表（abbreviation list）将文档中的abbr标记自动显示成列表，效果如下：步骤： 遍历文档获得abbr的信息 创建定义列表并填入信息 插入标签到文档 js
qt练习控件label控件-lineEdit控件样例代码
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
2020年首届“洪泽湖杯”中国人工智能掼蛋算法大赛第8名我就是掼蛋.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
最新发布
07-30
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听 效果截图https://www.diyiyuanma.cn/3444.html 多站合一音乐搜索解决方案，数据调用的是各网站的API接口， 有的接口并不是开放的，随时可能失效，本项目相关代码仅供参考。 网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具
07-30
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具。
三种esprit算法实现doa估计 _rezip.zip
07-30
在信号处理领域，DOA（Direction of Arrival）估计是一项关键技术，主要用于确定多个信号源到达接收阵列的方向。本文将详细探讨三种ESPRIT（Estimation of Signal Parameters via Rotational Invariance Techniques）算法在DOA估计中的实现，以及它们在MATLAB环境中的具体应用。 ESPRIT算法是由Paul Kailath等人于1986年提出的，其核心思想是利用阵列数据的旋转不变性来估计信号源的角度。这种算法相比传统的 MUSIC（Multiple Signal Classification）算法具有较低的计算复杂度，且无需进行特征值分解，因此在实际应用中颇具优势。 1. 普通ESPRIT算法 普通ESPRIT算法分为两个主要步骤：构造等效旋转不变系统和估计角度。通过空间平移（如延时）构建两个子阵列，使得它们之间的关系具有旋转不变性。然后，通过对子阵列数据进行最小二乘拟合，可以得到信号源的角频率估计，进一步转换为DOA估计。 2. 常规ESPRIT算法实现 在描述中提到的`common_esprit_method1.m`和`common_esprit_method2.m`是两种不同的普通ESPRIT算法实现。它们可能在实现细节上略有差异，比如选择子阵列的方式、参数估计的策略等。MATLAB代码通常会包含预处理步骤（如数据归一化）、子阵列构造、旋转不变性矩阵的建立、最小二乘估计等部分。通过运行这两个文件，可以比较它们在估计精度和计算效率上的异同。 3. TLS_ESPRIT算法 TLS（Total Least Squares）ESPRIT是对普通ESPRIT的优化，它考虑了数据噪声的影响，提高了估计的稳健性。在TLS_ESPRIT算法中，不假设数据噪声是高斯白噪声，而是采用总最小二乘准则来拟合数据。这使得算法在噪声环境下表现更优。`TLS_esprit.m`文件应该包含了TLS_ESPRIT算法的完整实现，包括TLS估计的步骤和旋转不变性矩阵的改进处理。 在实际应用中，选择合适的ESPRIT变体取决于系统条件，例如噪声水平、信号质量以及计算资源。通过MATLAB实现，研究者和工程师可以方便地比较不同算法的效果，并根据需要进行调整和优化。同时，这些代码也为教学和学习DOA估计提供了一个直观的平台，有助于深入理解ESPRIT算法的工作原理。
细胞分割计数matlab程序 附GUI 1.zip
07-30
细胞分割计数matlab程序 附GUI 1
【SCI顶级】多元宇宙算法MVO-CNN-LSTM-Multihead-Attention温度预测【含源码 5726期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值