动态创建元素 、 文档碎片（筐）、偏移量offset、BOM

一、动态创建元素

1.获取元素

• document.getElementById(‘id名’)
  返回值：有则返回找到的元素，没有则返回null

• document.getElementsByTayName(‘标签名’)
• document.getElementsByName(‘name属性的属性值’)； name其实是通用属性，多用于表单元素
• document.getElementsByClassName(‘类名’)；
• document.querySelector(‘选择器’) 返回第一个匹配上的元素 null
• document.querySelectorAll(‘选择器’) 返回一个伪数组，里面是所有匹配上的元素 可以使用forEach
• 返回值：有则返回伪数组，没有则返回空数组[]

2.通过节点的层级关系来获取节点

不区分节点类型

• 元素.parentNode 找元素的父节点

• 指定的节点没有父级节点则返回null

• 元素.childNodes 找元素的所有子节点

• 返回伪数组

• 元素.firstChild 找元素的第一个子节点
• 元素.lastChild 找元素的最后一个子节点

区分节点类型的，只找元素节点

父子关系

• 元素.parentElement 获取元素的父元素节点
• 元素.children 获取指定元素内所有子元素节点
• 元素.children[0] 获取指定元素索引为0的子元素节点
• 元素.children[ 元素.children.length-1] 获取指定元素最后一个子元素节点

兄弟关系

• 元素.previousElementSibling 找元素的哥哥元素节点
• 元素.nextElementSibling 找元素的弟弟元素节点

3.创建、添加、删除、替换、克隆节点

创建节点

           var img=document.creatElement('标签名') p div span ul li img
           // var img=new Image()
           img.src='图片地址'
           img.onload=function(){...图片加载成功}
           img.onerror=function(){...图片加载失败}

添加节点

• 父元素.appendChild(img) 在指定元素的最后面添加(img)
• 父元素.insertBefore(被添加进去的子节点,指定要添加到哪一个元素的前面)
  例：ul.insertBefore(li,ul.children[0])

删除节点

• 返回值是被删除的那个节点

• 父元素.removeChild(子节点)
• 元素.remove() 将指定的节点删除 自己删除自己

替换节点

• 父元素.replaceChild(新的节点，旧的节点)

• 作用：在父节点下，用新节点替换旧节点，所有的节点都可以替换，但是不能用元素节点替换属性节点

克隆节点

• 要被克隆元素.cloneNode(参数)

• 参数：

• 默认参数为false 浅拷贝 只复制元素本身

• true 深拷贝 复制元素本身还复制元素里的子节点

• 返回值：被克隆（复制）元素的一个副本

4.三种动态创建元素方式及区别

document.write()

-直接将内容写到页面流中，文档流执行完毕会导致页面重绘

element.innerHTML ***推荐使用，数据渲染dom

例：

        div.innerHTML = '<p>我是p标签</p>'
        //---document.createElement
        var span = document.createElement('span');
        span.innerText = '我是span'
        div.appendChild(span)

document.createElement()

例：

        document.write('<p>我是write写入p标签</p>')
        btn.onclick = function () {
            document.write('<p>我是write写入第二p标签</p>')
        }

二、文档碎片（筐）

我们可以使用js创建一个文档碎片节点，它的作用是可以承载（其他）节点，当我们把筐向页面元素里添加的时候，筐是不会进入页面的，是把筐里的内容倒进去

• 格式：document.createDocumentFragment()
• 返回值：一个文档碎片节点

例：

        //创建一个文档碎片 框
        var frg = document.createDocumentFragment()
        userList.forEach(function (item) {
            //每一次循环就创建一个tr元素节点
            var tr = document.createElement('tr');
            //tr的内容 就是相对应的数据
            tr.innerHTML = `<td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td>`;
            //将每一次循环得到tr节点装到筐里
            frg.appendChild(tr)
        })
        //将循环过后的筐添加进tbody，筐的功能就是只到筐里的内容进去，筐不进去
        tbody.appendChild(frg)

三、offset（偏移量）

offset系列属性：作用可以获取元素的位置，大小

• 获取元素的大小

• 格式：元素.offsetWidth
• 格式：元素.offsetHeight
• 获取元素可见框的宽度：width padding-right padding-left border-right border-left

• 返回值：得到元素可见框的大小，不带单位

• [注意]元素display:none 返回值0

• 格式：元素A.offsetParent
• 作用：返回元素A带有定位的父元素,如果没有父元素或者父元素没有开启定位，就返回body

• 格式：元素.offsetTop
• 作用：返回元素相对带有定位的父元素上方的偏移量,如果没有父元素或者父元素没有开启定位,则是相对于body上方的偏移量
• 格式：元素.offsetLeft
• 作用：返回元素相对带有定位的父元素左侧的偏移量,如果没有父元素或者父元素没有开启定位,则是相对于body左侧的偏移量

[注意]当我们在css中给元素设置定位时，如果采用的是bottom，right，会自动计算出left和top的值返回

offset和style区别

• offset系列的返回值是不带单位的，
• offset返回元素可见框的大小
• offset只能获取不能设置，只用style可以设置元素的样式
  
  
  总结：我们想要获取元素的大小的时候使用offsetWidth和offsetHeight更合适
             获取元素的位置时offsetTop，offsetLeft
             想要设置元素的样式及位置是使用style

client

• 元素.clientWidth
• 返回元素自身的宽度：width+左右padding ；不包含border边框
• 元素.clientHeight
• 返回元素自身的高度：height+上下padding ；不包含border边框

[注意] 返回值：不带单位

• 元素.clientTop
• 返回元素上边框的大小 border-top
• 元素.clientLeft
• 返回元素左边框的大小 border-left

四、BOM

1.bom（browser object Model）浏览器对象模型 它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window；

2.bom与dom的区别

• bom是由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
• Bom是浏览器对象模型，吧浏览器当作一个对象，bom的顶级对象是window，bom学习的是浏览器窗口交互的一些对象，bom是由浏览器厂商在各自浏览器上定义的，兼容性较差
• bom比dom更大，它包含Dom

• Dom 文档对象模型，就是吧文档当作一个对象来看待，其顶级对象是document。dom主要学习的是操作页面元素，dom是w3c标准规范

3.bom的构成

• window对象是浏览器的顶级对象，当打开一个页面的时候就有一个window对象，它具有双重角色

• 它是一个全局对象，定义在全局作用域内的变量，函数都会成为window对象的属性和方法，在调用时可以直接省略window，比如 window.alert()

• Window下一个特殊的属性 window.name，所以我们在给变量命名的时候不要使用name作变量名

• 它是js访问浏览器窗口的一个接口

• 浏览器给我们提供一套操作浏览器的属性和方法
• 所有和BOM相关的api都是window.xxx;在js代码书写的时候可以省略window不写

4.浏览器尺寸

• 指的是浏览器的可视窗口的尺寸，浏览器有可能会出现滚动条，在一般浏览器上滚动条算是浏览器的一部分，在MAC上，是不算的（mac上的滚动条是压在页面上的）
• window对象上有两个属性获取浏览器的尺寸（包含滚动条的尺寸）

• window.innerWidth 属性
• window.innerHeight 属性

[注意]window可省略不写

5.获取浏览器窗口的尺寸

1.BOM级别的获取

• innerWidth
• innerHeight
• 拿到的是包含浏览器滚动条的尺寸

2.DOM 级别的获取

• 其实就是获取页面的那一部分的尺寸

【注意】通过DOM节点获取浏览器窗口尺寸，不包含滚动条
              本质是获取的时html的width

• 格式：document.documentELement.clientWidth;