當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript系列-class10.DOM(下)
生活随笔
收集整理的這篇文章主要介紹了
javascript系列-class10.DOM(下)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
歡迎加入前端交流群交流知識獲取視頻資料:749539640
?
1.node節點(更詳細的獲取(設置)頁面中所有的內容) ? ? 根據 W3C 的 HTML DOM 標準,HTML 文檔中的所有內容都是節點: 元素是節點的別稱,節點包含元素當然節點還有好多細化的種類; 有元素節點、屬性節點、文本節點....... 節點的關系從這里真正的體現出來 根節點:root>>>>HTML沒有父節點; 節點操作:(通過父子系關系) childNodes:獲取當前元素的所有子節點; nodeType:節點種類,返回值是數字; nodeValue: 獲取(文字)節點的文本內容; nodeName:返回node節點名稱(#text,注釋, 標簽....); 一個可以找出元素節點的方法; 常見的節點類型: 1 ? ? ? ? ? ?元素(div、body、li、span ....... )? 2* ? ? ? ? ? 屬性代表屬性節點 (class,src,href) 3 ? ? ? ? ? ?文本節點(text節點) 8 ? ? ? ? ? ?代表注釋節點 9 ? ? ? ? ? ?代表document節點; 2.innerHTML和nodeValue;(當innerHTML和nodeValue分別作為左值的時候) box.innerHTML = '<strong>abc</strong>'; box.childNodes[0].nodeValue = '<strong>abc</strong>'; innerHTML會將標簽解析; nodeValue不會進行解析,會將標簽名轉譯成字符串,直接輸出; 3.attribute屬性 document.getElementById('box').attributes ? ?// ?獲取所有,該節點的屬性信息; document.getElementById('box').attributes.length;//返回屬性節點個數 document.getElementById('box').attributes[0]; //返回第一個屬性節點 document.getElementById('box').attributes[0].nodeType; //2,屬性 document.getElementById('box').attributes[0].nodeValue; //屬性值 document.getElementById('box').attributes['id']; //返回屬性為 id 的節點 document.getElementById('box').attributes.getNamedItem('id'); // 獲取 id 的節點; 一般只用作獲取; 4.節點操作 DOM不僅僅可以獲取設置節點,還可以創建,刪除,復制、插入、替換節點; write()方法,是寫入,和innerHTML類似; node三劍客 createElement()創建一個節點; var oDiv=document.createElement('div') createTextNode()創建一個文字節點; var oText=document.createTextNode('dddd'); oDiv.appendChild(oText) ?將一個節點插入到另一個節點上; box.insertBefore(newNode, existNode) 把new node插入到existNode之前; oDiv.insertBefore(document.createTextNode('eeeeee'),oDiv.childNodes[0]) ; box.removeChild(oText)?刪除節點 ++定位 offsetParent?這個屬性的返回值是它根據誰定位的,如果它的所有父元素都沒有定位,那么返回body offsetLeft ? ? ? ? ?這個屬性返回元素的左側偏移值; offsetTop ? ? ?? 這個屬性返回元素的右側偏移值; 獲取元素相對于窗口的絕對定位; ? 5.替換操作 ? var p=document.createElement('p') oDiv.parentNode.replaceChild(p,oDiv); 6.復制節點 var oDiv=document.getElementById('box'); var clone=oDiv.cloneNode(true); oDiv.appendChild(clone) console.log(clone) 7.遍歷節點(根據某一個節點位置找到它的父子、兄弟節點) ? ?父子節點:? 兄弟節點: ? ? 父(parent)、子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱 ? ? ?為同胞(兄弟或姐妹)。 ? childNodes 獲取當前元素節點的所有子節點 firstChild 獲取當前元素節點的第一個子節點 lastChild | lastElementChild 獲取當前元素節點的最后一個子節點 ownerDocument 獲取該節點的文檔根節點,相當與 document parentNode 獲取當前節點的父節點 previousSibling 獲取當前節點的前一個同級節點 nextSibling 獲取當前節點的后一個同級節點 案例 1.Table圖片切換; 選項卡.rar
282.0 KB
2.聊天對話; 聊天對話.html
3.9 KB
3.隔行變色之鼠標移入變色 隔行變色.html
1.5 KB
轉載于:https://www.cnblogs.com/wangzhichao/p/9335612.html
總結
以上是生活随笔為你收集整理的javascript系列-class10.DOM(下)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TDD
- 下一篇: JSON序列化(stringify)对象