JavaScript针对网页节点的增删改查用法实例


Posted in Javascript onFebruary 02, 2015

本文实例讲述了JavaScript针对网页节点的增删改查用法。分享给大家供大家参考。具体分析如下:

一、基本概念

这部分也就是所谓的“HTML DOM”,所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式。

也就是所有网页都必须按照:<html><body></body></html>……的规则编写,也按照这样的规则加载。

所谓的“网页节点”,也叫“DOM节点”的通俗解释,例如html节点下的内容就是<html></html>之间所有内容,body节点下的内容就是<body></body>之间的所有内容。

HTML DOM是这样规定的:1、整个文档是一个文档节点;2、每个 HTML 标签(意指<body><table>等html标签,而不是单纯的<html>标签)是一个元素节点;3、包含在 HTML 元素中的文本是文本节点;4、每一个 HTML 属性是一个属性节点
譬如,可以把某个页面画成如下的DOM节点树:

JavaScript针对网页节点的增删改查用法实例

HTML DOM的官方定义如下:HTML DOM是HTML Document Object Model(文档对象模型)的缩写,HTML DOM则是专门适用与HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象,从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。

而使用JavaScript能轻松对于这些DOM节点进行网页节点的增删改查的控制。

二、基本目标

使用JavaScript对网页的节点进行增删改查的操作。在一个网页中有:

1、”增加节点“按钮,此按钮在增加节点的同时,增加与”替换按钮“相关联的下拉菜单中的节点选项。如果网页中存在着9个节点,则不让添加并弹窗警告。

2、”删除最后一个节点“按钮,此按钮在减少节点的同时,减少与”替换按钮“相关联的下拉菜单中的节点选项。

3、”替换节点内容“按钮,首先选择需要操作的节点,然后输入要替换的内容,就会替换相应的节点。

JavaScript针对网页节点的增删改查用法实例

4、如果网页中没有任何节点,则不让删除与替换,并弹窗警告。

JavaScript针对网页节点的增删改查用法实例

三、制作过程

不用配置任何环境,直接在网页中写入如下代码,具体代码如下,下面再一部分一部分进行说明:

<!DOCTYPE html PUBLIC "-//W3C//pD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/pD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

        <title>jsdivnode</title>  

<script type="text/javascript">  

var i = 0;  

  

function createnode() {  

    if (i < 9) {  

        i++;  

        var option = document.createElement("option");  

        option.value = i;  

        option.innerHTML = "Node" + i.toString();  

        document.getElementById("number").appendChild(option);  

  

        var p = document.createElement("p");  

        p.innerHTML = "Node" + i.toString();  

        document.getElementById("d").appendChild(p);  

    } else  

        alert("爷行行好了,太多节点,臣妾做不到啊~");  

}  

  

function removenode() {  

    if (i > 0) {  

        i--;  

        var s = document.getElementById("number");  

        s.removeChild(s.lastChild);  

        var d = document.getElementById("d");  

        d.removeChild(d.lastChild);  

    } else  

        alert("没有节点,删个毛线啊~");  

  

    /*var ps = d.getElementsByTagName("p");*/  

    /*document.getElementById("d").removeChild(ps[9]); */  

}  

  

function replacenode() {  

    if (i > 0) {  

        var d = document.getElementById("d");  

        var p = document.createElement("p");  

        p.innerHTML = document.getElementById("text").value;  

        var ps = d.getElementsByTagName("p")  

        d.replaceChild(p, ps[document.getElementById("number").value - 1]);  

    } else  

        alert("没有节点,替换个毛线啊~");  

}  

</script>  

    </head>  

  

    <body>  

        <input type="button" value="创建节点" onclick="createnode()" />  

        <input type="button" value="删除最后一个节点" onclick="removenode()" />  

        <select id="number"></select>  

        <input type="text" id="text" />  

        <input type="button" value="替换节点内容" onclick="replacenode()" />  

        <div id="d">  

        </div>  

    </body>  

</html>

1、<body>节点

<body>  

    <!--按钮x2,此两个按钮都有onclick动作指向相应的函数-->  

    <input type="button" value="创建节点" onclick="createnode()" />  

    <input type="button" value="删除最后一个节点" onclick="removenode()" />  

       <!--一个没有<option>子节点的下拉菜单,由createnode()节点的同时,同时添加。-->  

    <select id="number"></select>  

       <!--输入框x1,注意设置好id,replacenode()要取这个文本框的值-->  

    <input type="text" id="text" />  

       <!--按钮x1,同上面的按钮x2-->  

    <input type="button" value="替换节点内容" onclick="replacenode()" />  

       <!--一个什么都没有的空图层,作为<p>的父节点,添加的<p>皆是此<div>节点的子节点-->  

    <div id="d">  

    </div>  

