DOM和BOM一些基礎(chǔ)用法

DOM

DOM常用節(jié)點(diǎn)類(lèi)型

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

查看節(jié)點(diǎn)

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

    • el.children 子元素（不是標(biāo)準(zhǔn)中的操作）

      ? lastElementChild 最后一個(gè)子元素

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

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

    • el.parentNode

  • 下一個(gè)兄弟元素

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

  • 上一個(gè)兄弟元素

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

創(chuàng)建一個(gè)元素

object element createElement("tagName");

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

  • parent.appendChild(el);

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

  • parentNode.insertBefore(childNode1,childNode2)

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

刪除一個(gè)節(jié)點(diǎn)

  • parentNode.removeChild(childNodes)

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

    ?

定位父級(jí)

el.offsetParent

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

ofset

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

getBoundingClientRect()

  • 獲取元素的盒模型信息

    返回值對(duì)象 ｛

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

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

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

    ? bottom 元素底部相對(duì)于可視區(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 //和定位父級(jí)之間的距離

    • clientLeft/clientTop //元素的邊框

屬性操作的第三種方法

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

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

特點(diǎn)：可以操作行間自定義的屬性；可以獲取src,href等的相對(duì)地址

節(jié)點(diǎn)操作

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

表格操作

  • table.tHead 獲取thead
  • table.tFoot 獲取tfoot
  • table.tBodies[i] 獲取tbody 注意table可以擁有多個(gè)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 輸入類(lèi)型表單控件value發(fā)生變化
  • onfocus 當(dāng)元素獲得焦點(diǎn)時(shí)候
    • node.focus() 使元素得到焦點(diǎn)
  • onblur 當(dāng)元素失去焦點(diǎn)的時(shí)候
    • node.blur() 使元素失去焦點(diǎn)
  • onsubmit 當(dāng)表單提交的時(shí)候
    • node.submit 提交這個(gè)表單
  • onreset 當(dāng)表單重置的時(shí)候
    • node.reset() 重置這個(gè)表單

BOM

dom屬于bom（bom包含dom）

bom事件

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

    • 返回值：打開(kāi)的新窗口的頁(yè)面屬性

    winow.open在高版本下的限制

    1. 只能在事件中操作，否則可能會(huì)被阻止掉
    2. 一個(gè)事件只能打開(kāi)一個(gè)，第二個(gè)可能會(huì)被阻止

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

window下的對(duì)象

  • window.navigator 瀏覽器信息

    • userAgent 用戶代理信息

  • window.location 地址欄信息

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

  • window.screen 顯示器信息

    • scroll 滾動(dòng)條

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

  • window.history 瀏覽器歷史記錄

    • history.back(); 返回歷史記錄的上一頁(yè)
    • history.forward(); 進(jìn)入歷史記錄的下一頁(yè)
    • history.go(nub); 進(jìn)入具體某一頁(yè)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 什么是 BOM ? 1.瀏覽器對(duì)象模型 Browser Object Model 2.BOM的核心對(duì)象是windo...
    WeekOne閱讀 427評(píng)論 0贊 2
  • 第一章 1.什么是DOM DOM: Document Object Model(文檔對(duì)象模型) 是JavaScri...
    fastwe閱讀 835評(píng)論 0贊 0
  • ??DOM（文檔對(duì)象模型）是針對(duì) HTML 和 XML 文檔的一個(gè) API（應(yīng)用程序編程接口）。 ??DOM 描繪...
    霜天曉閱讀 3,704評(píng)論 0贊 7
  • 一、JS前言 （1）認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱(chēng)為結(jié)構(gòu))，知道了CSS樣式(也稱(chēng)為表示)，會(huì)使用HT...
    凜0_0閱讀 2,798評(píng)論 0贊 8
  • 收集于網(wǎng)絡(luò)，特此整理。 多看看API，總是沒(méi)壞處~ 一、節(jié)點(diǎn) 1.1 節(jié)點(diǎn)屬性 Node.nodeName //...
    前端程序猿阿旭閱讀 5,424評(píng)論 1贊 1