分享DOM的一个实例代码

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

<!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('btnComment');

<!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('div');
        for (var i = 0; i < divArr.length; i++) {
            divArr[i].style.borderStyle = 'solid';
            divArr[i].style.borderColor = 'red';
        }
    </script>

    <table border="1" width="200;" height="80">
        <tr name='tr1'>
            <td onclick="onclick()" width="100;" height="40">折扣价</td>
            <td onclick="onclick()" width="100;" height="40">出发日期</td>
        </tr>
        <tr name='tr2'>
            <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('td');
        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 == 'red')
                {
                    parent.style.backgroundColor = '#FFFFFF';
                }
                else {
                    parent.style.backgroundColor = 'red';
                }
            }
        }
    </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('div+');
            var src = window.event.srcElement;
            var txt = document.createElement('input');
            txt.type = 'text';
            txt.style.width = '30';
            txt.style.borderColor = 'red';
            //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('btnadd');
        var table = document.getElementById('table');
        btnadd.onclick = function () {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var txtName = document.getElementById('txtName');
            
            var txt = document.createElement('input');
            txt.setAttribute('value', txtName.value);
            
            var btn = document.createElement('input');
            btn.setAttribute('type', 'button');
            btn.setAttribute('value', 'Delete');

            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('lbl'); var txtName = document.getElementById('txtName'); 
var txtComment = document.getElementById('txtComment'); 
var comment = txtName.value + ":" + txtComment.value;
 var divComment = document.createElement('div'); 
 divComment.innerHTML = comment; document.body.insertBefore(divComment, lbl);
  } </script> </body> </html>

以上就是分享DOM的一个实例代码的详细内容，更多请关注php中文网其它相关文章！

案例 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

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