</body>

2、<head>节点

<head>  

    <!--网页使用的编码、标题,这不重要,关键是下面的js脚本部分-->  

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

        <title>jsdivnode</title>  

<script type="text/javascript">  

/*记录了当前网页有多少个节点的全局变量*/  

var i = 0;  

/*下方有3个函数。当按钮被点击时候则被调用*/  

function createnode() {  

    /*如果网页中的节点少于9个,才工作,否则弹窗*/  

    if (i < 9) {  

        /*每多加一个节点,记录了当前网页有多少个节点的全局变量i+1*/  

        i++;  

        /*创建option节点,然后其指针名字也叫option*/  

        var option = document.createElement("option");  

        /*声明创建的option节点的value属性为当前i的值,也就是当i=1时,有<option value=1></option>这样的子节点了。*/  

        /*部分网页说用setAttribute()方法去设置属性,亲自实践发现并不好用*/  

        option.value = i;  

        /*设置option节点下面的文本,此语句过后,子节点变为<option value=1>Node1</option>*/  

        option.innerHTML = "Node" + i.toString();  

        /*<select>父节点的ID是number,此语句要求在在<select></select>父节点下增加<option value=1>Node1</option>*/  

        document.getElementById("number").appendChild(option);  

          

        /*道理与上面同,在<div>父节点下增加<p>子节点,且<p>子节点下的文本值为Node1*/  

        var p = document.createElement("p");  

        p.innerHTML = "Node" + i.toString();  

        document.getElementById("d").appendChild(p);  

    } else  

        alert("爷行行好了,太多节点,臣妾做不到啊~");  

}  

  

function removenode() {  

    /*如果网页中的节点多于0个,也就是存在节点,才工作,否则弹窗*/  

    if (i > 0) {  

        /*每减少一个节点,记录了当前网页有多少个节点的全局变量i-1*/  

        i--;  

        /*定义指向<select>父节点的指针s*/  

        var s = document.getElementById("number");  

        /*删除<select>父节点旗下的最后一个子节点,也就是<option>,如果你要删第一个则参数变为s.firstChild*/  

        s.removeChild(s.lastChild);  

          

        /*道理同上,删除<div>图层下的最后一个子节点*/  

        var d = document.getElementById("d");  

        d.removeChild(d.lastChild);  

        /*如果你要删除<div>下的第8个<p>请如下操作*/      

        /*ps是指向<p>子节点集的指针*/  

        /*var ps = d.getElementsByTagName("p");*/  

        /*document.getElementById("d").removeChild(ps[9]); */  

          

    } else  

        alert("没有节点,删个毛线啊~");  

}  

  

function replacenode() {  

    /*如果网页中的节点多于0个,也就是存在节点,才工作,否则弹窗*/  

    if (i > 0) {  

        /*定义指向<div>父节点的指针d*/  

        var d = document.getElementById("d");  

        /*创建一个<p></p>节点*/  

        var p = document.createElement("p");  

        /*拿到文本框所输入的东西,放到<p></p>节点里面*/  

        p.innerHTML = document.getElementById("text").value;  

        /*ps是指向<div>父节点下的<p>子节点集、子节点群的指针*/  

        var ps = d.getElementsByTagName("p")  

        /*让刚刚创建的节点替换<div>下的第n个<p>子节点,其中n是现在下拉列表所选择的值-1,之所以要-1,是因为子节点集、子节点群的计数是从0开始的,而我们人的计数是从1开始的。*/  

        d.replaceChild(p, ps[document.getElementById("number").value - 1]);  

    } else  

        alert("没有节点,替换个毛线啊~");  

}  

</script>  

</head>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
js实现下拉菜单效果
Mar 01 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
react antd实现动态增减表单
Jun 03 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 #Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 #Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 #Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 #Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 #Javascript
JavaScript分秒倒计时器实现方法
Feb 02 #Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 #Javascript
You might like
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
JS访问对象两种方式区别解析
2020/08/29 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
简单了解什么是神经网络
2017/12/23 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
使用django实现一个代码发布系统
2019/07/18 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
企业环保标语
2014/06/10 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL