JavaScript dom 標籤屬性

節點：

平時開發中經常使用的節點是：

元素節點：nodeType值是 1    --> <a>,<p>......

屬性節點：nodeType值是 2    --> title,href,src......

文本節點：nodeType值是 3    --> 內容

 

獲取html標籤內容：

 

document.getElementById("")：接受一個id值，返回的不是內容，而是包括標籤在內的全部內容

 

document.getElementsByTagName("")：接受一個標籤名（全部屬於這個標籤名的標籤組組成一個數組），返回的不是內容，而是包括標籤在內的全部內容

 

利用數組的方式去找到須要操做的標籤arr[i]；

 

document.getElementsByClassName("")：接受一個class的值（因此屬於這個class名的標籤組成一個數組），返回不是內容，而是包括標籤在內的全部內容

 

利用數組的方式去找到須要操做的標籤arr[i]；

 

 

 

 

 

獲取和設置屬性（改變屬性不是改變內容）：

 

getAttribute：獲取屬性值

 

例：document.getElementsByTagName("a")[0].getAttribute("href")：獲取a標籤對象數組的第一個a標籤的href屬性的內容；

 

setAttribute：對屬性值進行修改

 

例：document.getElementsByTagName("a")[0].setAbbrbute("href","hello world")：把第一個a標籤的href屬性改成hello world；

 

 

若是須要對多個p的title屬性進行讀取或者修改能夠利用for循環來實現；

提示：利用setAttribute還能夠對標籤添加屬性。

ps：有一個很是值得關注的細節，當咱們使用setAttribute對文檔作出修改時，經過查看源代碼，咱們能夠發現，依然是改變前的屬性值，也就是說setAttribute作出的修改不會方應在文檔自己的源代碼裏面，這種表裏不一的現象源自於DOM的工做模式：先加載文檔的靜態內容，再動態刷新，動態刷新不影響文檔的靜態內容。這正是DOM的真正威力，對頁面內容進行刷新卻不須要在瀏覽器裏刷新頁面

 

 

 

 

獲取和設置內容：

 

前面的內容講了怎麼獲取和修改屬性和屬性值，可是有時咱們須要獲取到內容來修改html文檔中已有的內容。

 

childNodes屬性：獲取任何一個元素的全部子元素，他是一個包含這個元素所有子元素的數組。

格式：element.childNodes

利用：element.childNodes.length能夠查看一共有多少個子元素

可是，從childNodes獲取的子元素不僅只有元素節點，還有各類各樣的其餘子節點，這是須要其餘屬性來幫助其選擇到元素節點

 

nodeType屬性：利用其指定節點

格式：node.nodeType

nodeType的值是一個數字，而不像其餘的那樣是一個英文字符串；

這就意味着，可讓函數只對特定類型的節點進行處理，例如，徹底能夠編寫一個只處理元素節點的函數

 

nodeValue屬性：改變文本節點的值，用來獲得和設置一個節點的值；

格式：node.nodeValue

firstChild屬性：訪問 childNodes屬性的第一個值

lastChild屬性：訪問 childNodes屬性的最後一個值