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
相关推荐
2005-04-04 00:00 83,754 w3core.mfl 2005-04-04 00:00 74,002 w3core.mof 2007-02-17 06:44 39,424 w3dt.dll 2007-02-17 06:50 4,862 w3dt.mfl 2007-02-17 06:44 6,238 w3dt.mof 2007-02-17 06:44 62,464 w3isapi....
w3af REST API w3af的REST API的Docker映像(nginx)受监管。 好处 大多数用户只能从使用./w3af_api ,但高级用户可能需要具有可以处理更多流量的环境,在服务关闭时自动重新启动服务等。 运行此图像 sudo docker ...
w3school.CHM_2009-12-24 23:46 平安夜更新 about ado ado ajax asp aspnet browsers careers css dhtml dotnetmobile dtd e4x example hosting html html5 htmldom i js media msnet php quality quiz rdf rss ...
2005-4-4 0:00 w3core.mfl 82 KB MFL 文件 2005-4-4 0:00 w3core.mof 73 KB MOF 文件 2005-4-4 0:00 w3dt.dll 39 KB 应用程序扩展 2007-2-17 23:36 w3dt.mfl 5 KB MFL 文件 2005-4-4 0:00 w3dt.mof 7...
前端开发手册大全11个(CSS-javascript-jquery-w3c-XHTML-XML).zip CSS参考手册-Web前端开发参考手册系列 Web前端开发规范手册必备 CSS参考手册 javascript参考手册 CSS参考手册 jquery参考手册 XML参考手册 XHTML...
w3af 网页用户界面介绍该项目为 w3af ( ) 提供 Web 界面,主要构建在: Django ( )。 芹菜 ( ) 对于主存储库可以发现。安装安装所需的依赖项: w3af-控制台MySQL apt-get 安装 python-mysqldb mysql-server-5.1 lxml...
w3school-How-to HTML-CSS 中的完整皮肤
w3af 的飞蛾 一组易受攻击的 PHP 脚本,用于测试 w3af 的漏洞检测功能。 的主要存储库可以在找到。 用法 要使用最简单的方法w3af-moth是开始一个的容器: sudo docker run -p 80:80 -p 2222:22 andresriancho/w3af...
w3c-dom.jar 包 dom解析xml使用 包 免积分下载
使用包: Emacs-w3m Helm-w3m 安装W3MW3M OS X 使用自制软件安装W3M $brew install w3mUbuntu / Debian的$sudo apt install w3m层$git clone https://github.com/venmos/w3m-layer.git ~ /.emacs.d/private/w3m 要...
苹果丽黑(W3)-Hiragino Sans GB W3
W3C specifications that are widely supported across all devices and browsers. It is intended for programmers who are facing the challenges of moving more code to the frontend with JavaScript, CSS, and...
W3schoolWeb技术参考手册-JavaScript.chm,内容非常详细!
HTML -> https://www.w3schools.com/html/ 3. CSS -> https://www.w3schools.com/css/ 后端-> 1. Java -> https://www.w3schools.com/java/java_intro.asp 2. Servlets -> ...
emacs-w3m:emacs-w3m,一个简单的w3m的Emacs界面
functions, and modern browsers, and teaches more effective coding practices using HTML5. This new edition has been extensively updated to reflect the way JavaScript is most commonly used today, ...
SkyTrust JavaScript 元素 SkyTrust 的 JavaScript 元素 入门 确保您安装了最新的软件包 npm install bower install 注意:如果你没有安装npm ,请确保你已经安装了 。 如果你没有凉亭, npm install -g bower 。 ...
IONIC-W3Schools-Offline-APP 注意:克隆此存储库后。 1.转到项目文件夹,然后浏览www / templates / 2.在文件夹模板内,您将看到zip文件。 3.您要做的是解压缩templates文件夹内的所有文件夹并删除zip文件。 这仅供...
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0025)http://js.wanxu.com/myjs/ --> <HTML><HEAD><TITLE>网页特效集锦(js.wanxu.com ) <META http-equiv=Content-Type ...
w3resource Javascript编程练习,练习 来自Javascript练习 To run a exercice: * select a category * select a exerice 分类目录 基本的 基础(ES6)第一部分 基础(ES6)第二部分 功能 递归 条件语句和循环 数学...