首页 >web前端 >js教程 >分享DOM的一个实例代码

分享DOM的一个实例代码

零下一度原创: 2017-06-29 09:19:341169浏览

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

以上是分享DOM的一个实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

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

查看更多