javascript中怎樣區(qū)分元素和節(jié)點(diǎn)？

1、所謂元素，即html文檔里面，所有的標(biāo)簽都可以稱之為元素，比如說p、tr等，也就是說元素是個(gè)統(tǒng)稱，一個(gè)文檔里面有很多的元素。

創(chuàng)新互聯(lián)公司主營鷹潭網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),鷹潭h5成都小程序開發(fā)搭建,鷹潭網(wǎng)站營銷推廣歡迎鷹潭等地區(qū)企業(yè)咨詢

2、所謂節(jié)點(diǎn)，是js為了對html文檔進(jìn)行操作，而開發(fā)的，即DOM，文檔對象模型。即每個(gè)元素都可以稱之為一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)是唯一的。

比方來說，《p》標(biāo)簽，肯定是一個(gè)p標(biāo)簽元素，那如果通過js對它進(jìn)行樣式控制的時(shí)候，就必須獲?。ㄕ业剑┑竭@個(gè)元素，稱之為節(jié)點(diǎn)，如果有好多元素，可以獲得第1個(gè)、第2個(gè)或者第n個(gè)。

總之，元素是統(tǒng)稱，節(jié)點(diǎn)是具有唯一性的。

javascript節(jié)點(diǎn)

插入節(jié)點(diǎn)可用以下幾個(gè)方法：

inode.insertBefore()

node.insertAdjacentElement()

node.replaceAdjacentText()

具體用法：

inode.insertBefore()

語法：

oElement = object . insertBefore ( oNewNode , oChildNode )

參數(shù)：

oNewNode : 必選項(xiàng)。對象(Element)。要被插入文檔結(jié)構(gòu)的對象。

oChildNode : 可選項(xiàng)。對象(Element)。定位插入點(diǎn)。 oNewNode 被插入到緊貼這個(gè)子對象的前面。

返回值：

oElement : 對象(Element)。返回插入的對象的引用。

說明：

將 oNewNode 插入文檔結(jié)構(gòu)作為 object 的子對象。即對象的 childNodes 集合的最后一項(xiàng)。

oNewNode 被添加前，必須先被建立。

object 沒有子對象時(shí)使用此方法插入 oNewNode 不要使用 oChildNode 參數(shù)。

對于已有子對象的 object 而言，如果忽略 oChildNode 參數(shù)， oNewNode 將被插入為 object 的最后一個(gè)子對象。即 object 的 childNodes 集合的最后一項(xiàng)。

在運(yùn)行時(shí)使用此方法是可以的。在對象的關(guān)閉標(biāo)簽被解析之前移除對象，則文檔空間可能未被呈遞。

node.insertAdjacentElement()

語法：

oElement = object . insertAdjacentElement ( sWhere , oElement )

參數(shù)：

oElement : 必選項(xiàng)。對象(Element)。要插入到 object 鄰近的對象。

sWhere : 必選項(xiàng)。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin : 將 oElement 插到 object 的開始標(biāo)簽之前。

afterBegin : 將 oElement 插到 object 的開始標(biāo)簽之后。但是在 object 的所有原有內(nèi)容之前。

beforeEnd : 將 oElement 插到 object 的結(jié)束標(biāo)簽之前。但是在 object 的所有原有內(nèi)容之后。

afterEnd : 將 oElement 插到 object 的結(jié)束標(biāo)簽之后。

返回值：

oElement : 對象(Element)。返回插入的對象的引用。

說明：

將 oElement 依據(jù) object 定位插入文檔結(jié)構(gòu)。

當(dāng)文檔正在載入時(shí)，不可以嘗試此方法。必須在 onload 事件觸發(fā)以后。

假如你嘗試插入一個(gè)已經(jīng)在文檔結(jié)構(gòu)中存在定位的對象，該對象將被移動到你指定的插入位置，而不會有新對象被創(chuàng)建。

其他的可以上 看看語法

JavaScript中節(jié)點(diǎn)和結(jié)點(diǎn)到底指的是什么 最好有點(diǎn)例子。

1、JavaScript原生函數(shù)沒有提供判斷DOM節(jié)點(diǎn)是否存在方法，我們通常獲取DOM節(jié)點(diǎn)幾乎都是document.getElement..方法，會返回一個(gè)object數(shù)組合集，我們可以通過object[0]，object[1]這樣來訪問這個(gè)合集的每一個(gè)對象。既然返回的是數(shù)組合集，那么就有l(wèi)ength屬性，而length大于等于1即表示DOM節(jié)點(diǎn)存在頁面中

代碼：

Object.prototype.exist = function(){

if(typeof this !='undefined' this.length=1){

return true;

}

return false;

};

使用：

假設(shè)頁面有如下節(jié)點(diǎn)

div這里是DIV節(jié)點(diǎn)/div

div這里是DIV節(jié)點(diǎn)/div

span這里是span節(jié)點(diǎn)/span

判斷節(jié)點(diǎn)是否在頁面：

var is_exist = document.getElementsByTagName('div').exist();

alert(is_exist); // true

var is_exist = document.getElementsByTagName('span').exist();

alert(is_exist); // true

var is_exist = document.getElementsByTagName('p').exist();

alert(is_exist); // false

2、注意：如果使用是使用document.getElementById()方法獲取對象的就不能使用exist()方法，因?yàn)楦鶕?jù)ID取節(jié)點(diǎn)對象的方法在取不到節(jié)點(diǎn)的情況下會返回一個(gè)空對象，不會集成原型exist()函數(shù)，所以會報(bào)錯！所以如果是根據(jù)ID取對象的可以直接if(obj)這樣既可判斷DOM節(jié)點(diǎn)是否存在頁面中

