web前端 js学习 第十二天 （元素操作 ，全反选择 ，选择卡......）

元素

    回流   display:none   visibility:hidden
    重绘   backgorund-color  

元素的宽高

<div class="box">
    <div class="a"></div>
</div>
<script>
    var oDiv = document.getElementsByClassName('a')[0];
    console.log(oDiv)

    console.log(getStyle(oDiv,'width'))
    // clientWidth = width+padding
    console.log(oDiv.clientWidth)
    // offsetWidth = width + padding + border 
    console.log(oDiv.offsetWidth)
    // 距离最近的具有定位的祖先元素的距离
    console.log(oDiv.offsetLeft);
 </script>

**// 封装获取样式的兼容写法**
    
    function getStyle(ele , property) {
        if(window.getComputedStyle) {
            return getComputedStyle(ele)[property]
        }
        return ele.currentStyle[property]
    }

DOM

DOM查询   --- 获取元素
    document.getElementById()
    document.getElementsByClassName()   集合
    document.getElementsByTagName()   集合
    document.getElementsByName()   集合   -- 使用少-- 有兼容问题

    id 效率更高  
    通过父元素找到子元素   

    ES6 查询
        document.querySelector(选择器)   第一次出现的元素
        document.querySelectorAll(选择器)   集合
        
DOM新增
        innerHTML
        新增
            创建标签节点   createElement()
            创建文本节点   createTextNode()
            把文本节点添加到标签中去   appendChild()
            把标签再添加到DOM树中去
        插入
            appendChild  push
            insertBefore(new,old)  指定位置插入
  	    文档碎片  createDocumentFragment()
    
 DOM删除 
        innerHTML = ''  删除所有的子元素
        remove()  删除包括自己
        removeChild()  删除儿子，不能删除孙子
DOM修改
 <div id="a">
    <p></p>
</div>
<script>
    var oP = document.querySelector('p');
    var oH3 = document.createElement('h3');
    oH3.innerText = '我是修改的';
    a.replaceChild(oH3,oP)
</script>

节点

cloneNode  复制现有节点
        参数  默认 false   不复制子节点
        true  复制子节点 和所有的后代元素
查询兄弟节点
	 nextSibling  下一个节点
    nextElementSibling  下一个元素节点

    previousSibling  前一个节点
    previousElementSibling 前一个元素节点
其他节点
	parentNode  父元素
    children  子元素
    childNodes  子节点

    firstChild  第一个子节点    childNodes[0]
    lastChild    最后一个子节点  
    firstElementChild  第一个子元素   children[0]
    lastElementChild  第一个子元素 

***DOM节点总结***

 DOM 查询
        Es5
            document.getElementById()
            document.getElementsByName()
            document.getElementsByClassName()
            document.getElementsByTagName()
        Es6 
            document.querySelector()
            document.querySelectorAll()

        父元素
            parentNode 

        子元素
            childNodes
            children 

            firstChild
            lastChild

            firstElementChild
            lastElementChild

        兄弟
            nextSibling
            previousSibling 

            nextElementSibling
            previusElementSibling 
    
    创建
        createElement()
        createTextNode()

    插入
        appendChild()
        insertBefore(new,old)

    替换
        repalceChild()

    删除 
        remove()
        removeChild()

    克隆
        cloneNode(true/false)  

    文档碎片
        createDocumentFragment()

this指向  !!!!!!!!!

节点类型
        nodeType 
            元素节点  1   ***
            属性节点  2
            文本节点  3   ***
            注释节点  8   ***
            文本根节点  9
            文档碎片  11

        nodeName 
            标签  大写
            文本  #text
            注释  #comment

        nodeValue
        标签   null
        文本   文本的内容
        注释   写的注释的内容

全选和反选

 <input type="checkbox" id="checkAll"> <br>
<input type="checkbox" class="checkOne">
<input type="checkbox" class="checkOne">
<input type="checkbox" class="checkOne">

<script>
    var oCheckAll = document.getElementById('checkAll');
    var oCheckOnes = document.getElementsByClassName('checkOne');
    // 全选
    oCheckAll.onclick = function() {
        for(var i = 0 ; i < oCheckOnes.length ; i++) {
            oCheckOnes[i].checked = oCheckAll.checked
        }
    }

    // 反选
    // 每一次点击单选的时候都要全部判断一遍
    for(var i = 0 ; i < oCheckOnes.length ; i++) {
        // 循环为了绑定点击事件
        oCheckOnes[i].onclick = function(){
            // 循环是为了判断每次点击时，单选的选中状态
            for(var j = 0 ; j < oCheckOnes.length ; j++) {
                // 只要有一个没有选中，全选就不勾选
                if(!oCheckOnes[j].checked) {
                    oCheckAll.checked = false;
                    // 提前结束循环
                    break ;
                }
            }
            // 如果循环正常结束，表示全部选中
            oCheckAll.checked = j == oCheckOnes.length ;
        }
    }
</script>