dom例子

 //凡是html标签中的属性和值是一样的,那么在js中用true或者false

1,阅读协议倒计时

<input type="button" name="name" value="请仔细阅读协议(5)" disabled="disabled" id="btn" />

<script type="text/javascript">
        window.onload = function () {
            var btnObj = document.getElementById('btn');
            var sec = 5;
            var setId = setInterval(function () {
                sec = sec - 1;
                if (sec <= 0) {

                    btnObj.value = '同意';
                    clearInterval(setId); //清除计时器
                    btnObj.disabled = false;
                } else {
                    btnObj.value = '请仔细阅读协议(' + sec + ')';
                }
            }, 1000);
        };

2,事件冒泡

window.event.cancelBubble = true; //阻止事件冒泡.

    <script type="text/javascript">

        //冒泡排序,--元素中有元素(元素的嵌套如果触发了里面元素的事件,那么外面元素的事件也会被触发)(事件是相同的事件)

        //阻止事件冒泡
        window.onload = function () {

            document.getElementById('dv').onclick = function () {

                alert(this.id);
                //alert(window.event.srcElement.id);//事件源的id
            };
            document.getElementById('p1').onclick = function () {

                alert(this.id);
            };
            document.getElementById('sp').onclick = function () {

                alert(this.id);
                window.event.cancelBubble = true; //阻止事件冒泡.
                //return false;//没有阻止事件冒泡
            };
        };

    </script>

3,dom动态创建元素

 <script type="text/javascript">

        window.onload = function () {

            //获取按钮添加点击事件
            document.getElementById('btn').onclick = function () {

                //创建一个层的对象
                var dvObj = document.createElement('div');

                dvObj.style.width = '300px';
                dvObj.style.height = '200px';
                dvObj.style.backgroundColor = 'yellow';

                //把层添加到body中
                document.body.appendChild(dvObj);

            };
        };
    </script>

4,将创建的元素添加到现有元素中

var i = 0;
document.getElementById('btnc').onclick = function () {
i++;
//创建一个input标签
var inputObj = document.createElement('input');
inputObj.type = 'button';
inputObj.value = '我骄傲' + i;
//document.getElementById('dv').appendChild(inputObj);
document.getElementById('dv').insertBefore(inputObj, document.getElementById('dv').firstChild);
};

5,简单无刷新评论

  <table border="1" id="tb">
        <tr>
            <td>猫猫
            </td>
            <td>
            我好困
            </td>
        </tr>
    </table>
   昵称: <input type="text" name="name" value="" id="txt" />
   <br />
    <textarea rows="10" clos="10" id="txtContent"></textarea>
    <br />
    <input type="button" name="name" value="提交" id="btn" />

 <script type="text/javascript">

        window.onload = function () {

            document.getElementById('btn').onclick = function () {

                //获取昵称
                var name = document.getElementById('txt').value;

                //获取内容
                var txtCt = document.getElementById('txtContent').value;
                //获取页面的表格
                var tbObj = document.getElementById('tb');
                //创建行
                var trObj = document.createElement('tr');
                //创建单元格
                var td1 = document.createElement('td');
                var td2 = document.createElement('td');
                td1.innerText = name;
                td2.innerText = txtCt;
                //把单元格添加到行中
                trObj.appendChild(td1);
                trObj.appendChild(td2);
                //行添加到表中
                tbObj.appendChild(trObj);

            };
        };

    </script>

6,创建表格方式

   <script type="text/javascript">
        window.onload = function () {

            document.getElementById('btn').onclick = function () {

                var tb = document.createElement('table');
                var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };

                for (var key in dic) {
                    //创建行,根据表创建行
                    var trObj = tb.insertRow(-1);
                    //创建单元格,根据行创建单元格

                    var td1 = trObj.insertCell(-1);
                    td1.innerText = key;
                    //创建单元格
                    var td2 = trObj.insertCell(-1);
                    td2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';

                }
                //表格添加到body中
                document.body.appendChild(tb);

            };
        };

    </script>

7,为元素添加样式

   <script type="text/javascript">
        window.onload = function () {

            document.getElementById('btn').onclick = function () {
                document.getElementById('dv').className = 'cls';

            };
        };

    </script>

