Home > Web Front-end > JS Tutorial > body text

Share an example code of DOM

零下一度
Release: 2017-06-29 09:19:34
Original
1152 people have browsed it
<!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;);
Copy after login
<!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>
Copy after login

  

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>
Copy after login

  

The above is the detailed content of Share an example code of DOM. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template