JavaScriptノード関連操作(2)ノードの作成と削除、連動メニューを作成する.

17668 ワード

JavaScript

ノードを削除

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

例えば、「冬」というノードを削除する必要がある場合、最初にワタリノードを発見し、その後、ワタリノードを通じてその親ノードを発見し、parent Node関数を使用して親ノードを見つけた後、親ノードのremoveNode(index)方法を呼び出して、あるサブノードの具体的なコードを除去する操作は以下の通りである.

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

最後のノードの位置を見つけます.

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

その後、xi 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>

例えば、最後に「冬」のノードステップを追加します.まず、ワタリノードを見つけて、それからcreateelement(ノード名)を通します.また、テキストノードを作成して「冬」という文字列を保存する必要があります.テキストノードを作成する方法は、createText Node(String)です.その後、テキストノードを新たに作成されたヒドリノードに追加し、最後に、ヒドイリノードをヒドイイイulノードに追加して、リノードを作成する.

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

テキストノードを作成

var txt = document.createTextNode(' ');

テキストノードをサイロリノードに加える

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>

上のノードにおいて春夏秋季の3つのノードを一キーで入力するか、それとも先に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日学習成果

mxGraphh 1.7ファイルを解読します.