JavaScript APIs-第二天（B站黑马程序员）

一、排他思想

首先先排除其他人，然后设置自己的样式。这种排除其他人的思想我们成为排他思想。

// 获取所有按钮元素
var btns = document.getElementsByTagName('button');

// btns得到的是伪数组,里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {

        // (1) 我们先把所有的按钮背景颜色去掉
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = '';
        }

        // (2) 然后才让当前的元素背景颜色为pink
        this.style.backgroundColor = 'pink';
    }
}

二、百度换肤应用

// 1. 获取元素 
var imgs = document.querySelector('.baidu').querySelectorAll('img');
var bd = document.body;

// 2. 循环注册事件 
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function () {
        // this.src 点击图片的路径
        // 把这个路径 this.src 给 body 
        // 注意格式 url(' + this.src + ')
        bd.style.backgroundImage = 'url(' + this.src + ')';
    }
}

三、表格隔行变色应用

// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');

// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {

    // 3. 鼠标经过事件 onmouseover
    trs[i].onmouseover = function () {
        this.className = 'bg';
    }

    // 4. 鼠标离开事件 onmouseout
    trs[i].onmouseout = function () {
        this.className = '';
    }
}

四、表格全选应用

全选和取消全选做法：让下面所有复选框的checked属性（选中状态），跟随全选按钮即可

下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的,上面全选就不选中。

// 获取元素
var j_cbAll = document.querySelector('#j_cbAll');
var j_tbs = document.querySelector('#j_tb').querySelectorAll('input');

// 注册事件
// 1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态），跟随全选按钮即可
j_cbAll.onclick = function () {
    // this.checked:它可以得到当前复选框的选中状态如果是true,就是选中;如果是false,就是未选中
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].checked = this.checked;
    }
}

// 2. 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的,上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
    j_tbs[i].onclick = function () {

        // flag:控制全选按钮是否选中
        var flag = true;

        // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
        for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
                flag = false;
                break; // 退出for循环:这样可以提高执行效率,因为只要有一个没有选中，剩下的就无需循环判断了
            }
        }
        j_cbAll.checked = flag;
    }
}

五、自定义属性

1、获取自定义属性

a. getAttribute('自定义属性名')

console.log(div.getTime); // unfined，此方法只能获得内置属性
console.log(div.getAttribute('getTime'));
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));

b. dataset.自定义属性名 / dataset['自定义属性名']

h5新增的获取自定义属性的方法，它只能获取data-开头的

// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);

如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

<div getTime="20" data-index="2" data-list-name="andy"></div>

console.log(div.dataset.listName);
console.log(div.dataset['listName']);

2、设置自定义属性 .setAttribute('属性', '值')

主要针对于自定义属性，也可以设置内置属性。

div.setAttribute('class', 'nav'); // 设置内置属性class 特殊:这里面写的就是class,不是className
div.setAttribute('index', 2);  

3、移除自定义属性 .removeAttribute('属性')  

div.removeAttribute('index');

六、节点操作

1、父节点 .parentNode

得到的是离元素最近的父级节点(亲爸爸)，如果找不到父节点就返回为null。

console.log(erweima.parentNode);

2、子节点

a. .childNodes

childNodes：所有的子节点,包含元素节点、文本节点等。

// 1. 子节点childNodes:所有的子节点,包含元素节点、文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); // 3
console.log(ul.childNodes[1].nodeType); // 1

b. .children

children：获取所有的子元素节点，也是我们实际开发常用的。

// 2. children:获取所有的子元素节点,也是我们实际开发常用的
console.log(ul.children);

c. .firstChild / .lastChild

// 1. firstChild 第一个子节点，不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);

d.  .firstElementChild / lastElementChild

// 2. firstElementChild，返回第一个子元素节点，ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);

e. .children[n] 常用

// 3. 实际开发的写法，既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);

3、兄弟节点

a. .nextSibling / .previousSibling

// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);

b. .nextElementSibling / .previousElementSibling

// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);

4、创建节点 .creatElement('TagName')

// 1. 创建节点元素节点
var li = document.createElement('li');

5、添加节点

a. .appendChild(节点名)

// 2. 添加节点 node.appendChild(child):node父级,child子级,在后面追加元素，类似于数组中的push
ul.appendChild(li);

b. .insertBefore(节点名,指定元素）

// 3. 添加节点 node.insertBefore(child, 指定元素);
ul.insertBefore(li2, ul.children[0]);