jQuery判斷DOM節(jié)點(diǎn)是否存在頁面中

可以這么干

添加原型：

(function($) {

$.fn.exist = function(){

if($(this).length=1){

return true;

}

return false;

};

})(jQuery);

3、使用方法：

假如頁面有如下DOM節(jié)點(diǎn)

div id="a"這里是id=a節(jié)點(diǎn)/div

div這里是DIV節(jié)點(diǎn)/div

div這里是DIV節(jié)點(diǎn)/div

span這里是span節(jié)點(diǎn)/span

判斷：

alert($('#aaa').exist()); // false

alert($('#a').exist()); // true

alert($('div').exist()); // true

alert($('p').exist()); // false

以上兩種方法其實(shí)都是根據(jù)對象集合的length屬性判斷對象是否存在。

JavaScript中如何添加文本節(jié)點(diǎn)？

最簡單的方法就是用元素的innerHTML屬性賦值，如：myNewElement.innerHTML = “我是文本”;但這樣不能清晰的體現(xiàn)DOM中新增加了一個(gè)文本節(jié)點(diǎn)。

然后另一種添加文本節(jié)點(diǎn)的方式，可分為兩步：

1、創(chuàng)建節(jié)點(diǎn)：文本節(jié)點(diǎn)的創(chuàng)建使用createTextNode方法，如：var myText = document.createTextNode(“我是文本”);

2、將創(chuàng)建的節(jié)點(diǎn)用appendChild方法添加某個(gè)元素下。如：myNewElement.appendChild(myText);這樣myNewElement就有myText的文本節(jié)點(diǎn)，文本節(jié)點(diǎn)的內(nèi)容是“我是文本”即可。

獲取屬性節(jié)點(diǎn)

第一種方法：獲取官方定義的屬性節(jié)點(diǎn)(獲取元素的對應(yīng)屬性值)。

格式：元素節(jié)點(diǎn)，屬性名。

注意：不能獲取自定義屬性的值。

代碼如下：

console.log(jsInput.placeholder);

alert("是時(shí)候展現(xiàn)真正的技術(shù)");

設(shè)置屬性節(jié)點(diǎn)的值

公式：元素節(jié)點(diǎn) . 屬性名 = 新的屬性值

代碼如下：

//設(shè)置元素對應(yīng)屬性的值

//元素節(jié)點(diǎn).屬性名 = 新的屬性值

jsInput.placeholder = "sunck good";

第二種方法

公式：元素節(jié)點(diǎn) . getAttribute(屬性名);

注意：還可以獲取自定義屬性的值。

代碼：

console.log(jsInput.getAttribute("my"));

設(shè)置自定屬性的值

公式：元素節(jié)點(diǎn) . setAttribute(屬性名, 新屬性值);

注意：當(dāng)屬性不存在時(shí)，變?yōu)樘砑訉傩?/p>

代碼：

//設(shè)置

//元素節(jié)點(diǎn).setAttribute(屬性名, 新屬性值);

jsInput.setAttribute("my", "sunck");

//注意：當(dāng)屬性不存在時(shí)，變?yōu)樘砑訉傩?/p>

jsInput.setAttribute("other", "sunck");

刪除屬性節(jié)點(diǎn)

公式：元素節(jié)點(diǎn).removeAttribute(屬性名);

注意：某些低版本瀏覽器不支持

代碼：

jsInput.removeAttribute("other");

console.log(jsInput);

javascript dom中有幾種節(jié)點(diǎn)類型

一般地，節(jié)點(diǎn)至少擁有nodeType、nodeName和nodeValue這三個(gè)基本屬性。

節(jié)點(diǎn)類型不同，這三個(gè)屬性的值也不相同

nodeType

nodeType屬性返回節(jié)點(diǎn)類型的常數(shù)值。不同的類型對應(yīng)不同的常數(shù)值，12種類型分別對應(yīng)1到12的常數(shù)值

元素節(jié)點(diǎn) Node.ELEMENT_NODE(1)

屬性節(jié)點(diǎn) Node.ATTRIBUTE_NODE(2)

文本節(jié)點(diǎn) Node.TEXT_NODE(3)

CDATA節(jié)點(diǎn) Node.CDATA_SECTION_NODE(4)

實(shí)體引用名稱節(jié)點(diǎn) 　 Node.ENTRY_REFERENCE_NODE(5)

實(shí)體名稱節(jié)點(diǎn) Node.ENTITY_NODE(6)

處理指令節(jié)點(diǎn) Node.PROCESSING_INSTRUCTION_NODE(7)

注釋節(jié)點(diǎn) 　 Node.COMMENT_NODE(8)

文檔節(jié)點(diǎn) 　 Node.DOCUMENT_NODE(9)

文檔類型節(jié)點(diǎn) Node.DOCUMENT_TYPE_NODE(10)

文檔片段節(jié)點(diǎn) Node.DOCUMENT_FRAGMENT_NODE(11)

DTD聲明節(jié)點(diǎn) Node.NOTATION_NODE(12)

DOM定義了一個(gè)Node接口，這個(gè)接口在javascript中是作為Node類型實(shí)現(xiàn)的，而在IE8-瀏覽器中的所有DOM對象都是以COM對象的形式實(shí)現(xiàn)的。所以，IE8-瀏覽器并不支持Node對象的寫法