重拾JS-18-DOM（part2）

---

案例：排他思想设置点击按钮

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>

案例：百度换肤效果

  <ul class="box">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
    <script>
        //获取所有按钮元素
        var imgs = document.querySelector('.box').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundColor = 'url(' + this.src + ')'
            }
        }
    </script>

案例：表格隔行变色

    <script>
        //获取所有按钮元素
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function() {
                this.className = 'bg';
            }
            trs[i].onmouseout = function() {
                this.className = '';
            }

        }
    </script>

案例：表单全选取消全选

    <script>
        //获取元素
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
        //注册事件
        j_cbAll.onclick = function() {
            for (var i = 0; i < j_tb.length; i++) {
                j_tb[i].checked = 'this.checked';
            }
        }
        for (var i = 0; i < j_tb.length; i++) {
            j_tb[i].onclick = function() {
                var flag = true;
                for (var i = 0; i < j_tb.length; i++) {
                    if (!j_tb[i].checked) {//相当于（j_tb[i]==false）
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>

自定义属性的操作

• 获取属性

1.element.属性  获取内置属性值（元素本身自带的属性）

2.element.getAttribute（‘属性’）：主要获取自定义属性  即程序员自定义的属性

   <div id="demo" index="11"></div>
    <script>
        var div = document.querySelector('div');
        //获取元素的属性值
        //1.element.属性
        console.log(div.id);
        //2.获取自定义属性：element.getAttribute('属性')
        console.log(div.getAttribute('index'));
    </script>

• 设置属性值

1.element.属性=‘值’  设置内置属性值

2.element.setAttribute('属性','值')

   <div id="demo" index="11" class="pig"></div>
    <script>
        var div = document.querySelector('div');
        //获取元素的属性值
        //1.element.属性
        console.log(div.id);
        //2.获取自定义属性：element.getAttribute('属性')
        console.log(div.getAttribute('index'));
        //设置属性的值
        //1.element.属性='值'
        div.id = 'test';
        div.className = 'navs';
        //2.dlement.setAttribute('属性','值');主要针对自定义属性
        div.setAttribute('index', 34);
        div.setAttribute('class', 'green');
    </script>

• 移除属性

element.removeAttribute('属性')；

案例：tab栏切换案例

   <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>

    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                //1.选项卡模块
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'current';
                //2.显示内容模块
                var index = this.getAttribute('index');
                items[index].style.display = 'block';

                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }

        }
    </script>

H5的自定义属性：

H5规定自定义属性data-开头作为属性名并且赋值

比如<div date-index='1'></div>

或者使用JS设置

element.setAttribute('data-index',2)

• 获取H5自定义属性

1.兼容性获取element.getAttribute('data-index');

2.H5新增dlement.dataset.index或者element.dataset['index']   ie11以上才支持

    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('getTime'));

        div.setAttribute('data-index', 25);
        console.log(div.getAttribute('data-index'));
        //H5新增
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        console.log(div.dataset.listName);
    </script>

节点操作

一般节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基本属性

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点包含文字，空格，换行）

1.父节点

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        var erweima = document.querySelector('.erweima');
        //得到离元素最近的父节点（就近原则）
        console.log(erweima.parentNode);
    </script>

2.子节点

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        //DOM提供的方法获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('li');
        //实际开发常用：children获取所有的元素节点
        console.log(ul.children);

        //获取第一个和最后一个节点的操作
        var ol = document.querySelector('ol');
        console.log(ol.firstChild); //输出第一个文本节点
        console.log(ol.firstElementChild); //输出第一个元素节点 ie9以上兼容
        console.log(ol.lastElementChild);
        //实际开发的写法
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

下拉菜单案例：

    <script>
        //获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        //循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none'
            }
        }
    </script>

3.兄弟节点

    <div>我是div</div>
    <span>我是span</span>

    <script>
        var div = document.querySelector('div');
        //1.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
        console.log(div.nextSibling); //输出#text
        console.log(div.previousSibling); //输出#text
        //2.nextElementSibling得到下一个兄弟元素节点 ie9以上才支持
        console.log(div.nextElementSibling);
        console.log(div.previousSibling);
        //3.自己封装一个函数
        function getNextElementSibling(element){
            var el=element;
            while(el=el.nextElementSibling){
                if(el.nodeType===1){
                    return el;
                }
            }
            return null;
        }
    </script>

4.创建和添加节点：

    <ul>
        <li>wooooo</li>
    </ul>
    <script>
        //创建元素节点
        var li = document.createElement('li');
        var ul = document.querySelector('ul');
        //2.添加节点：追加元素
        ul.appendChild(li);
        var li0 = document.createElement('li');
        //添加节点（child,指定元素）
        ul.insertBefore(li0, ul.children[0]);
    </script>

简单版发布留言案例：

    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('你还没输入内容');
                return false;
            } else {
                //1.创建元素
                var li = document.createElement('li');
                //2.给li赋值
                li.innerHTML = text.value;
                //3.添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0])
            }
        }
    </script>