丸子學(xué)JS（學(xué)習(xí)2小時(shí) - BOM與DOM）

前言

學(xué)到這一塊，感覺內(nèi)容好多，學(xué)到一半有點(diǎn)力不從心，硬著頭皮看到最后，結(jié)果發(fā)現(xiàn)前面有些又忘記了，往返看了3遍，大致有了一點(diǎn)輪廓，自己動(dòng)手簡單歸納了下

DOM

獲取節(jié)點(diǎn)

  • document
    a) getElementById 通過元素ID獲取節(jié)點(diǎn)
    b) getElementsByName 通過元素的name屬性獲取節(jié)點(diǎn)
    c) getElementsByTagName 通過元素標(biāo)簽獲取節(jié)點(diǎn)
  • 節(jié)點(diǎn)指針
    a) firstChild 獲取元素的首個(gè)子節(jié)點(diǎn)
    b) lastChild 獲取元素的最后一個(gè)節(jié)點(diǎn)
    c) childNodes 獲取元素的子節(jié)點(diǎn)列表
    d) previousSibling 獲取已知節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)
    e) nextSibling 獲取已知節(jié)點(diǎn)的后一個(gè)節(jié)點(diǎn)
    f) parentNode 獲取已知節(jié)點(diǎn)的父節(jié)點(diǎn)

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

  • 創(chuàng)建節(jié)點(diǎn)
    a) createElement 創(chuàng)建元素節(jié)點(diǎn)
    b) createAttribute 創(chuàng)建屬性節(jié)點(diǎn)
    c) createTextNode 創(chuàng)建文本節(jié)點(diǎn)
  • 插入節(jié)點(diǎn)
    a) appendChild 向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)
    b) insertBefore 在已知的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
  • 替換節(jié)點(diǎn)
    a) replaceChild 將某個(gè)子節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)
  • 復(fù)制節(jié)點(diǎn)
    a) cloneNode 創(chuàng)建指定節(jié)點(diǎn)的副本
  • 刪除節(jié)點(diǎn)
    a) removeChild 刪除指定的節(jié)點(diǎn)

嘗試一下

let oWrapper = document.querySelector('.wrapper')
let oBtns = document.querySelectorAll('button')
let oDivs = oWrapper.querySelectorAll('div')
oBtns[0].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.innerHTML = 7;
    oWrapper.appendChild(oDiv)
}
oBtns[1].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.style.background = '#12ccfa'
    oDiv.innerHTML = '插入';
    oWrapper.insertBefore(oDiv, oDivs[2])
}
oBtns[2].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.style.background = '#12ccfa'
    oDiv.innerHTML = '替換';
    oWrapper.replaceChild(oDiv, oDivs[4])
}
oBtns[3].onclick = function() {
    oWrapper.appendChild(oDivs[0].cloneNode(true))
}
oBtns[4].onclick = function() {
    oWrapper.removeChild(oDivs[0])
}

屬性操作

  • 獲取屬性
    a) getAttribute 獲取元素節(jié)點(diǎn)中指定屬性的屬性值
  • 設(shè)置屬性
    a) setAttribute 創(chuàng)建或改變元素節(jié)點(diǎn)的屬性
  • 刪除屬性
    a) removeAttribute 刪除元素中的指定屬性

嘗試一下

let oBtns = document.querySelectorAll('button')
let oDiv = oWrapper.querySelector('div')
oBtns[0].onclick = function() {
   let res = oDiv.getAttribute('class')
   alert(res)
}
oBtns[1].onclick = function() {
    oDiv.setAttribute('class', 'active')
}
oBtns[2].onclick = function() {
    oDiv.removeAttribute('class')
}
oBtns[3].onclick = function() {
    oWrapper.appendChild(oDivs[0].cloneNode(true))
}

文本操作

● insertData(offset,String) 從offset指定的位置插入string
● appendData(string) 將string插入到文本節(jié)點(diǎn)的末尾處
● deleteData(offset,count) 從offset起刪除count個(gè)字符
● replaceData(offset,count,string) 從offset將count個(gè)字符用string替代
● splitData(offset) 從offset起將文本節(jié)點(diǎn)分成兩個(gè)節(jié)點(diǎn)
● substring(offset,count) 返回offset起的count個(gè)節(jié)點(diǎn)
● innerHTML 返回或插入節(jié)點(diǎn)文本
● innerText 返回或插入節(jié)點(diǎn)文本

節(jié)點(diǎn)屬性

  • nodeName 節(jié)點(diǎn)的名稱
  • nodeValue 節(jié)點(diǎn)的值
  • nodeType 節(jié)點(diǎn)的類型（元素1，屬性2，文本3，注釋8，文檔9）

