DOM
根據(jù)id獲取元素
var div = document.getElementById('main');
注意：由于id名具有唯一性吊奢，部分瀏覽器支持直接使用id名訪問元素艘款，但不是標準方式篷朵，不推薦使用分井。
根據(jù)標簽名獲取元素
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
? var div = divs[i];
}
根據(jù)name獲取元素
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
? var input = inputs[i];
}
根據(jù)類名獲取元素
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
? var main = mains[i];
}
根據(jù)選擇器獲取元素
var text = document.querySelector('#text');
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
? var box = boxes[i];
}
事件
var box = document.getElementById('box');
box.onclick = function() {
? console.log('代碼會在box被點擊后執(zhí)行');?
};
屬性操作
非表單元素的屬性
href必峰、title糖驴、id僚祷、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成為標簽</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成為標簽</p>';
console.log(box.innerText);
HTML轉(zhuǎn)義符
" "
' '
& &
< <? // less than? 小于
> >? // greater than? 大于
空格 ?
? ©
表單元素屬性
value 用于大部分表單元素的內(nèi)容獲取(option除外)
type 可以獲取input標簽的類型(輸入框或復選框等)
disabled 禁用屬性
checked 復選框選中屬性
- selected 下拉菜單選中屬性
自定義屬性操作
getAttribute() 獲取標簽行內(nèi)屬性
setAttribute() 設(shè)置標簽行內(nèi)屬性
removeAttribute() 移除標簽行內(nèi)屬性
與element.屬性的區(qū)別: 上述三個方法用于獲取任意的行內(nèi)屬性贮缕。
樣式操作
使用style方式設(shè)置的樣式顯示在標簽行內(nèi)辙谜，通過樣式屬性設(shè)置寬高、位置的屬性類型是字符串感昼，需要加上px
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
類名操作
修改標簽的className屬性相當于直接修改標簽的類名
var box = document.getElementById('box');
box.className = 'show';
創(chuàng)建元素的三種方式
document.write()
document.write('新設(shè)置的內(nèi)容<p>標簽也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新內(nèi)容<p>新標簽</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
節(jié)點操作
節(jié)點屬性
nodeType 節(jié)點的類型
????1 元素節(jié)點
????2 屬性節(jié)點
????3 文本節(jié)點
nodeName? 節(jié)點的名稱(標簽名稱)
nodeValue? 節(jié)點值
元素節(jié)點的nodeValue始終是null
節(jié)點層級
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);
注意
? childNodes和children的區(qū)別装哆，childNodes獲取的是子節(jié)點，children獲取的是子元素
? nextSibling和previousSibling獲取的是節(jié)點，獲取元素對應(yīng)的屬性是nextElementSibling和previousElementSibling獲取的是元素
? ? nextElementSibling和previousElementSibling有兼容性問題蜕琴，IE9以后才支持
總結(jié)
節(jié)點操作萍桌，方法
appendChild()
insertBefore()
removeChild()
replaceChild()
節(jié)點層次，屬性
parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild
事件詳解
注冊事件的三種方式
var box = document.getElementById('box');
box.onclick = function () {
? console.log('點擊后執(zhí)行');
};
box.addEventListener('click', eventCode, false); // 瀏覽器兼容性問題凌简，IE9以后才支持
box.attachEvent('onclick', eventCode); // IE6-IE10支持
function eventCode() {
? console.log('點擊后執(zhí)行');
}
移除事件的三種方式
box.onclick = null;
box.removeEventListener('click', eventCode, false);
box.detachEvent('onclick', eventCode);
兼容代碼
function addEventListener(element, type, fn) {
? if (element.addEventListener) {
? ? element.addEventListener(type, fn, false);
? } else if (element.attachEvent){
? ? element.attachEvent('on' + type,fn);
? } else {
? ? element['on' + type] = fn;
? }
}
function removeEventListener(element, type, fn) {
? if (element.removeEventListener) {
? ? element.removeEventListener(type, fn, false);
? } else if (element.detachEvent) {
? ? element.detachEvent('on' + type, fn);
? } else {
? ? element['on'+type] = null;
? }
}
事件的三個階段
1.捕獲階段
2.當前目標階段
3.冒泡階段
事件對象.eventPhase屬性可以查看事件觸發(fā)時所處的階段
事件對象的屬性和方法
event.type 獲取事件類型
clientX/clientY? ? 所有瀏覽器都支持上炎，窗口位置
pageX/pageY? ? ? IE8以前不支持，頁面位置
event.target || event.srcElement 用于獲取觸發(fā)事件的元素
event.preventDefault() 取消默認行為
阻止事件傳播的方式
標準方式 event.stopPropagation();
IE低版本 event.cancelBubble = true; 標準中已廢棄
常用的鼠標和鍵盤事件
onmouseup 鼠標按鍵放開時觸發(fā)
onmousedown 鼠標按鍵按下觸發(fā)
onmousemove 鼠標移動觸發(fā)
onkeyup 鍵盤按鍵按下觸發(fā)
onkeydown 鍵盤按鍵抬起觸發(fā)
BOM
BOM(Browser Object Model) 是指瀏覽器對象模型雏搂，瀏覽器對象模型提供了獨立于內(nèi)容的藕施、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。BOM由多個對象組成凸郑，其中代表瀏覽器窗口的Window對象是BOM的頂層對象铅碍，其他對象都是該對象的子對象。
BOM的頂級對象window
window是瀏覽器的頂級對象线椰，當調(diào)用window下的屬性和方法時胞谈，可以省略window
注意：window下一個特殊的屬性 window.name
對話框
alert()
prompt()
confirm()
頁面加載事件
onload
window.onload = function () {
? // 當頁面加載完成執(zhí)行
? // 當頁面完全加載所有內(nèi)容（包括圖像、腳本文件憨愉、CSS 文件等）執(zhí)行
}
onunload
window.onunload = function () {
? // 當用戶退出頁面時執(zhí)行
}
定時器
setTimeout()和clearTimeout()
// 創(chuàng)建一個定時器烦绳，1000毫秒后執(zhí)行，返回定時器的標示
var timerId = setTimeout(function () {
? console.log('Hello World');
}, 1000);
// 取消定時器的執(zhí)行
clearTimeout(timerId);
setInterval()和clearInterval()
定時調(diào)用的函數(shù)配紫，可以按照給定的時間(單位毫秒)周期調(diào)用函數(shù)
// 創(chuàng)建一個定時器径密，每隔1秒調(diào)用一次
var timerId = setInterval(function () {
? var date = new Date();
? console.log(date.toLocaleTimeString());
}, 1000);
// 取消定時器的執(zhí)行
clearInterval(timerId);
location對象
location對象是window對象下的一個屬性，使用的時候可以省略window對象
location可以獲取或者設(shè)置瀏覽器地址欄的URL
location成員
assign()委派躺孝，可以讓頁面跳轉(zhuǎn)到指定地址
reload()重新加載享扔，參數(shù)為true強制從服務(wù)器獲取頁面，false如果瀏覽器有緩存會從緩存中獲取頁面
replace()替換掉地址欄中的地址植袍，但是不記住歷史
hash/host/hostname/search/href……
URL組成
scheme://host:port/path?query#fragment
http://www.itheima.com:80/a/b/index.html?name=zs&age=18#bottom
scheme：通信協(xié)議惧眠，常用的http,ftp,maito等
host：主機，服務(wù)器(計算機)域名系統(tǒng) (DNS) 主機名或 IP 地址于个。
port：端口號氛魁，整數(shù)，可選厅篓，省略時使用方案的默認端口秀存，如http的默認端口為80。
path：路徑羽氮，由零或多個'/'符號隔開的字符串或链，一般用來表示主機上的一個目錄或文件地址。
query：查詢档押，可選澳盐，用于給動態(tài)網(wǎng)頁傳遞參數(shù)祈纯，可有多個參數(shù)，用'&'符號隔開洞就，每個參數(shù)的名和值用'='符號隔開盆繁。例如：name=zs
fragment：信息片斷，字符串旬蟋，錨點.
history對象
back()
forward()
go()
navigator對象
userAgent
特效
偏移量
offsetParent用于獲取距離當前元素最近的定位父級元素
offsetWidth油昂，offsetHeight 獲取大小，包括padding和border
offsetLeft倾贰，offsetTop 距離定位父元素的距離冕碟，如果沒有定位父元素就是body
客戶區(qū)大小
clientWidth，clientHeight 獲取大小匆浙，包括padding安寺，但不包括border，不包括滾動條
clientLeft首尼，clientTop?是border的寬度
滾動偏移
scrollWidth挑庶，scrollHeight 內(nèi)容大小，包括padding和未顯示的內(nèi)容软能，不包括滾動條
scrollLeft迎捺，scrollTop 滾動出去的距離
