分享DOM的一个实例代码-js教程-PHP中文网

分享DOM的一个实例代码

零下一度

发布： 2017-06-29 09:19:34

原创

1312人浏览过

<!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中文网其它相关文章！