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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JS实现购物车特效
Feb 02 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
javascript代码实现简易计算器
Jan 25 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身份证号码检查类实例
2015/06/18 PHP
php实现点击可刷新验证码
2015/11/07 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python操作cfg配置文件方式
2019/12/22 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
留学自荐信的技巧
2013/10/17 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
大学军训感想
2014/02/12 职场文书
公司口号大全
2014/06/11 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
欢迎新生标语
2014/10/06 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书