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 学习之旅 (2)
Feb 05 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
Python字符串的修改方法实例
2019/12/19 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python使用Matlab命令过程解析
2020/06/04 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
警示教育活动总结
2014/05/05 职场文书
美化环境标语
2014/06/20 职场文书
个人授权委托书样本
2014/09/13 职场文书
自我检讨报告
2015/01/28 职场文书
500字作文之周记
2019/12/13 职场文书