Since JavaScript has become an integrated part of the Front End Development, you must learn how to read from and write to an HTML document.
Before we go the actual coding, let us have a brief discussion on DOM - Document Object Model, because that will help you to understand the topic better.
A brief note on DOM
Document Object Model is an interface that allows scripts and programs to dynamically access and update content(e.g. text, image etc.), structure and style of HTML, XHTML and XML documents. For this discussion, we will focus on HTML documents only. Document Object model is a W3C recommendation.
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>A simple HTML document</title> </head> <body> <h1>This is a simple HTML document</h1> <p>w3resource web development tutorial</p> </body> </html>
Now, DOM representation of the above code is following:
All those blue boxes are called as Nodes.
Write data to HTML document
Now, we will see how you may write some text in an HTML document. The following JavaScript code may be used to create a new paragraph in an HTML document and add some text within that.
var w3r_text = "This text will be added to HTML";
//creates a new paragraph element
var newParagraph = document.createElement("p");
//creates text along with output to be displayed
var newText = document.createTextNode(w3r_text);
//created text is appended to the paragraph element created
newParagraph.appendChild(newText);
// created paragraph and text along with output is appended to the document body
document.body.appendChild(newParagraph);
Read data from HTML document
Want to read data from HTML document? even easier. Let's see how you may do that. This is the JavaScript code we will use for this example.
var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);
So, in the first line, we are collecting the text within the paragraph, whose id is - shtxt.
'document' refers to the document where the script is being run,
'getElementById' selects the element whose id is 'shtxt' and innerHTML selects the actual text.
We store that value in the variable 'shdata' and then, by using alert command, the text is displayed.
Here is the HTML code where the JavaScript above is added:
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>A simple HTML document</title> </head> <body> <h1>This is a simple HTML document</h1> <p id="shtxt">w3resource web development tutorial</p> <p><a href="#" onclick="Showdata();">Show text</a></p> <script src="fetch_text.js"></script> </body> </html>
Notice that, when you click on the link, code within the Showdata() is called.
This is the most simplest form of accessing data from HTML document.
There are many of a DOM commands which may be used to access data from HTML document.
Refer DHTML manual
相关推荐
pimpinella_3cd_01_0716
FIB English learning
X86-jq安装包
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
大圣挪车小程序1.3.5 前端
Manus.im 产品及开发团队研究报告.pdf
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
sun_3ck_01a_0918
下载 1. 单击“立即下载”，以下载该文件。 2. 出现“文件下载”窗口后，单击“保存”，以将文件保存到硬盘。 安装 1. 浏览至文件下载目标位置并双击新下载的文件。 2. 仔细阅读对话窗口中显示的发布信息。 3. 下载并安装对话窗口中标识的任何必备项，然后再继续。 4. 单击“Install”（安装）按钮。 5. 按照其余提示执行更新。 安装 1. 将解压的文件复制到可访问Windows的介质。 2. 将系统重新引导至Windows操作系统。 3. 打开“服务器管理器”->“设备管理器”->“存储控制器”，然后单击“PERC控制器”。 5. 单击“更新驱动程序软件”，并按照提示更新驱动程序。 4. 重新引导系统以使更改生效。
支持所有操作系统一键安装。
matlab程序代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
swanson_01_1106
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
sun_3ck_01_0919
各城市方言距离数据-中山大学岭南学院产业与区域经济研究中心 方言距离是指两种或多种方言之间的相似程度或差异程度。参考中山大学岭南学院产业与区域经济研究中心的刘毓芸等（2015）文献。他们基于方言树图，并参考《汉语方言大词典》和《中国语言地图集》对方言的划分，将汉语方言从宽泛到具体分为以下几个层级：汉语→方言大区→方言区→方言片。为了量化县与县之间的方言差异，他们采用了一种赋值方法： 若它们分属不同方言大区，则距离为3。: 若两个县同属一个方言片，则它们之间的方言距离为0； 若两个县属于同一方言区但不同方言片，则距离为1； 若它们属于同一方言大区但不同方言区，则距离为2； 方言距离是一个反映方言之间相似程度或差异程度的重要指标，它在语音识别、方言研究等领域具有广泛的应用价值。 参考文献：[1]刘毓芸, 徐现祥, 肖泽凯. 2015. 劳动力跨方言流动的倒U型模式[J]. 经济研究, 50(10): 134-146+162. 指标 语系、语族、方言大区、方言区/语支、方言片/语种、Supergroup、Dialect、group、Sub-dialect、groupPref_1、Pref_2、DiaDist、PrefCode_1、PrefCode_2等等。
基于PCA算法的人脸识别MATLAB源码
AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！
lim_3ck_01a_0518