DOM 目前的通用版本是DOM3
1. JS初級主要就兩個作用：
1.找元素
2.給元素增加/刪除class
2. 節(jié)點API
-
1. nodeType
Node.ELEMENT_NODE === 1 //true，元素節(jié)點 Node.TEXT_NODE === 3 //true朋沮，文本節(jié)點 Node.COMMENT_NODE === 8 //true筷频，注釋節(jié)點 Node.DOCUMENT_TYPE_NODE === 10 //true币他，例：<!DOCTYPE html> Node.DOCUMENT_FRAGMENT_NODE === 11 //重點棍郎！ xxx.nodeType === 3 //可用來檢驗xxx是一個元素節(jié)點還是元素中的文本 -
2. tagName
ul的tagName為'UL'（大寫！）let brother = li.getElementsByTagName('UL')[0];getElementsByTagName這個API搜索的是li元素的后代，并按順序返回所有的ul，返回的是一個數(shù)組，要寫上[0]
-
3. getAttribute
a.href //這樣獲取href斟赚，瀏覽器會給href加上http協(xié)議 a.getAttribute('href') //這樣獲取的才是href本身 -
4. target和currentTarget
liTags[i].onmouseenter = function (x) { console.log(x.target); //x.target是我們操作的那個元素着降，若a里包含了個span，那操作的就是span console.log(x.currentTarget) //x.currentTarget是我們監(jiān)聽的元素拗军，就是liTags[i]這個元素 } -
5. 選擇器
let a = document.querySelector('a[href="' + id + '"]') //href外要包一個中括號任洞，地址外要包一個雙引號蓄喇！并且變量id要和其他的用加號隔開 -
6. 兒子children
var c = div.children; //會獲得div下的所有子標簽 var c = div.childNodes; //會獲得div下的所有子標簽加文本標簽 7. Siblings
獲取所有兄弟方法一：
var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
if (sibling.nodeType !== 1 || sibling === elem) continue;
siblings.push(sibling);
}
return siblings;
};
獲取所有兄弟方法二 用getSiblings()：
var elem = document.querySelector('#some-element');
var siblings = getSiblings(elem);
注意：nextSibling如果有換行，會把換行當作下一個兄弟
- 8. nodeName()
document.body.nodeName //'BODY'交掏，body的節(jié)點名字妆偏，(除了svg，其他節(jié)點名字返回都是大寫）
document.documentElement.nodeName //'HTML'
- 9. cloneNode()
var div2 = div1.cloneNode(); //會把div1本身復(fù)制給div2
var div2 = div1.cloneNode(true); //會把div1及它的所有子節(jié)點一起復(fù)制給div2盅弛，這句等于var div2=div1;
10. isSameNode()和isEqualNode()
isEqualNode檢測內(nèi)容是否相同
isSameNode檢測兩個元素是否是同一個節(jié)點11. removeChild()
在頁面里移除child節(jié)點钱骂，但是child在內(nèi)存還是存在的12. replaceChild()
替換兒子，被替換的只是在頁面里不見了挪鹏，還是存在內(nèi)存里的13. normalize()
將代碼正臣啵化-
14. innerText()和textContent()
innerText是IE的私有實現(xiàn),但也被除FF之外的瀏覽器所實現(xiàn),textContent 則是w3c的標準API,現(xiàn)在IE9也實現(xiàn)了。
區(qū)別1：textContent會獲取所有元素的內(nèi)容讨盒，包括script和style標簽里面的內(nèi)容解取，innerText不會
區(qū)別2：innerText不會返回隱藏元素的文本(像display:none)，但textContent會
區(qū)別3：innerText會受CSS的影響返顺，觸發(fā)重排禀苦，而textContent不會，所以textContent快
但用這兩個API賦值的時候遂鹊，都會覆蓋掉元素里原有的內(nèi)容div1.textContent = 'hello'; //這樣div1里的東西都會被hello覆蓋掉 div1.appendChild(document.createTextNode('hello')); //這樣就不會覆蓋掉div1里的東西
3. Document API
1.document.children
[html]振乏，document是html的爸爸2.document.documentElement
就是html3.document.write
盡量不用，若用在延時性和異步性的方法里稿辙，會把整個頁面的內(nèi)容覆蓋掉4.querySelector()和querySelectorAll()
querySelectorAll返回的是一個偽數(shù)組
4. 用JS完成頁面內(nèi)的跳轉(zhuǎn)
let aTags = document.querySelectorAll('nav.menu > ul > li > a'); //獲取所有a標簽昆码，返回的是一個數(shù)組
for(let i=0;i<aTags.length;i++) { //因為aTags是數(shù)組，所以要用for循環(huán)邻储，同時監(jiān)聽到數(shù)組里的所有元素
aTags[i].onclick = function (x) { //監(jiān)聽a標簽被鼠標點擊的動作
x.preventDefault(); //防止默認動作（跳轉(zhuǎn)）
let a = x.currentTarget; //當前監(jiān)聽的元素a
let href = a.getAttribute('href'); //獲取a的href值
let element = document.querySelector(href); //獲取帶有這個href值的標簽 例：'#siteAbout'
let top = element.offsetTop; //獲取這個標簽的底端到整個頁面頂端的距離（固定值）
window.scrollTo(0,top); //跳轉(zhuǎn)window.scrollTo(x,y);
}
}
5. console.log調(diào)試大法
出問題了就在每一步console.log赋咽，能解決很多問題
6. setInterval()
let i=0;
let say = setInterval(() => {
if(i === 25){
window.clearInterval(say); //調(diào)用setInterval的名字來停止它
return;
}
i++;
console.log(i); //從1報數(shù)到25，一秒一次吨娜，到25就停
},1000);
7. Tween.js
- 在cdn里搜tween脓匿，并在html中引用
- 在github-tween中查看使用教程
本文版權(quán)歸彭奕澤和饑人谷所有