瀏覽器窗口可視區(qū)域大小

  • 現(xiàn)代瀏覽器
    a) window.innerHeight 瀏覽器窗口的內(nèi)部高度
    b) window.innerWidth 瀏覽器窗口的內(nèi)部寬度
  • 傳統(tǒng)ie 678
    a) document.documentElement.clientHeight 表示html文檔所在窗口的當(dāng)前高度
    b) document.documentElement.clientWidth 表示html文檔所在窗口的當(dāng)前寬度
  • 兼容寫法
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

BOM

navigator導(dǎo)航器對象

  1. appCodeName 返回瀏覽器的代碼名
  2. appName 返回瀏覽器的名稱
  3. appVersion 返回瀏覽器的平臺(tái)和版本信息
  4. cookieEnabled 返回指明瀏覽器中是否啟用cookie的布爾值
  5. platform 返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)
  6. userAgent 返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值

screen顯示器對象

  1. availHeight 返回顯示屏幕的可用高度
  2. availWidth 返回顯示屏幕的可用寬度
  3. height 返回屏幕的像素高度
  4. width 返回屏幕的像素寬度
  5. colorDepth 返回屏幕顏色的位數(shù)

history歷史對象

  1. back（） 返回前一個(gè)Url
  2. forward（） 返回下一個(gè)Url
  3. go（） 返回某個(gè)具體頁面

location位置對象

  • 屬性
    ○ hash 設(shè)置或返回從#號開始的URL
    ○ host 設(shè)置或返回主機(jī)名和當(dāng)前URL的端口號
    ○ hostname 設(shè)置或返回當(dāng)前URL的主機(jī)名
    ○ href 設(shè)置或返回完整的URL
    ○ pathname 設(shè)置或返回當(dāng)前URL的路徑部分
    ○ port 設(shè)置或返回當(dāng)前URL的端口號
    ○ protocol 設(shè)置或返回當(dāng)前URL的協(xié)議
    ○ search 設(shè)置或返回從問號？開始的URL
  • 方法
    ○ assign(URL) 加載新的文檔
    ○ reload() 重新加載當(dāng)前頁面
    ○ replace(newURL) 用新的文檔替換當(dāng)前文檔

document文檔對象

  • 集合
    ○ anchors[] 錨點(diǎn)對象數(shù)組
    ○ images[] 圖片對象數(shù)組
    ○ links[] 連接對象數(shù)組
    ○ forms[] 表單對象數(shù)組
  • 屬性
    ○ cookie 設(shè)置或返回與當(dāng)前文檔有關(guān)的所有cookie
    ○ domain 返回當(dāng)前文檔的域名
    ○ referrer 返回載入當(dāng)前文檔的文檔的URL
    ○ title 返回當(dāng)前文檔的標(biāo)題
    ○ URL 返回當(dāng)前文檔的URL
  • 方法
    ○ open() 打開一個(gè)新的文檔，并擦除舊文檔的內(nèi)容
    ○ close() 關(guān)閉文檔輸出流
    ○ write() 向當(dāng)前文檔追加寫入文本
    ○ writeIn() 同write ， 只是會(huì)追加換行

窗口控制

a) moveBy 按照給定像素參數(shù)移動(dòng)指定窗口
b) moveTo 將窗口移動(dòng)到指定的指定坐標(biāo)(x,y)處
c) resizeBy 將當(dāng)前窗口改變指定的大小(x,y)
d) resizeTo 將當(dāng)前窗口改變成(x,y)大小， x,y分別是寬度和高度
e) scrollBy 將窗口中的內(nèi)容按給定的位移量滾動(dòng)，參數(shù)為正數(shù)，正向滾動(dòng)，反之
f) scrollTo 將窗口中的內(nèi)容滾動(dòng)到指定位置

焦點(diǎn)控制

a) focus() 得到焦點(diǎn)
b) blur() 失去焦點(diǎn)

打開/關(guān)閉窗口

a) open 打開一個(gè)新的窗口，并在窗口中裝載指定URL地址的網(wǎng)頁
b) close 自動(dòng)關(guān)閉瀏覽器窗口

定時(shí)器

a) setTimeout 當(dāng)?shù)搅酥付ǖ暮撩霐?shù)后，自動(dòng)執(zhí)行功能代碼
b) clearTimeout 取消由setTimeout() 設(shè)置的定時(shí)器
c) setInterval 按指定周期重復(fù)執(zhí)行功能代碼
d) clearInterval 取消由setInterval()設(shè)置的時(shí)間間隔器

