摘要:對象的標準規范中提供了對象,該對象主要提供了用于解析節點樹結構的屬性和方法,樹結構主要是依靠節點進行解析,成為節點樹結構,對象是解析節點樹結構的主要入口,對象提供的屬性和方法,可以實現遍歷節點插入節點等操作判斷節點類型元素名得到標簽名稱大
Node對象
Dom的標準規范中提供了Node對象,該對象主要提供了用于解析DOM節點樹結構的屬性和方法,DOM樹結構主要是依靠節點進行解析,成為DOM節點樹結構,Node對象是解析DOM節點樹結構的主要入口,Node對象提供的屬性和方法,可以實現遍歷節點、插入節點等操作
判斷節點類型
元素名.nodeName; - 得到標簽名稱(大寫)
元素名.nodeType; - 得到元素的類型
元素名.nodeValue; - 得到元素的文本內容
獲取父節點
節點名.parentNode; - 獲取子節點的父節點
節點名.parentElement; - 獲取其父元素節點
獲取子節點
節點名.childNodes; - 獲取父節點下的所有子節點
節點名.firstChild; - 獲取父節點下第一個子節點
節點名.lastChild; - 獲取父節點下最后一個子節點
獲取相鄰兄弟節點
節點名.previousSibling; - 獲取上一個兄弟元素
節點名.nextSibling; - 獲取下一個兄弟元素
appendChild()方法
父節點.appendChild(子節點); - 向父節點添加子節點,默認從最后面添加
父節點.insertBefore(新創建的節點,頁面中的舊節點); - 向父元素中的指定子節點在其前面添加
刪除節點
父節點.removeChild(子節點); - 刪除指定的子節點
替換節點
父節點.replaceChild(新的子節點,目標節點); - 可以替換掉父節點中被選中的目標子節點
復制節點
被復制的目標節點.cloneNode(true); - true為深度克隆,會將節點的所有東西克隆過去,false為非深度克隆,不會克隆文本,默認為false
textContent屬性
節點.textContent; - 輸出節點里面的文本內容
Element對象DOM的標準規范中提供了Element對象,該對象提供了HTML頁面中所有元素所具有的屬性和方法,DOM標準規范中提供了Node對象,主要是依靠DOM節點樹結構訪問和更新HTML頁面的內容。而DOM標準規范中提供了Element對象,主要是依靠DOM元素樹結構訪問和更新HTML頁面內容,所有的HTML頁面的元素都是HTMLElement對象,而這個對象又是繼承于Element對象的
獲取子元素
父元素.firstElementChild; - 獲取父元素中第一個子元素
父元素.lastElementChild; - 獲取父元素中最后一個子元素
獲取相鄰兄弟元素
元素.previousElementSibling; - 獲取元素的上一個兄弟元素
元素.nextElementSibling; - 獲取元素的下一個兄弟元素
屬性操作
元素.getAttribute("屬性名稱"); - 獲取指定元素的指定屬性
元素.setAttribute("屬性名稱","屬性值") - 設置指定元素的屬性名稱以及屬性值
元素.removeAttribute("屬性名稱"); - 刪除指定元素的屬性
元素.hasAttribute("屬性名稱"); - 判斷指定元素指定屬性是否存在,結果返回布爾值
innerHTML屬性
元素.innerHTML; - 獲取指定元素的HTML代碼
父元素.innerHTML=HTML代碼; - 給父元素添加HTML代碼,直接把html代碼寫在字符串中,但是這個方法具有安全問題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97215.html
摘要:唯一要注意的是返回的雖然是,但是實際上是元素集合,并且是靜態的其他接口返回的和都是的。與相同的是它也是一個動態的集合,與不同的是,中保存的是一組無序的屬性節點的集合。及以下版本瀏覽器中,注釋屬于算作因此會出現在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有兩個方面不一樣1.包含節點的類型2.使用方法 1.包含節點的類型不同(重要) (1)Nod...
摘要:唯一要注意的是返回的雖然是,但是實際上是元素集合,并且是靜態的其他接口返回的和都是的。與相同的是它也是一個動態的集合,與不同的是,中保存的是一組無序的屬性節點的集合。及以下版本瀏覽器中,注釋屬于算作因此會出現在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有兩個方面不一樣1.包含節點的類型2.使用方法 1.包含節點的類型不同(重要) (1)Nod...
摘要:效果預覽來自的效果預覽引用了,已被墻,請謹慎預覽轉載聲明這篇文章其實源自的博客。主要內容整個效果都建立在的里面。為了彌補這個缺陷,我決定改成在函數中對進行操作。重點來了,是和初始位置的相對位置。就是元素的初始值。 效果預覽 來自codepen的效果預覽:(引用了angularjs,已被墻,請謹慎預覽)http://codepen.io/flybywind/pen/aNjxJa 轉載聲明...
摘要:效果預覽來自的效果預覽引用了,已被墻,請謹慎預覽轉載聲明這篇文章其實源自的博客。主要內容整個效果都建立在的里面。為了彌補這個缺陷,我決定改成在函數中對進行操作。重點來了,是和初始位置的相對位置。就是元素的初始值。 效果預覽 來自codepen的效果預覽:(引用了angularjs,已被墻,請謹慎預覽)http://codepen.io/flybywind/pen/aNjxJa 轉載聲明...
閱讀 3753·2021-08-11 11:16
閱讀 1621·2019-08-30 15:44
閱讀 1995·2019-08-29 18:45
閱讀 2267·2019-08-26 18:18
閱讀 996·2019-08-26 13:37
閱讀 1565·2019-08-26 11:43
閱讀 2109·2019-08-26 11:34
閱讀 372·2019-08-26 10:59