Heim > Artikel > Web-Frontend > Teilen Sie einen Beispielcode von DOM

Teilen Sie einen Beispielcode von DOM

零下一度Original: 2017-06-29 09:19:341143Durchsuche

<!DOCTYPE html>
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <label for="txtName" id="lbl">昵称：</label>
    <input id="txtName" type="text"/><br />
    <textarea id="txtComment" rows="5" cols="20">
    </textarea>
    <input type="button" id="btnComment" value="评论"/>

    <script type="text/javascript">
        var btnComment = document.getElementById(&#39;btnComment&#39;);

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            margin:1px;
            padding:1px;
        }
    </style>
    
</head>
<body>
    <div id="div1">玉皇</div>
    <div id="div2">小水晶</div>
    <div id="div3">西门</div>
    <div id="div4">福娃</div>
    <div id="div5">火神</div>
    <script type="text/javascript">
        var divArr = document.getElementsByTagName(&#39;div&#39;);
        for (var i = 0; i < divArr.length; i++) {
            divArr[i].style.borderStyle = &#39;solid&#39;;
            divArr[i].style.borderColor = &#39;red&#39;;
        }
    </script>

    <table border="1" width="200;" height="80">
        <tr name=&#39;tr1&#39;>
            <td onclick="onclick()" width="100;" height="40">折扣价</td>
            <td onclick="onclick()" width="100;" height="40">出发日期</td>
        </tr>
        <tr name=&#39;tr2&#39;>
            <td onclick="onclick()" width="100;" height="40">$267</td>
            <td onclick="onclick()" width="100;" height="40">2015-06-05</td>
        </tr>
    </table>

    <script type="text/javascript">
        var tdArr = document.getElementsByTagName(&#39;td&#39;);
        for (var i = 0; i < tdArr.length; i++) {
            tdArr[i].onclick = function () {
                var src = window.event.srcElement;  //当前对象
                var parent = src.parentElement;
                var bgcolor = parent.style.backgroundColor;
                if(bgcolor == &#39;red&#39;)
                {
                    parent.style.backgroundColor = &#39;#FFFFFF&#39;;
                }
                else {
                    parent.style.backgroundColor = &#39;red&#39;;
                }
            }
        }
    </script>

    <div id="div+">
        <input type="button" id="btn" value="better" onclick="clickchange(this)"/>
    </div>
    <script type="text/javascript">
        var clickchange = function (o) {
            var myDiv = document.getElementById(&#39;div+&#39;);
            var src = window.event.srcElement;
            var txt = document.createElement(&#39;input&#39;);
            txt.type = &#39;text&#39;;
            txt.style.width = &#39;30&#39;;
            txt.style.borderColor = &#39;red&#39;;
            //myDiv.insertBefore(txt, src);
            myDiv.appendChild(txt);     //添加一个新元素
        }
    </script>



    <label for="txtName" id="lbl">Name：</label>
    <input id="txtName" type="text"/>
    <input type="button" id="btnadd" value="Add" onclick="addchange"/><br />
    <table id="table">
        <!--<tr>
            <td>小水晶</td>
            <td><input type="button" name="btnDel" value="Delete"/><br /></td>
        </tr>
        <tr>
            <td>妞妞</td>
            <td><input type="button" name="btnDel" value="Delete"/><br /></td>
        </tr>-->
    </table>

    <script type="text/javascript">
        var addchange = document.getElementById(&#39;btnadd&#39;);
        var table = document.getElementById(&#39;table&#39;);
        btnadd.onclick = function () {
            var tr = document.createElement(&#39;tr&#39;);
            var td = document.createElement(&#39;td&#39;);
            var txtName = document.getElementById(&#39;txtName&#39;);
            
            var txt = document.createElement(&#39;input&#39;);
            txt.setAttribute(&#39;value&#39;, txtName.value);
            
            var btn = document.createElement(&#39;input&#39;);
            btn.setAttribute(&#39;type&#39;, &#39;button&#39;);
            btn.setAttribute(&#39;value&#39;, &#39;Delete&#39;);

            btn.onclick = function () {
                var src = window.event.srcElement;
                var fa = src.parentNode;
                var grandfa = fa.parentNode;

                table.removeChild(grandfa);
            }
            td.appendChild(txt);
            td.appendChild(btn);
            tr.appendChild(td);
            table.appendChild(tr);
        }
    </script>

</body>
</html>

btnComment.onclick = function () 
{ var lbl = document.getElementById(&#39;lbl&#39;); var txtName = document.getElementById(&#39;txtName&#39;); 
var txtComment = document.getElementById(&#39;txtComment&#39;); 
var comment = txtName.value + ":" + txtComment.value;
 var divComment = document.createElement(&#39;div&#39;); 
 divComment.innerHTML = comment; document.body.insertBefore(divComment, lbl);
  } </script> </body> </html>

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode von DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode zur Implementierung von Pull-up-Funktionen zum Aktualisieren und Pull-down-Funktionen zum Abrufen von DatenNächster Artikel：Beispielcode zur Implementierung von Pull-up-Funktionen zum Aktualisieren und Pull-down-Funktionen zum Abrufen von Daten

In Verbindung stehende Artikel

Mehr sehen