前言
學(xué)到這一塊撬槽，感覺內(nèi)容好多，學(xué)到一半有點(diǎn)力不從心恤煞，硬著頭皮看到最后屎勘，結(jié)果發(fā)現(xiàn)前面有些又忘記了，往返看了3遍居扒，大致有了一點(diǎn)輪廓概漱，自己動手簡單歸納了下
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 獲取元素的首個子節(jié)點(diǎn)
b) lastChild 獲取元素的最后一個節(jié)點(diǎn)
c) childNodes 獲取元素的子節(jié)點(diǎn)列表
d) previousSibling 獲取已知節(jié)點(diǎn)的前一個節(jié)點(diǎn)
e) nextSibling 獲取已知節(jié)點(diǎn)的后一個節(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)前插入一個新的子節(jié)點(diǎn) -
替換節(jié)點(diǎn)
a) replaceChild 將某個子節(jié)點(diǎn)替換為另一個節(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個字符
● replaceData(offset,count,string) 從offset將count個字符用string替代
● splitData(offset) 從offset起將文本節(jié)點(diǎn)分成兩個節(jié)點(diǎn)
● substring(offset,count) 返回offset起的count個節(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)航器對象
- appCodeName 返回瀏覽器的代碼名
- appName 返回瀏覽器的名稱
- appVersion 返回瀏覽器的平臺和版本信息
- cookieEnabled 返回指明瀏覽器中是否啟用cookie的布爾值
- platform 返回運(yùn)行瀏覽器的操作系統(tǒng)平臺
- userAgent 返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值
screen顯示器對象
- availHeight 返回顯示屏幕的可用高度
- availWidth 返回顯示屏幕的可用寬度
- height 返回屏幕的像素高度
- width 返回屏幕的像素寬度
- colorDepth 返回屏幕顏色的位數(shù)
history歷史對象
- back（） 返回前一個Url
- forward（） 返回下一個Url
- go（） 返回某個具體頁面
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() 打開一個新的文檔照弥，并擦除舊文檔的內(nèi)容
○ close() 關(guān)閉文檔輸出流
○ write() 向當(dāng)前文檔追加寫入文本
○ writeIn() 同write ， 只是會追加換行
窗口控制
a) moveBy 按照給定像素參數(shù)移動指定窗口
b) moveTo 將窗口移動到指定的指定坐標(biāo)(x,y)處
c) resizeBy 將當(dāng)前窗口改變指定的大小(x,y)
d) resizeTo 將當(dāng)前窗口改變成(x,y)大小进副， x,y分別是寬度和高度
e) scrollBy 將窗口中的內(nèi)容按給定的位移量滾動这揣，參數(shù)為正數(shù)，正向滾動影斑，反之
f) scrollTo 將窗口中的內(nèi)容滾動到指定位置
焦點(diǎn)控制
a) focus() 得到焦點(diǎn)
b) blur() 失去焦點(diǎn)
打開/關(guān)閉窗口
a) open 打開一個新的窗口给赞，并在窗口中裝載指定URL地址的網(wǎng)頁
b) close 自動關(guān)閉瀏覽器窗口
定時器
a) setTimeout 當(dāng)?shù)搅酥付ǖ暮撩霐?shù)后，自動執(zhí)行功能代碼
b) clearTimeout 取消由setTimeout() 設(shè)置的定時器
c) setInterval 按指定周期重復(fù)執(zhí)行功能代碼
d) clearInterval 取消由setInterval()設(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);
}
}
//自動播放圖片
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 + ")";
//圖片不透明片迅，則停止定時器
alpha == 100 && clearInterval(timer);
},20);
}
//移入清除定時器
wrap.onmouseover = function(){
clearInterval(play);
}
//移出重新開啟定時器
wrap.onmouseout = function (){
autoPlay ();
}
對話框
a) alert 彈出一個警告框，在警告框內(nèi)顯示提示字符串文本
b) confirm 顯示一個確認(rèn)框皆辽，在確認(rèn)框內(nèi)顯示提示字符串
c) prompt 顯示一個輸入框柑蛇，在輸入框內(nèi)顯示提示字符串
屬性
-
狀態(tài)欄
○ defaultStatus 瀏覽器不支持
○ status 臨時改變?yōu)g覽器狀態(tài)欄的顯示 -
窗口位置
○ IE
■ screenLeft 聲明窗口的左上角的X坐標(biāo)
■ screenTop 聲明窗口的左上角的Y坐標(biāo)
■ document.body.scrollLeft || document.documentELEment.scrollLeft 聲明當(dāng)前文檔向右滾動過的像素?cái)?shù)
■ document.body.scrollTop || document.documentELEment.scrollTop 聲明當(dāng)前文檔向下滾動過的像素?cái)?shù)
○ !IE
■ screenX 聲明窗口的左上角的X坐標(biāo)
■ screenY 聲明窗口的左上角的Y坐標(biāo)
■ pageXOffset 聲明當(dāng)前文檔向右滾動過的像素?cái)?shù)
■ pageYOffset 聲明當(dāng)前文檔向下滾動過的像素?cái)?shù)
○ FF
■ innerHeight 返回窗口的文檔顯示區(qū)的高度
■ innerWidth 返回窗口的文檔顯示區(qū)的寬度
■ outerHeight 返回窗口的外部高度
■ outerWidth 返回窗口的外部寬度 -
其他屬性
○ opener 可以實(shí)現(xiàn)同域名下跨窗體之間的通信，一個窗體要包含另一個窗體的opener
○ closed 當(dāng)前窗口關(guān)閉時返回true
○ name 設(shè)置或返回窗口的名稱
○ self 返回當(dāng)前窗口的引用
