DOM

DOM常用節(jié)點類型

元素節(jié)點 - 1；屬性節(jié)點 - 2；文本節(jié)點 - 3；注釋節(jié)點 - 8；文檔節(jié)點 - 9

查看節(jié)點

• 查看元素下的子節(jié)點

  • el.children 子元素（不是標準中的操作）

    ? lastElementChild 最后一個子元素

  • el.childNodes 子節(jié)點（包括空白內(nèi)容和轉(zhuǎn)行內(nèi)容）

• 查看元素的父元素（父節(jié)點）

  • el.parentNode

• 下一個兄弟元素

  • nextElementSibling 下一個兄弟元素(nextSibling 下一個兄弟節(jié)點，包括文本節(jié)點)

• 上一個兄弟元素

  • previousElementSibling 上一個兄弟元素 (previousSibling 上一個兄弟節(jié)點，包括文本節(jié)點)

創(chuàng)建一個元素

object element createElement("tagName");

元素創(chuàng)建完，不添加到頁面中的話，看不到它

• parent.appendChild(el);

  在parent中追加一個子元素el，（把el添加到parent的最末尾），如果操作的是一個已經(jīng)存在頁面中的元素，會把元素從原來的父級下，直接剪切過來

• parentNode.insertBefore(childNode1,childNode2)

  往一個節(jié)點的指定子節(jié)點前邊插入一個節(jié)點，如上：childNode1插入到childNode2前邊

刪除一個節(jié)點

• parentNode.removeChild(childNodes)

  從一個節(jié)點中刪除指定的子節(jié)點。返回值： 被刪除的這個節(jié)點

  ?

定位父級

el.offsetParent

查找到el根據(jù)定位的父級元素，都沒有就查找到body

ofset

• offsetWidth/offsetHeight 可視寬/高
• offsetTop/offsetLeft 和定位父級之間的偏移

getBoundingClientRect()

• 獲取元素的盒模型信息

  返回值對象 ｛

  ? left 元素左側(cè)相對于可視區(qū)左側(cè)的距離

  ? top 元素頂部相對于可視區(qū)頂部的距離

  ? right 元素右側(cè)相對于可視區(qū)左側(cè)的距離

  ? bottom 元素底部相對于可視區(qū)頂部的距離

  ? width 可視寬度

  ? height 可視高度

  ｝

• 獲取可視區(qū)寬高

  • document.documentElement.clientWidth;//可視區(qū)寬度
  • document.documentElement.clientHeight//可視區(qū)高度

• client和offset的區(qū)別

  • offsetWidth/offsetHeight //width + padding + border

  • clientWidth/clientHeight //width + padding

    ?

  • offsetLeft/offsetTop //和定位父級之間的距離

  • clientLeft/clientTop //元素的邊框

屬性操作的第三種方法

注意： 盡量不要使用或者減少使用dom的操作，性能不太好

• node.getAttribute(attr) 獲取元素指定屬性名的屬性值
• node.setAttribute(attr,value) 設置元素指定屬性名的屬性值
• node.removeAttribute(attr) 刪除元素的指定屬性

特點：可以操作行間自定義的屬性；可以獲取src,href等的相對地址

節(jié)點操作

• parentNode.replaceChild(node,childNode)
  • node用來替換的節(jié)點，childNodes被替換的子節(jié)點
• node.cloneNode(boolean) 克隆一個節(jié)點
  • true：克隆元素和元素包含的子孫節(jié)點
  • flase：克隆元素到但不包含元素的子孫節(jié)點

表格操作

• table.tHead 獲取thead
• table.tFoot 獲取tfoot
• table.tBodies[i] 獲取tbody 注意table可以擁有多個tbody，所以獲取到的是一組
• table.tHead.rows/table.rows 獲取tr 注意獲取到的是一組
• table.rows[i].cells 獲取單元格 th,td 注意獲取到的是一組，單元格要在row里邊獲取

表單操作

• input

  • text / radio / checkbox

• select

• textarea

  統(tǒng)一使用node.value獲取值

獲取 radio / checkbox 是否選中用node.checkbox

表單事件

• onchange 主要用在 select / radio / checkbox / range 中 選中的狀態(tài)發(fā)生改變
• oninput 輸入類型表單控件value發(fā)生變化
• onfocus 當元素獲得焦點時候
  • node.focus() 使元素得到焦點
• onblur 當元素失去焦點的時候
  • node.blur() 使元素失去焦點
• onsubmit 當表單提交的時候
  • node.submit 提交這個表單
• onreset 當表單重置的時候
  • node.reset() 重置這個表單

BOM

dom屬于bom（bom包含dom）

bom事件

• window.open(url,打開方式，窗口特征)

  • 返回值：打開的新窗口的頁面屬性

  winow.open在高版本下的限制

  1. 只能在事件中操作，否則可能會被阻止掉
  2. 一個事件只能打開一個，第二個可能會被阻止

• window.close() 關(guān)閉當前窗口

window下的對象

• window.navigator 瀏覽器信息

  • userAgent 用戶代理信息

• window.location 地址欄信息

  • href 完整的地址（讀/寫）
  • search 地址欄查詢信息（問號到#號之間的所有內(nèi)容）
  • hash #之后的字符（錨點）
    • onhashchange hash發(fā)生改變的時候

• window.screen 顯示器信息

  • scroll 滾動條

    //獲取可視區(qū)和整個文檔的高度
      window.innerWidth,window.innerHeight //可視區(qū)
      document.documentElement.clientHeight //可視區(qū)
      document.body.clientHeight//整個文檔高度
      document.documentElement.scrollHeight//文檔高度
    window.onscroll = function(){ //滾動條滾動
        //滾動條滾動距離(滾動距離)
        console.log(document.documentElement.scrollTop,document.documentElement.scrollLeft);
          //chrome下無效
        console.log(document.body.scrollTop,document.body.scrollLeft);
          // 火狐下無效  IE整體不識別
        console.log(window.scrollY,window.scrollX);//IE整體不識別
        console.log(window.pageYOffset,window.pageXOffset);//IE8及以下不識別
        /*
            IE9-IE11不識別 2,3
            IE8一下只識別 1
        */
    ｝
    **
      兼容不同瀏覽器
      var scrollY = document.documentElement.scrollTop||document.body.scrollTop;
    ** 
    

    • window.scrollTo(x,y) 設置滾動條距離

• window.history 瀏覽器歷史記錄

  • history.back(); 返回歷史記錄的上一頁
  • history.forward(); 進入歷史記錄的下一頁
  • history.go(nub); 進入具體某一頁