DOM(文档对象模型)

DOM(文档对象模型)

1. 获取 HTML元素对象：
   1.方法：
   document.getElementById('id') ：返回结果是一个对象，如果存在两个标签拥有相同id，则返回第一个标签对象
   - document.getElementsByTagName('标签名') ：返回结果是一个对象集合，以数组形式放在一起
   - document.getElementsByName('标签name属性的值') ：返回结果是一个对象集合，以数组形式放在一起
   - document.getElementsByClassName('类名') ：返回一个对象集合，以数组形式放在一起 在IE6~8 不兼容
   - document.querySelector('...') :
   - document.querySelectorAll('...') :
   - document.getElementsByName() : IE中只对表单元素有效
   - 通过this参数给函数传递受监控对象
   2. 属性:
   - document.body ：专门获取body这个标签的
   - document.head
   - document.documentElement ：专门获取html这个标签的
   - childNodes :获取所有的子节点
   - children :获取所有的元素子节点 （IE兼容差）
   - firstChild / firstElementChild
   - lastChild / lastElementChild
   - previousSibling / previousElementSibling
   - nextSiblingSibling / nextSiblingElementSibling : (带有Element ==> IE不兼容)

2. HTML元素的增删改查

   1. 增

      1. 创建
         • document.createElement(...)
         • document.createTextNode(...)
         • 字符串拼接（模板字符串） ，通过innerHTML / innerText 放到容器中
      2. 插入
         • appendChild()
         • insertBefore(E1,E2)
         • cloneNode(T/F)
         • removeChild()

   2. 设置

      1. 设置元素的属性
         • setAttribute('E' , 'Value')
         • setAttribute('E') ： 获取
         • removeAttribute('E')

   3. 修改元素的样式
      - Ele.style.xxx = xxx //设置元素的行类样式
      - Ele.className = xxx
      - console.log(Ele.style.xxx) // 获取元素的行类样式

3. JS盒子模型属性
   1. 属性
   - client // 可视区（content + Padding）
   + width / height
   + top / left

    	 - offset				//
    	   + width  / height 
    	   + top  /  left
    	   + parent
   
    	- scroll				//
    	   + width  / height
    	   + top  / left  
   
    2. 方法
    	- window.getComputedStyle(Ele  , 伪类) 
    	- Ele.currentStyle()