Rumah >hujung hadapan web >tutorial js >分享DOM的一个实例代码

分享DOM的一个实例代码

零下一度asal: 2017-06-29 09:19:341159semak imbas

<!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>

Atas ialah kandungan terperinci 分享DOM的一个实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：实现上拉刷新，下拉获取数据功能实例代码Artikel seterusnya：js变量提升和函数声明预解析实例详解

Artikel berkaitan

Lihat lagi