欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

分享DOM的一个实例代码

程序员文章站 2022-04-12 13:06:13
...
<!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的一个实例代码的详细内容,更多请关注其它相关文章!

相关标签: 案例