JavaScript节点相关操作(2)创建和删除节点以及做一个联动菜单

删除节点

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

例如需要删除”冬”这个节点
则需要先找到#li节点,再通过#li节点找到它的父节点使用parentNode函数
找到父节点后,再调用父节点的removeNode(index)方法去除某一个子节点
具体代码操作如下:
通过标签名找到#li节点

var li = document.getElementsByTagName('li');

然后找到最后一个节点所在的位置

var lastli = li[li.length-1];

然后再通过#li节点找到其父节点,再通过父节点去除指定节点

lastli.parentNode.removeChild(lastli);

完整代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script type="text/javascript"> function del(){ var lis = document.getElementsByTagName('li'); var lastli = lis[lis.length-1]; lastli.parentNode.removeChild(lastli); } </script>
<html>
    <head>
        <body>
            <input type ="button"value ="删除最后一个li" onclick ="del()"/>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>

            </ul>
        </body>
    </head>
</html>

创建节点

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

例如在最后添加一个”冬”节点
步骤:先找到#li节点,再通过createElement(节点名);
同时还需要创建一个文本节点来保存”冬” 这个字符串
创建文本节点方法为createTextNode(String);
然后再将文本节点加入到新建的#li节点中
最后把#li节点加入到#ul节点中
创建#li节点

var li = document.createElement('li');

创建文本节点

var txt = document.createTextNode('冬');

将文本节点加到#li节点中

li.appendChild(txt);

最后将#li节点加入到#ul节点中

document.getElementsByTagName('ul')[0].appendChild(li);

完整代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script type="text/javascript"> function add(){ //alert('cehsi'); var li = document.createElement('li'); var txt = document.createTextNode('冬'); li.appendChild(txt); document.getElementsByTagName('ul')[0].appendChild(li); } </script>
<html>
<head>
</head>
<body>
    <h1>创建节点</h1>
    <input type ="button" value ="增加" onclick ="add();"/>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

通过innerHTML批量添加节点

<ul></ul>

在上面的节点中一键键入春夏秋三个节点
首先还是先获取到ul节点
然后调用节点.innerHTML(String)方法
获取节点:

var ul = getElementsByTagName('ul')[0];

一键添加节点

ul.innerHTML='<li></li><li></li><li></li>';

完整代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<html>
<head>
</head>
<body>
    <input type ="button" value ="添加春夏秋" onclick ="add();"/>
    <input type ="button" value ="添加冬" onclick ="add1();"/>
    <ul></ul>
</body>
<script type="text/javascript"> function add(){ // alert('ceshi'); var ul = document.getElementsByTagName('ul')[0]; ul.innerHTML='<li>春</li><li>夏</li><li>秋</li>'; } function add1(){ // alert('ceshi'); var ul = document.getElementsByTagName('ul')[0]; //alert(ul.innerHTML); ul.innerHTML +='<li>冬</li>'; } </script>
</html>

制作一个联动菜单

要求:
一个下拉选项框,选择了一个 省后,可再选择该省内的城市
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的第一个网站</title>
<script type="text/javascript"> var area = [ ['朝阳','海淀','门头沟'], ['淮南','淮北','合肥'] ]; function ld(){ var sel = document.getElementById('prov'); //alert(sel.value); var opt =''; if(sel.value =='-1'){ document.getElementById('city').innerHTML = opt; return; } for(var i=0,len=area[sel.value].length;i<len;i++){ opt = opt+'<option value="'+i+'">'+area[sel.value][i]+'</option>'; } // alert('ces '); // alert(opt); document.getElementById('city').innerHTML = opt; } </script>
<html>
<head>
</head>
<body>
    <select name ="" id ="prov" onchange="ld();">
        <option value="-1">请选择</option>
        <option value="0">北京</option>
        <option value="1">安徽</option>

    </select>
    <select name ="" id ="city">

    </select>
</body>
</html>

//2016年1月8号学习成果

你可能感兴趣的:(JavaScript)