DOM--基础

DOM：Document Object Model (文档对象模型)

   --通过document提供一些能够操作页面内容的属性或方法，赋予开发人员操作页面的能力

   --一般分为三大关系：父级，子级，兄弟；

按照节点的分类划分：使用nodeType能够返回一个数字

     元素节点：数字1

     属性节点：数字2  -- nodeValue:查看节点的属性值  | |nodeName:查看节点的属性名

     文本节点：数字3

     注释节点：数字8

     document：数字9

方法：

   获取某个节点下的所有子节点：childNodes(类数组)

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

   查找某个元素的下一个兄弟节点：obj.nextElementSibling

   查找某个元素的上一个兄弟节点：obj.previousElementSibling

   第一个子节点：firstElementChild

   最后一个子节点：lastElementChild

  相对定位的父节点：node.offsetParent  --最近的有定位属性的祖先节点，如果祖先节点没有定位，则默认为body

  绝对父节点：parentNode

node.offsetLeft/node.offsetTop:--外边框到有定位父级的内边框的距离

获取信息：

   --获取元素的盒模型信息 node.getBoundingClintRect()

   --获取某个元素的信息：node.getBoundingClientRect().(left,top,bottom,right,width,height)

         --注意：获取的值是根据滚动条变化

ps:当left边界为0，div3.style.left=div3.getBoundingClientRect().left+'px'

元素的属性操作：（用于获取src，herf等相对地址）

  --获取元素行间属性：obj.getAttribute('key')

  --设置元素行间属性：obj.setAttribute("key","value")

  --删除元素行间属性：obj.removeAttribute("key")

例：用于获取src地址，obj.getAttribute('src')

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

元素的宽/高：node.offsetWidth/node.offsetHeight(计算边框)

                        node.clientWidth/node.clientHeight(不计边框)

               --都计算padding值

案例：登录框：让一个不确定宽高的元素居中

         元素left=（可视区宽-元素宽）/2

         元素top=（可视区高-元素高）/2

元素操作：

    document.createElement(tagNmae):创建一个元素

    parentNode.appendChild(childNode):往一个节点里添加一个子节点

    parentNode.insetBefore(childNode1,childNode2):往一个节点指定子节点前边插入一个节点

       --->举个栗子:ul.insertBefore(li,children[0]);-->(新添加的元素，旧元素)

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

   parent.removeChild(childNode):从一个节点中删除指定的子节点

   parentNode.replaceChild(newChild,oldchild) 替换

   node.cloneNode(boolean)  克隆一个节点--true完全克隆

表格：

   table.tHead  --获取表格头部

   table.tFoot -- 获取表格底部

   table.tBodies[num]  --获取表格主体

 

  tBodies[n].rows/tHead.rows/tFoot.rows  --表格的行.即tr

  rows[n].cells[n]单元格，即td，第几行第几列