DOM学习-02

1、排他思想

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                for (var j = 0; j < btn.length; j++) {
                    btn[j].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

2、各类案例

2.1表格各行变色

2.2表单全选

    <script>
        var ac = document.getElementById('checkAll');
        var c = document.getElementsByClassName('ck');
        ac.onclick = function () {
            for (var i = 0; i < c.length; i++) {
                c[i].checked = this.checked;
            }
        }
        for (var i = 0; i < c.length; i++) {
            c[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < c.length; i++) {
                    if (!c[i].checked) {
                        flag = false;
                        break;
                    }
                }
                ac.checked = flag;
            }
        }

    </script>