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

<body> 
    <!--按钮x2,此两个按钮都有onclick动作指向相应的函数--> 
    <input type="button" value="创建节点" /> 
    <input type="button" value="删除最后一个节点" /> 
       <!--一个没有<option>子节点的下拉菜单,由createnode()节点的同时,同时添加。--> 
    <select></select> 
       <!--输入框x1,注意设置好id,replacenode()要取这个文本框的值--> 
    <input type="text" /> 
       <!--按钮x1,同上面的按钮x2--> 
    <input type="button" value="替换节点内容" /> 
       <!--一个什么都没有的空图层,作为<p>的父节点,添加的<p>皆是此<div>节点的子节点--> 
    <div> 
    </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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfsfw.html