8,文本框焦点事件(onfocus与onblur)

  //创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。
window.onload=function(){
 //获取所有的文本框
            var txts = document.getElementsByTagName('input');
            for (var i = 0; i < txts.length; i++) {
                txts[i].onblur = function () {
                    if (this.value.length == 0) {
                        this.style.backgroundColor = 'red';
                    }
                    else {
                        this.style.backgroundColor = '';//恢复默认颜色
                    }
                }; //注册失去焦点事件
            }
};

9,★☆评分控件

    <script type="text/javascript">

        window.onload = function () {

            var tds = document.getElementById('tb').getElementsByTagName('td');

            for (var i = 0; i < tds.length; i++) {
                tds[i].onmouseover = function () {//注册一个鼠标进入的事件
                    for (var j = 0; j < tds.length; j++) {
                        //this.innerText = '★';
                        tds[j].innerText = '★';
                        if (tds[j] == this) {
                            break;
                        }

                    }
                };
                tds[i].onmouseout = function () {

                    for (var i = 0; i < tds.length; i++) {
                        tds[i].innerText = '☆';
                    }
                };
            }
        };

    </script>

10,点击按钮,表格隔行变色

 <script type="text/javascript">
        //点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。
        window.onload = function () {

            document.getElementById('btn').onclick = function () {
                var trs = document.getElementById('tb').getElementsByTagName('tr');
                for (var i = 0; i < trs.length; i++) {
                    if (i % 2 != 0) {
                        trs[i].style.backgroundColor = 'yellow';
                    } else {
                        trs[i].style.backgroundColor = '';
                    }
                }
            };
        };

    </script>

11,鼠标放到超链接上,显示图片(层)

    <script  type="text/javascript">
        window.onload = function () {
            //获取超链接, //为超链接注册一个事件--鼠标进入事件
            document.getElementById('ak').onmouseover = function () {
                if (!document.getElementById('imxy')) {
                    //创建一个图片
                    var im = document.createElement('img');
                    im.id = 'imxy';
                    im.src = 'xy.JPG';
                    //图片要脱离文档流
                    im.style.position = 'absolute';
                    //超链接距离左边距离
                    var x = this.offsetLeft + 'px';
                    //超链接距离上面加上超链接高度距离
                    var y = this.offsetTop + this.offsetHeight + 'px';
                    //图片添加到body中
                    document.body.appendChild(im);
                }
            };
            //鼠标离开
            document.getElementById('ak').onmouseout = function () {
                if (document.getElementById('imxy')) {
                    document.body.removeChild(document.getElementById('imxy'));
                }
            };
        }
    </script>

12,让图片跟随图片

    <script type="text/javascript">

        window.onload = function () {

            document.onmousemove = function () {

                // alert('让你动');

                var imObj = document.getElementById('im');
                imObj.style.position = 'absolute';
                imObj.style.left = window.event.clientX + 'px';
                imObj.style.top = window.event.clientY + 'px';
                //给鼠标加样式
                document.body.style.cursor = 'url(dinosau2.ani)';

            };
        };

    </script>

13,正则表达式

 var msg = '中国移动:10086,中国联通:10010,中国电信:10000';
 var reg=/\d+/g;//全局
var result;
while ((result = reg.exec(msg)) != null) {
     alert(result);
}

14,js匹配邮箱

document.getElementById('txt').onblur = function () {

                var email = this.value; //获取邮箱
                var regObj = /^\w+@\w+\.+\w+$/;
              alert( regObj.test(email)?'是邮箱':'不是邮箱');
            };

15,电话号码指定位置换星号

<script type="text/javascript">

        var msg = '杨小舅:13888888888张三:13999999999小李子:13111111111';

        // /\d{3}\d{4}\d{4}/;
    var result= msg.replace(/(\d{3})(\d{4})(\d{4})/g,'$1****$3');
    alert(result);
    </script>

16,切除字符串两端空格

<script type="text/javascript">

        var msg = '    天气还可以    ';
        function trimString(txt) {
        //先切左边再切右边-（query中1.8.3文件中是前面的方式）---可以左边右边一起切
           return txt.replace(/^\s+/,'').replace(/\s+$/,'');
       }