歡迎加入前端交流群交流知識獲取視頻資料：749539640

?

1.node節(jié)點(diǎn)（更詳細(xì)的獲取（設(shè)置）頁面中所有的內(nèi)容） ? ? 根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)： 元素是節(jié)點(diǎn)的別稱，節(jié)點(diǎn)包含元素當(dāng)然節(jié)點(diǎn)還有好多細(xì)化的種類； 有元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)....... 節(jié)點(diǎn)的關(guān)系從這里真正的體現(xiàn)出來 根節(jié)點(diǎn)：root>>>>HTML沒有父節(jié)點(diǎn)； 節(jié)點(diǎn)操作：（通過父子系關(guān)系） childNodes：獲取當(dāng)前元素的所有子節(jié)點(diǎn)； nodeType:節(jié)點(diǎn)種類，返回值是數(shù)字； nodeValue: 獲取（文字）節(jié)點(diǎn)的文本內(nèi)容； nodeName：返回node節(jié)點(diǎn)名稱（#text，注釋， 標(biāo)簽....）； 一個(gè)可以找出元素節(jié)點(diǎn)的方法； 常見的節(jié)點(diǎn)類型： 1 ? ? ? ? ? ?元素（div、body、li、span ....... ）? 2* ? ? ? ? ? 屬性代表屬性節(jié)點(diǎn) （class，src，href） 3 ? ? ? ? ? ?文本節(jié)點(diǎn)（text節(jié)點(diǎn)） 8 ? ? ? ? ? ?代表注釋節(jié)點(diǎn) 9 ? ? ? ? ? ?代表document節(jié)點(diǎn)； 2.innerHTML和nodeValue;(當(dāng)innerHTML和nodeValue分別作為左值的時(shí)候) box.innerHTML = '<strong>abc</strong>'; box.childNodes[0].nodeValue = '<strong>abc</strong>'; innerHTML會將標(biāo)簽解析； nodeValue不會進(jìn)行解析，會將標(biāo)簽名轉(zhuǎn)譯成字符串，直接輸出； 3.attribute屬性 document.getElementById('box').attributes ? ?// ?獲取所有，該節(jié)點(diǎn)的屬性信息； document.getElementById('box').attributes.length;//返回屬性節(jié)點(diǎn)個(gè)數(shù) document.getElementById('box').attributes[0]; //返回第一個(gè)屬性節(jié)點(diǎn) document.getElementById('box').attributes[0].nodeType; //2，屬性 document.getElementById('box').attributes[0].nodeValue; //屬性值 document.getElementById('box').attributes['id']; //返回屬性為 id 的節(jié)點(diǎn) document.getElementById('box').attributes.getNamedItem('id'); // 獲取 id 的節(jié)點(diǎn)； 一般只用作獲取； 4.節(jié)點(diǎn)操作 DOM不僅僅可以獲取設(shè)置節(jié)點(diǎn)，還可以創(chuàng)建，刪除，復(fù)制、插入、替換節(jié)點(diǎn)； write()方法，是寫入，和innerHTML類似； node三劍客 createElement()創(chuàng)建一個(gè)節(jié)點(diǎn)； var oDiv=document.createElement('div') createTextNode()創(chuàng)建一個(gè)文字節(jié)點(diǎn)； var oText=document.createTextNode('dddd'); oDiv.appendChild(oText) ?將一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)上； box.insertBefore(newNode, existNode) 把new node插入到existNode之前； oDiv.insertBefore(document.createTextNode('eeeeee'),oDiv.childNodes[0]) ； box.removeChild(oText)?刪除節(jié)點(diǎn) ++定位 offsetParent?這個(gè)屬性的返回值是它根據(jù)誰定位的，如果它的所有父元素都沒有定位，那么返回body offsetLeft ? ? ? ? ?這個(gè)屬性返回元素的左側(cè)偏移值； offsetTop ? ? ?? 這個(gè)屬性返回元素的右側(cè)偏移值； 獲取元素相對于窗口的絕對定位； ? 5.替換操作 ? var p=document.createElement('p') oDiv.parentNode.replaceChild(p,oDiv); 6.復(fù)制節(jié)點(diǎn) var oDiv=document.getElementById('box'); var clone=oDiv.cloneNode(true); oDiv.appendChild(clone) console.log(clone) 7.遍歷節(jié)點(diǎn)（根據(jù)某一個(gè)節(jié)點(diǎn)位置找到它的父子、兄弟節(jié)點(diǎn)） ? ?父子節(jié)點(diǎn)：
? 兄弟節(jié)點(diǎn)： ? ? 父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級的子節(jié)點(diǎn)被稱 ? ? ?為同胞（兄弟或姐妹）。 ? childNodes 獲取當(dāng)前元素節(jié)點(diǎn)的所有子節(jié)點(diǎn) firstChild 獲取當(dāng)前元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn) lastChild | lastElementChild 獲取當(dāng)前元素節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn) ownerDocument 獲取該節(jié)點(diǎn)的文檔根節(jié)點(diǎn)，相當(dāng)與 document parentNode 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn) previousSibling 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)同級節(jié)點(diǎn) nextSibling 獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)同級節(jié)點(diǎn) 案例 1.Table圖片切換； 選項(xiàng)卡.rar
282.0 KB


2.聊天對話； 聊天對話.html
3.9 KB
3.隔行變色之鼠標(biāo)移入變色 隔行變色.html
1.5 KB

轉(zhuǎn)載于:https://www.cnblogs.com/wangzhichao/p/9335612.html

總結(jié)

以上是生活随笔為你收集整理的javascript系列-class10.DOM（下）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。