<!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中文网其它相关文章!
已抢17608个
抢已抢50434个
抢已抢121648个
抢已抢184867个
抢已抢66643个
抢已抢351382个
抢