嘗試一下

<div id="wrapper" class="wrapper">
  <img src="img/1.jpg"/>
  <img src="img/2.jpg"/>
  <img src="img/3.jpg"/>
  <img src="img/4.jpg"/>
  <img src="img/5.jpg"/>
  <img src="img/6.jpg"/>
  <div class="circle">
    <span class="current">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>
</div>
var wrap = document.getElementById("wrapper");
  var oImages = document.getElementsByTagName("img");
  var oSpans = document.getElementsByTagName("span");
  var num = 0;
  var timer = play = null;
  var index = 0;
  //小圓點(diǎn)切換
  for(var i = 0; i < oSpans.length; i++){
    oSpans[i].index = i;
    oSpans[i].onmouseenter = function (){
      //將當(dāng)前遠(yuǎn)點(diǎn)的索引傳遞給函數(shù)
      showImg(this.index);
    }
  }
  //自動(dòng)播放圖片
  function autoPlay (){
    play = setInterval(function (){
      index++;
      index >= oImages.length && (index = 0);
      showImg(index);
    },2000)
  }
  autoPlay();
  // 圖片切換，淡入淡出
  function showImg(p){
    //關(guān)聯(lián)圓點(diǎn)的索引
    index = p;
    var alpha = 0;
    //小圓點(diǎn)追加樣式
    for(var i = 0; i<oSpans.length; i++){
      //清除所圓點(diǎn)的樣式
      oSpans[i].className = "";
    }
    //留下當(dāng)前的添加類名
    oSpans[index].className = "current";
    
    clearInterval(timer);
    timer = setInterval(function(){
      alpha +=2;
      if(alpha>100){
        alpha = 100;
      }
    for(var i = 0; i < oImages.length; i++){
      //所有的圖片透明
      oImages[i].style.opacity = 0;
      oImages[i].style.filter = "alpha(opacity = 0)";
    }
      //當(dāng)前圖片顯示
      oImages[index].style.opacity = alpha / 100;
      oImages[index].style.filter = "alpha(opacity =" + alpha + ")";
      //圖片不透明，則停止定時(shí)器
      alpha == 100 && clearInterval(timer);
    },20);
  }
  //移入清除定時(shí)器
  wrap.onmouseover = function(){
    clearInterval(play);
  }
  //移出重新開啟定時(shí)器
  wrap.onmouseout = function (){
    autoPlay ();
  }

對話框

a) alert 彈出一個(gè)警告框，在警告框內(nèi)顯示提示字符串文本
b) confirm 顯示一個(gè)確認(rèn)框，在確認(rèn)框內(nèi)顯示提示字符串
c) prompt 顯示一個(gè)輸入框，在輸入框內(nèi)顯示提示字符串

屬性

  • 狀態(tài)欄
    ○ defaultStatus 瀏覽器不支持
    ○ status 臨時(shí)改變?yōu)g覽器狀態(tài)欄的顯示
  • 窗口位置
    ○ IE
    ■ screenLeft 聲明窗口的左上角的X坐標(biāo)
    ■ screenTop 聲明窗口的左上角的Y坐標(biāo)
    ■ document.body.scrollLeft || document.documentELEment.scrollLeft 聲明當(dāng)前文檔向右滾動(dòng)過的像素?cái)?shù)
    ■ document.body.scrollTop || document.documentELEment.scrollTop 聲明當(dāng)前文檔向下滾動(dòng)過的像素?cái)?shù)
    ○ !IE
    ■ screenX 聲明窗口的左上角的X坐標(biāo)
    ■ screenY 聲明窗口的左上角的Y坐標(biāo)
    ■ pageXOffset 聲明當(dāng)前文檔向右滾動(dòng)過的像素?cái)?shù)
    ■ pageYOffset 聲明當(dāng)前文檔向下滾動(dòng)過的像素?cái)?shù)
    ○ FF
    ■ innerHeight 返回窗口的文檔顯示區(qū)的高度
    ■ innerWidth 返回窗口的文檔顯示區(qū)的寬度
    ■ outerHeight 返回窗口的外部高度
    ■ outerWidth 返回窗口的外部寬度
  • 其他屬性
    ○ opener 可以實(shí)現(xiàn)同域名下跨窗體之間的通信，一個(gè)窗體要包含另一個(gè)窗體的opener
    ○ closed 當(dāng)前窗口關(guān)閉時(shí)返回true
    ○ name 設(shè)置或返回窗口的名稱
    ○ self 返回當(dāng)前窗口的引用
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容