javascript 文档模型api总结

 2         //  javascript 文档对象模型 document object model

        // 一： Document 对象
        // 1. 返回当前获取焦点的元素
             document.activeElement 
       
        // 2. 给文档添加事件监听，eventType：事件类型，callback:事件回调，boolean：true=>事件在捕获执行，false=>事件在冒泡执行
            document.addEventListener("eventType","callback","boolean")  
        
        // 3. 返回当前文档的绝对基础url
            document.baseURI
        
        // 4. 返回文档body元素
            document.body
        
        // 5.创建节点元素，节点类型为1;如div,span
            document.createElement("标签")
       
        // 6.创建虚拟节点元素(文档碎片节点),节点类型为11,,没有具体的标签，不属于dom树
            document.createDocumentFragment()

        // 7.创建属性节点：如class, style,,要使用setAttributeNode()插入
            document.createAttribute

        //8.创建文本节点，使用appendChild() 插入
            document.createTextNode("这是文本节点")
        
        // 10.返回当前文档的form表单节点集合
            document.forms

        // 11.获取文档中指定class名的元素集合，返回的是nodeList集合
            document.getElementsByClassName("className")
        
        // 12.获取文档中指定id名的元素
            document.getElementById("idName")
        
        // 13. 返回文档指定name 名称的元素集合
            document.getElementsByName()

        // 14.返回文档指定标签的元素集合
            document.getElementsByTagName();

        // 15.返回文档中所有的img 集合对象
            document.images

        // 16. 返回对文档中所有 Area 和 Link 对象引用
            document.links

        // 17. 删除空文本节点
            document.normalize()
        
        // 18. 获取文档中匹配指定的CSS选择器的第一元素
            document.querySelector()

        // 19. 获取文档中匹配指定css 选择器的元素集合
            document.querySelectorAll()
        
        // 20. 返回所有脚本集合
            document.scripts
        
        // 21. 返回/设置当前文档的标题
            documen.title

        // 22. 向文档写入html 或者script 脚本
            document.write()

          //23. 返回文档根节点 html
            document.documentElement
            // 23.1 获取页面（html 节点）当前滚动的距离顶部高度
            document.documentElement.scrollTop
            // 23.1 获取页面（html 节点）当前滚动的距离左边的高度
            document.documentElement.scrollLeft
            //23.1 获取页面（html 节点）的可视宽度(不会因为内容多大而撑开)
            document.documentElement.clientWidth
            //23.1 获取页面（html 节点）的可视高度(不会因为内容多大而撑开)
            document.documentElement.clientHeight

            //23. 获取页面（html 节点）的宽度(最小值为页面可视宽度),如果页面内容大于页面可视宽度，就是内容body的clientWidth
            document.documentElement.scrollWidth

            //23. 获取页面（html 节点）的高度(最小值为页面可视高度),如果页面内容大于页面可视高度，就是内容body的clientHeight
            document.documentElement.scrollHeight
           
            //23. 获取页面（html 节点）的上外边框到下外边框的距离
            document.documentElement.offsetHeight
            document.documentElement.offsetWidth

  // JavaScript文档对象模型--Dom对象
        var element = document.getElementById("element")

        // 1. 给指定元素添加事件句柄
            element.addEventListener("click",function(){},false)
        
        // 2. 给指定元素element 的子节点列表的末尾添加一个子节点(元素节点，文本节点....)
            element.appendChild()

        //3. 返回指定元素element 的属性数组
            element.attributes

        // 4. 返回指定元素element 的子标签节点集合(只有标签节点)
            element.children
        
        // 5. 返回指定元素element 的子节点集合(标签节点，文本节点)
            element.childNodes

        // 6.克隆指定element节点,参数如果为true，则克隆包含它的子孙节点，否则只是克隆当前节点
            element.cloneNode(true)

        // 7. 返回指定元素类名，作为DOMTokenList 对象，包含这add(),remove(),contains(),toggle() 方法
            element.classList

        // 8. 返回/设置指定元素类名，字符串类型
            element.className
        
        // 9. 获取element 上内边框到下内边框的距离,width+padding(不包含boder)
            element.clientHeight

        // 10. 获取element 左内边框到右内边框的距离，width+padding
            element.clientWidth

        // 11. 获取左边框(border-left-width)的宽度，没有为0
            element.clientLeft
        // 12. 获取上边框(border-left-width)的宽度，没有为0
            element.clientTop
        
        // 13. 获取element元素外上边框到外下边框的距离(width+padding+border)
            element.offsetHeight
        
        // 13. 获取element元素外左边框到外右边框的距离(height+padding+border)
            element.offsetWidth
        
        // 14.获取element元素外左边框到相对offsetParent元素(即相对定位,默认为body元素)的左内边框的距离
            element.offsetLeft
        
        // 15.获取element元素外上边框到相对offsetParent元素(即相对定位，默认body元素)的上内边框的距离
            element.offsetTop
        
        // 16. 返回element相对偏移的元素(默认为body,如果没设置定位)
            element.offsetParent
        
        // 17. 返回element 的height+padding ,如果出现滚动，实际返回的是内容宽度+padding 
            element.scrollHeight
        
        // 18. 返回element 的width+padding,如果出现滚动，实际返回的是内容高度+padding
            element.scrollWidth

        
        // 19. 获取元素element 的位置属性方法
            element.getBoundingClientRect()
        
        // 20. 获取元素的绝对位置(指当前元素的左上角相对于整张网页左上角的坐标)
          var let1 =   element.getBoundingClientRect().left
           var top1 =  element.getBoundingClientRect().top

        // 21. 获取元素的相对位置(指当前元素的左上角相对与窗口左上角的坐标)
            element.getBoundingClientRect().top+document.documentElement.scrollTop
            element.getBoundingClientRect().left+document.documentElement.scrollLeft

        // 22. 判断元素是否在可视区域
            function isView(ele){
               if(ele&&ele.nodeType!==1){
                   ele = document.querySelector(ele)
               }
               if(!ele)  return
               let res = ele.getBoundingClientRect();
               let isleft =res.left< window.innerWidth&& res.right >0
               let isTop = res.top < window.innerHeight && res.bottom >0
               return isTop && isleft;
            }

            //事件委托处理封装
            function onEven(eventType,parntNode,childNode,fn,bool){
                //没有委托
                let trifn;
                if(typeof childNode=='function'){
                    bool = fn;
                    trifn = childNode
                }else{
                    //有委托
                    trifn = function(e){
                        let  target = e.target
                        if(target.matches(childNode)){
                            target['mapTarget'] = this;
                            typeof fn=="function"&&fn.apply(target,arguments)
                        }
                    }
                }
                document.querySelectorAll(parntNode).forEach(function(itme){
                    itme.addEventListener(eventType,trifn,bool||false)
                })
            }

            function getStyle(el,Property){
                return el.currentStyle ? el.currentStyle[Property] : getComputedStyle(el)[Property];
            }

 

 

             let dom =  document.getElementById(id);
    3 
            console.log("offsetParent  ",dom['offsetParent']);//相对定位父节点，如果没有就默认body
            console.log("offsetTop ",dom['offsetTop']);// 距离相对定位父节点的上边位移
            console.log("offsetLeft  ",dom['offsetLeft']) // 距离相对定位父节点的左边位移

            //节点的实际宽度高度(即盒子模型的大小),不包含滚动条(不管是否存在)
            //标准w3c模型：offsetWidth = boder+padding+content(width=content)
            //iE：offsetWidth = width(border+padding+content)
            console.log("offsetWidth   ",dom['offsetWidth'])
            console.log("offsetHeight    ",dom['offsetHeight'])

            //当前dom 滚动的位移 
            console.log("scrollTop    ",dom['scrollTop'])
            console.log("scrollLeft    ",dom['scrollLeft'])

            //如果不出现滚动(纵横)
            //scrollWidth = clientWidth(根据盒子模型决定)
            //scrollHeight = clientHeight(根据盒子模型决定)

            //如果出现滚动  scrollWidth>clientWidth
            // scrollWidth/scrollHeight 为实际内容的宽度高度
            console.log("scrollWidth     ",dom['scrollWidth'])
            console.log("scrollHeight     ",dom['scrollHeight'])
            //边框的宽度高度
            console.log("clientTop  ",dom['clientTop'])
            console.log("clientLeft  ",dom['clientLeft'])

            //可视内容的宽度高度( 根据盒子模型决定);
            //IE：clientWidth = width-border-滚动条宽度(如果存在)；100-20-17=63
            //非IE:clientWidth = width+padding-滚动条宽度(如果存在) 100+20-17=103
            console.log("clientWidth   ",dom['clientWidth'])
            console.log("clientHeight  ",dom['clientHeight'])

            
            //真实内容的宽度
            //IE:content = width-border-padding-滚动条宽度(如果存在)
            //非IE: content =width - 滚动条宽度(如果存在)
            console.log(dom.getBoundingClientRect())