黑马程序员------dom---动态的操作及练习

来源：互联网发布：网络墙编辑：程序博客网时间：2024/06/14 08:55

Windows Phone 7手机开发、.Net培训、期待与您交流！

dom的动态创建
document.createElement可以动态的创建标签
例如:
var input=document.createElemet("input");这样就动态

的创建了一个input标签，然后设置input的type，value等

属性，但是这个标签不知道放到什么地方，比如放到div这

个标签中，就先用document.getElement获得这个标签

divMain,然后就用divMain.appendChild(input)这样就动

态的创建了一个input标签

innerText innerHTML
练习一：可以动态的修改或得到标签的值
例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript">        function xiugai() {            var baiduid = document.getElementById('baidu');            baiduid.innerHTML = "<input type='button' value='百度'/>";        }    </script></head><body><a href="http://www.baidu.com" id="baidu">百度</a><input type="button" onclick="alert(document.getElementById('baidu').innerText)" /><input type="button" value="修改" onclick="document.getElementById('baidu').innerText='连接到百度'" /><input type="button" value="修改超链接百度为按钮百度" onclick="xiugai()" /> </body></html>

练习二：再举一个例子，动态的生成
百度 www.baidu.com
如鹏 www.rupeng.com
黑马 www.itcast.com
前面的是文字，后面的网址是超链接，
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript">        function tianjia() {            var arr = new Array();            arr["百度"] = "http://baidu.com";            arr["如鹏"] = "http://www.rupeng.com";            arr["创智播客"] = "http://www.itcast.com";            var tableid = document.getElementById("tableid");            for (var key in arr) {                var hang = document.createElement("tr");                                var td1 = document.createElement("td");                td1.innerText = key;                hang.appendChild(td1);                               var td2 = document.createElement("td");                td2.innerHTML = "<a herf='" + arr[key] + "'/>" + arr[key] + "</a>";                hang.appendChild(td2);                                tableid.appendChild(hang);            }                      }    </script></head><body><table id="tableid"></table><input type="button" value="添加数据" onclick="tianjia()" /></body></html>在段代码在ie8.ie7中时没什么问题但是在ie6中点击按钮没反应，这就是一浏览器兼容性的问题。其中在ie6中不兼容的一个函数就是appendChild，所以只要把var hang = document.createElement("tr");                                var td1 = document.createElement("td");改成：var hang=tableid.insertRow(-1);//增加一行var td1=hang.insertCell(-1);//增加一个单元格这样就可以了。

这是一个在面试中举出浏览器兼容性的很好的例子。
练习三：实现一个动态的的无刷新发帖
代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript">        function fatie() {            var name = document.getElementById("name");            var namevalue = name.value;            var neirong = document.getElementById("neirong");            var neirongvalue = neirong.value;            var tie = document.getElementById("tie");            var tr = document.createElement("tr");            var td1 = document.createElement("td");            td1.innerText = namevalue;            tr.appendChild(td1);            var td2 = document.createElement("td");            td2.innerText = neirongvalue;            tr.appendChild(td2);            tie.tBodies[0].appendChild(tr);                              }    </script></head><body><table id="tie"><tbody></tbody></table>昵称：<input type="text" id="name" />发帖内容:<textarea id="neirong"></textarea><br /><input type="button" id="fa" value="发帖" onclick="fatie()" /></body></html>

Windows Phone 7手机开发、.Net培训、期待与您交流！