20170609-DOM相關屬性和方法

tomorrowwu 發(fā)布于2019-08-21 11:42 / 2417人閱讀

摘要：父子元素節(jié)點屬性返回子元素節(jié)點的個數(shù)返回當前元素的子元素節(jié)點的集合返回第一個子元素節(jié)點返回最后一個子元素節(jié)點返回同級的下一個元素節(jié)點返回同級的前一個元素節(jié)點返回父元素節(jié)點獲取當前元素節(jié)點的相關屬性返回該元素所有屬性的一個實時集合是一個對象

Element: 父子元素節(jié)點屬性:

childElementCount:返回子元素節(jié)點的個數(shù)

children:返回當前元素的子元素節(jié)點的集合

firstElementChild:返回第一個子元素節(jié)點

lastElementChild:返回最后一個子元素節(jié)點

nextElementSibling:返回同級的下一個元素節(jié)點

previousElementSibling:返回同級的前一個元素節(jié)點

parentElement：返回父元素節(jié)點

獲取當前元素節(jié)點的相關屬性

attributes:返回該元素所有屬性的一個實時集合,是一個 NamedNodeMap 對象

var attrs = element.attributes;
    for(var i=attrs.length-1; i>=0; i--) {
        output+= attrs[i].name + "->" + attrs[i].value;
    }

classList:返回一個元素的類屬性的實時集合

classList.add(String[,String]):為元素添加類

classList.remove(String[,String]):為元素移除類

classList.item(number): 按集合中的索引返回類值

containes(String):判斷當前元素是否存在某一個類

className:獲取或者設置元素的class屬性的值

var class = element.className

element.className = "class01 class02 class03"

id:獲取或設置元素的id屬性的值

name:獲取或設置元素的name屬性的值,例如input元素的name值

tagName:獲取當前元素的標簽名

innerHTML:獲取或者設置當前元素的內(nèi)部內(nèi)容,用此方法修改元素內(nèi)部的子節(jié)點

innerText:獲取或者修改當前元素內(nèi)部的文本內(nèi)容(排除了html元素)

outerHTML: 獲取或者設置當前元素的內(nèi)部內(nèi)容(包括該節(jié)點)

其他的屬性

clientHeight:元素內(nèi)部高度(content+padding的高度,但不包括水平滾動條的高度)

scrollHeight:和clientHeight相似,包括overflow樣式屬性導致的視圖中不可見內(nèi)容

clientWidth

scrollWidth

scrollTop: 元素垂直方向上滾動的距離(當一個元素的容器沒有產(chǎn)生垂直方向的滾動條,那它的 scrollTop 的值默認為0)

scrollLeft: 元素水平方向上的滾動距離(當一個元素的容器沒有產(chǎn)生水平方向的滾動條,那它的 scrollTop 的值默認為0.)

style: 修改當前元素節(jié)點的css樣式

document.body.style.background = "green";

常用方法:

在其子元素節(jié)點中查找對應的元素節(jié)點:

getElement....():

querySelector...():

append():在其字節(jié)點的末尾添加新的節(jié)點(不一定是元素節(jié)點) 不推薦使用!!!

document.body.append("abcdefg"); // 插入文本節(jié)點

getAttribute():返回(參數(shù)中)指定的屬性值

hasAttribute():判斷是否有(參數(shù)中)指定的屬性值

removeAttribute():移除(參數(shù)中)指定的屬性

setAttribute():添加新屬性或修改原有屬性

HtmlNode.setAttribute("name","xin");

Element可以調(diào)用Node的方法和屬性,但是Node不可以調(diào)用Element的方法和屬性

Node 父子節(jié)點屬性

childNodes:返回所有子節(jié)點集合(不一定都是元素節(jié)點)

firstChild:返回第一個子節(jié)點(不一定是元素節(jié)點)

lastChild:返回最后一個子節(jié)點(不一定是元素節(jié)點)

parentNode: 返回父節(jié)點

nextSibling:返回當前節(jié)點的下一個節(jié)點(不一定是元素節(jié)點)

previousSibling:返回當前節(jié)點的上一個節(jié)點(不一定是元素節(jié)點)

children:返回 子元素節(jié)點 的集合

parentElement:返回 夫元素節(jié)點

其他屬性

innerText:返回其節(jié)點和子節(jié)點所包含的文字

nodeName:返回節(jié)點名稱

nodeType:返回節(jié)點類型(返回節(jié)點名稱對應的數(shù)字表示)

nodeValue:返回節(jié)點的值

方法

appendChild()

insertBefore()

removeChild(): 移除指定子節(jié)點,并返回該子節(jié)點

replaceChild(newChild, oldChild):替換指定的子節(jié)點,并返回被替換的子節(jié)點

cloneNode()

contains(node): 判斷傳入的節(jié)點是否是當前節(jié)點的子節(jié)點

hasChildNodes():判斷當前節(jié)點是否有子節(jié)點

云服務器 GPU云服務器屬性定義方法方法屬性 java php創(chuàng)建屬性方法對象不支持屬性或方法

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87002.html

20170609-DOM總結

摘要：是針對和文檔的一個。在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。不過只有公認的特性才會以屬性的形式添加到對象中。總結操作往往是程序中開銷最大的部分，而因訪問導致的問題為最多。有鑒于此，最好的辦法就是盡量減少操作。 DOM是針對HTML和XML文檔的一個API。DOM描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。節(jié)點層次 ...

Mertens 2019-08-21 11:42 評論0 收藏0
klass 是如何實現(xiàn)JS的類以及類的相關屬性和作用

摘要：前面介紹了和是如何實現(xiàn)類，及其類的屬性和作用的。今天介紹的就是單純的實現(xiàn)面向對象的庫，只有多行，也照例分析吧。前面介紹了prototype.js和Mootools.js是如何實現(xiàn)類，及其類的屬性和作用的。今天介紹的klass.js就是單純的實現(xiàn)面向對象的庫，只有90多行，也照例分析吧。實現(xiàn)類的步驟第一步是使用klass新建類，初始化的固定函數(shù)是initialize，不能使用其它...

Kross 2019-08-20 18:26 評論0 收藏0
原型（prototype）相關方法，jquery類型判斷源碼分析。

摘要：先來看一個這樣的對象在函數(shù)的原型上擴展了一個方法可以看到實例化的對象下有一個屬性，而這個屬性就指向構造函數(shù)的原型對象。重點是，連接的是實例對象與構造函數(shù)原型對象，而不是，實例對象和構造函數(shù)。前言介紹原型的概念，和相關屬性，以及jquery判斷純凈對象的實現(xiàn)，不小心點進來的直接 ctrl+f 搜你想找的屬性。什么是原型 isPrototypeOf() || Object.getP...

madthumb 2019-08-20 19:09 評論0 收藏0
js的Set和Map相關屬性和方法

摘要：實例的屬性和方法實例屬性構造函數(shù)，默認就是函數(shù)。實例方法分為兩大類操作方法用于操作數(shù)據(jù)和遍歷方法用于遍歷成員。返回一個布爾值，表示該值是否為的成員。遍歷方法結構原生提供三個遍歷器生成函數(shù)和一個遍歷方法。返回鍵值的遍歷器。 Set 實例的屬性和方法 Set 實例屬性:Set.prototype.constructor：構造函數(shù)，默認就是Set函數(shù)。Set.prototype.size：返...

pinecone 2019-08-21 18:37 評論0 收藏0