DOM
概念
- DOM:Document Object Model 文檔對(duì)象模型婚苹。
- DOM作用：操作頁面中的元素。
- 頂級(jí)對(duì)象是document 就是指HTML或者XML文件珠闰。
- HTML側(cè)重于展示數(shù)據(jù)戳杀，XML側(cè)重于存儲(chǔ)數(shù)據(jù)，XHTML寫的是HTML代碼副渴，遵循的是XML 的規(guī)范奈附。
- 每一個(gè)HTML文件都可以看成是一個(gè)文檔對(duì)象全度，里面所有的標(biāo)簽的層次關(guān)系都可以看成是一個(gè)樹形結(jié)構(gòu)圖，樹狀圖斥滤。
- 頁面中所有的內(nèi)容都是節(jié)點(diǎn)：標(biāo)簽節(jié)點(diǎn)将鸵，屬性節(jié)點(diǎn)，文本節(jié)點(diǎn)佑颇。IE8中會(huì)忽略空白節(jié)點(diǎn)
- 節(jié)點(diǎn)屬性
- nodeType 如果是標(biāo)簽顶掉，值為1；如果是屬性挑胸，值為2痒筒；如果是文本，值為3
- nodeName 如果是標(biāo)簽，值為大寫標(biāo)簽名字簿透；如果是屬性移袍，值為小寫屬性名字；如果是文本老充，值為#text
- nodeValue 如果是標(biāo)簽葡盗，值為 null ；如果是屬性啡浊，值為屬性值觅够；如果是文本，值為文本內(nèi)容
- 頁面中的標(biāo)簽巷嚣，標(biāo)簽就是元素喘先，元素就可以看成是對(duì)象，標(biāo)簽也是節(jié)點(diǎn)廷粒。
- 節(jié)點(diǎn)比元素大苹祟。
- 根元素：頁面中最外邊的標(biāo)簽
- 文檔元素：文檔中的第一個(gè)元素，HTML文檔元素就是< html>
綁定和解綁
- 第一種寫法
- 對(duì)象.on+"事件名字"=事件處理函數(shù)
- 對(duì)象.on+"事件名字"=null
- 第二種寫法
- 對(duì)象.addEventListener("事件名字",命名函數(shù),false);
- 對(duì)象.revemoEventListener("事件名字",命名函數(shù)的名字,false);
事件冒泡
- 元素A中嵌套了另一個(gè)元素B评雌，里面元素B和外面元素A注冊(cè)了相同的事件树枫，如果里面元素B的事件觸發(fā)了，外面的元素A的該事件也會(huì)自動(dòng)的觸發(fā)景东。
- 阻止事件冒泡的兩種方法 window.event.cancelBubble=true 或者是 e.stopPropagation();
事件的三個(gè)階段
事件捕獲階段砂轻，事件目標(biāo)階段，事件冒泡階段
事件階段有一個(gè)屬性斤吐，這個(gè)屬性是需要通過事件參數(shù)對(duì)象.eventPhase來獲取的
屬性的值是：1->捕獲階段2->目標(biāo)階段3->冒泡階段
-
e.type獲取的是當(dāng)前觸發(fā)該事件的事件類型
<script> var objs=[my$("dv1"),my$("dv2"),my$("dv3")]; objs.forEach(function(element){ element.addEventListener("click",function(e){ console.log(this.id+"==="+e.eventPhase+"==="+e.type); },false); }); </script>false值由內(nèi)向外搔涝，一般采用false
dv3===2===click
dv2===3===click
dv1===3===click
<script> var objs=[my$("dv1"),my$("dv2"),my$("dv3")]; objs.forEach(function(element){ element.addEventListener("click",function(e){ console.log(this.id+"==="+e.eventPhase+"==="+e.type); },true); }); </script>true值由外向內(nèi)
dv1===1===click
dv2===1===click
dv3===2===click
DOM級(jí)別
- DOM0 初級(jí)階段
- DOM1 規(guī)定了節(jié)點(diǎn)的類型Node，一般使用DOM1
- DOM2 新增了一些方法和措，但是很多瀏覽器并不支持
- DOM3 大多數(shù)瀏覽器都沒有支持
全局變量和隱式全局變量
- 全局變量不會(huì)被刪除庄呈，隱式全局變量會(huì)被刪除
<script>
var num=10;//全局變量
number=20;//隱式全局變量
delete num;//刪除全局變量
delete number;//刪除隱式全局變量
console.log(typeof num);//number
console.log(typeof number);//undefined
</script>
innerText和innerHTML
- 設(shè)置文本內(nèi)容的時(shí)候，用兩個(gè)都一樣
- 設(shè)置標(biāo)簽內(nèi)容的時(shí)候
- innerText設(shè)置標(biāo)簽內(nèi)容派阱，顯示的是標(biāo)簽+文本诬留，標(biāo)簽實(shí)際上是轉(zhuǎn)義出來了
- innerHTML設(shè)置標(biāo)簽內(nèi)容，顯示的是效果
- 如果想要設(shè)置文本贫母，用誰都可以文兑，如果想要有標(biāo)簽效果，用innerHTML
- 獲取標(biāo)簽中的文本內(nèi)容腺劣，使用innerText和innerHTML都可以绿贞，如果獲取的是元素中的標(biāo)簽和文本內(nèi)容，應(yīng)該使用innerHTML
innerText和textContent
- innerText：谷歌支持橘原，低版本火狐不支持籍铁，高版本火狐支持涡上，IE8支持
- textContent：谷歌支持，火狐支持拒名，IE8不支持
- 瀏覽器不支持某屬性時(shí)吓懈，該屬性的類型是undefined
className
- html標(biāo)簽中的class屬性，在js 中是關(guān)鍵字靡狞，不能直接使用耻警。所以， 對(duì)象.class="值"; 這種寫法是錯(cuò)誤的甸怕。應(yīng)該這么寫：對(duì)象.className="值";
- 對(duì)象.style.屬性名="值"; div.style.backgroundColor="red";
- 對(duì)象.className="值"; div.className="cls";
自定義屬性
- 獲取自定義屬性的值 對(duì)象.getAttribute(“屬性的名字”); 返回值是該屬性的值
- 設(shè)置自定義屬性的值 對(duì)象.setAttribute(“屬性的名字”,”值”);
- removeAttribute甘穿，getAttribute，setAttribute三個(gè)方法不僅可以操作元素的自定義屬性及值梢杭，還可以操作元素的自帶屬性
隱藏方式
<script>
zy$("btn").onclick=function(){
zy$("div").style.display="none";//不占位置
zy$("div").style.visibility="hidden";//占位置
zy$("div").style.opacity=0;//占位置
zy$("div").style.width=0;//占位置
zy$("div").style.height=0;
}
</script>
設(shè)置樣式
- 如果樣式的屬性是在style屬性中設(shè)置的温兼，是可以直接獲取的
- 如果樣式的屬性是在style標(biāo)簽中設(shè)置的，不能直接獲取
獲取節(jié)點(diǎn)元素12個(gè)
<script>
console.log(zy$("uu").childNodes);
console.log(zy$("uu").children);//推薦使用
console.log(zy$("uu").parentNode);//推薦使用
console.log(zy$("uu").parentElement);
console.log(zy$("uu").firstChild);
console.log(zy$("uu").firstElementChild);
console.log(zy$("uu").lastChild);
console.log(zy$("uu").lastElementChild);
console.log(zy$("uu").previousSibling);
console.log(zy$("uu").previousElementSibling);
console.log(zy$("uu").nextSibling);
console.log(zy$("uu").nextElementSibling);
</script>
創(chuàng)建元素的兩種方式
- 第一種 對(duì)象.innerHTML=”標(biāo)簽代碼及內(nèi)容”
- 第二種 document.creatElement
三大系列
offset系列
- offsetLeft：元素相對(duì)左邊的橫坐標(biāo)
- offsetTop：元素相對(duì)上面的縱坐標(biāo)
- offsetWidth：元素的寬度武契，有邊框
- offsetHeight：元素的高度募判，有邊框
- offset系列獲取的值都是數(shù)字類型
- offsetWidth（offsetHeight）獲取的元素本身的寬（高）+元素邊框的寬（高）
- 如果父級(jí)元素脫離文檔流，子級(jí)元素此時(shí)的offsetLeft獲取的是相對(duì)父級(jí)元素的pading+自己的margin
- 如果元素自己脫離文檔流咒唆，此時(shí)的offsetLeft獲取的事自己的left+自己的margin
scroll系列
- scrollLeft：向左卷曲出去的橫坐標(biāo)
- scrollTop：向上卷曲出去的縱坐標(biāo)
- scrollWidth：內(nèi)容實(shí)際的寬度届垫，沒有內(nèi)容就是元素的寬度，沒有邊框
- scrollHeight：內(nèi)容實(shí)際的高度全释，沒有內(nèi)容就是元素的高度装处，沒有邊框
client系列
- clientX：可視區(qū)域的橫坐標(biāo)
- clientY：可視區(qū)域的縱坐標(biāo)
- clientWidth：可視區(qū)域的寬
- clientHeight：可視區(qū)域的高
