DOM笔记

元素的属性操作：

nodeType  返回一个数字(元素：1，属性：2)

找到某个元素下个所有元素子节点: [2]->childNodes; [2]->children(不是标准的属性，但是所有浏览器都支持。)

查找某个元素的父节点：parentNode

找到某个元素的下个兄弟节点：nextElementSibling            

找到某个元素的上个兄弟节点：previousElementSibling

 

元素的定位距离计算：

offsetLeft:左外边框到有定位父级的左内边框的距离。

offsetTop:上外边框到有定位父级的上内边框的距离。

offsetParent:最近的有定位属性的祖先节点，如果祖先节点都没有定位，那么默认为body

[说明：offsetXXX是不带单位的]

getBoundingClientRect(返回值为一个对象)：获取某个元素的信息（高版本：left,top,bottom,rigit,width,height）

 

元素的属性操作：

获取元素行间的属性 ：elem.getAttribute('key') 

设置元素的行间属性 ：elem.setAttribute('key','value')

删除元素的行间属性 ：elem.removeAttribute('key')

 

元素尺寸的计算：

获取某个元素的宽高：elem.clientWidth/ elem.clientHeight (不计算边框 加上padding)

获取某个元素的宽高：elem.offsetWidth/ elem.offsetHeight (计算边框 加上padding)

可视区的宽高：document.documentElement.clientWidth/document.documentElement.clientHeight

 

offsetWidth实际获取的是盒模型(width+border + padding)

offsetLeft = left + marginLeft

 offsetTop = top +marginTop

 

<style>

    #div1{width:200px; height: 200px; background: #eee; border:10px solid #ccc; padding:5px; margin:10px; position: absolute;}

    </style>

    <div id="div1"></div>

    <script>

    // 获取某个元素的宽高：elem.clientWidth/ elem.clientHeight (不计算边框 加上padding)

    // 获取某个元素的宽高：elem.offsetWidth/ elem.offsetHeight (计算边框 加上padding)

    // 可视区的宽高：document.documentElement.clientWidth/document.documentElement.clientHeight

 

    var oDiv = document.getElementById('div1');

 

    console.log('div的宽：' + oDiv.clientWidth + ',div的高：' + oDiv.clientHeight);    //210 = width(height) + padding

    console.log('div的宽：' + oDiv.offsetWidth + ',div的高：' + oDiv.offsetHeight);    //230 = width(height) + padding + border

 

    // 获取可视区宽高

    var clientW = document.documentElement.clientWidth;

    var clientH = document.documentElement.clientHeight;

 

    // 获取元素自身的宽高

    var iW = oDiv.offsetWidth;

    var iH = oDiv.offsetHeight;

 

    // 让div水平垂直居中

    oDiv.style.left = (clientW - iW)/2 + 'px';

    oDiv.style.top = (clientH - iH)/2 + "px";

 

    console.log('div的offsetWidth的值是：' + iW + 'px' + 'div的offsetHeight的值是：' + iH + 'px' );

    console.log('可视区的宽是：' + clientW + 'px' + '，可视区的高是：' +  clientH + 'px' );

    </script>

 

元素的操作：

创建元素：document.createElement('标签的名字');

插入元素：（向父级末尾添加一个元素） parentNode.appendChild(childNode)

插入元素：（向父级中的某个元素前插入元素）  parentNode.insertBefore(新添加的元素,已有的元素)

特性： 如果第二个参数为假的，那么会将某个元素添加到父元素的末位。

 

删除节点: 父级.removeChild(指定的子节点)

注意： 如果指定的子节点没有，那么会报错。（进行判断解决）

 

替换节点：父级.replaceChild(要替换成什么,谁被替换)

 

克隆某个元素 ：元素.cloneNode()

注意： 在克隆的时候，默认（false）只克隆指定元素本身，不会克隆该元素下的所有子节点。（cloneNode(有参数，默认为false)），

如果里面传入true，那么就可以克隆该元素下的所有子节点。 事件是不会被克隆的。

注意： appendChild/insertBefore/replaceChild在操作一个已有的元素时，    是将已有的元素移动，而不是复制一份进行操作。

 

添加子节点实例DEMO:

 

<input type="button" name="" id="btn" value="点击添加" />

<ul id="ul">

 

</ul>

 

<script>

window.onload = function(){

 

        var oBtn = document.getElementById('btn');

        var oUl = document.getElementById('ul');

        var iNow = 0;

        var aLi = oUl.getElementsByTagName('li');

 

        oBtn.onclick = function(){

            var oLi = document.createElement('li');

            oLi.innerHTML = iNow ++ ;

 

            // 方法一

            if(!aLi.length){

                oUl.appendChild(oLi);

            }else{

                oUl.insertBefore(oLi , aLi[0]);

            }

 

            // 方法二

            // oUl.insertBefore(oLi , aLi[0]);

            // oUl.insertBefore(oLi , null);    //第二个参数为假，相当于appendChild

            console.log(iNow);

        }

    }

</script>

 

JS获取表格元素：

table.tHead -->  获取tHead

table.rows --> 获取tr 获取的是行数（一组）

table.tFoot---获取表格底部

table.tBodies---获取表格主体 

注意：  获取到的是一个集合

rows[n].cells

单元格  就是td