WD6.4DOM(下)

DOM（下）

获取节点：1.获取所有子标签节点——父节点.children

                  2.获取第一个子标签节点——父节点.firstElementChild

                  3.获取最后一个子标签节点——父节点.lastElementChild

                  4.获取上一个兄弟标签节点——节点.previousElementSibing

                  5.获取下一个兄弟标签节点——节点.nextElementSibing

                  6.获取父标签节点——子节点.parentElement

节点操作：1.创造节点——document.createElement(标签名)

                  2.插入节点：1.将子节点插入到父节点的最后——父节点.appendChild(子节点)

                                        2.将子节点插入到指定子节点的前面——父节点.insertBefore(新的子节点，旧的子节点)

                 3.替换节点——用新的子节点将旧的子节点替换——父节点.replaceChild(新的子节点，旧的子节点)

                 4.复制节点——节点.cloneNode(true)

                 5.删除节点——父节点.removeChild(子节点)

窗口大小：1.包含滚动条：1.window.innerWidth  2.window.innerHeight

                   2.不包含滚动条：1.document.documentElement.clienWidth

                                                2.document.documentElement.clienHeght

元素样式：1.兼容获取【语法】

              function getStyle(ele,attr){

                  if(window.getComputedStyle){

                   return getComputedStyle(ele)[attr]

                  }else{

                  return ele.currentStyle[attr]

                 }

                 }

                     2.批量设置样式【语法】

                  function setStyle(ele,styleObj){

                   for(var attr in styleObj){

                    ele.style[attr] = styleObj[attr]

                   }

                  }

元素位置：【相对于设置过定位的父元素的位置坐标，纯数字】

                 1.标签节点.offsetLeft

                  2.标签节点.offsetTop

元素宽高：1.不包含边框：1.标签节点.clientWidth  2.标签节点.clientHeight

                   2.包含边框：1.标签节点.offsetWidth  2.标签节点.offsetHeight

滚动过的距离：1.兼容获取【语法】

                          var t = document.documentElement.scrollTop || document.body.scrollTop

                         2.兼容设置【语法】

                           document.documentElement.scrollTop = document.body.scrollTop = 值

html基本结构操作：1.html——document.documentElement

                                2.body——document.body

                                3.head——document.head

                                4.title——document.title——能获取，能赋值