JavaScript Dom 操做

JavaScript Dom 操做

文本操做

// 獲取標籤中的文本內容
標籤.innerText

// 對標籤內部文本進行從新賦值
標籤.innerText = 「」

 

內容操做

---

• // 獲取當前文本內容、僅文本
• innerText

---

• // 設置或獲取對象及其內容的 HTML 形式
• outerText 

---

• // 獲取當前文本內容、包含標籤全不內容
• innerHTML 

---

• // 獲取當前標籤中的值可進行修改
• value

input 標籤            value獲取當前標籤中的值
select 標籤         獲取選中的value值(selectedIndex)
textarea 標籤        value獲取當前標籤中的值

value

---

 

屬性操做

var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);

---

• // 獲取全部標籤屬性
• attributes

---

• // 設置標籤屬性
• setAttribute(key,value)

---

• // 獲取指定標籤屬性
• getAttribute(key)

---

 

class 操做

指定單個元素 　　　　　　  tag = document.getElementById('i1')
總體作操做新增class值 　  tag.className = 'c1';
輸出爲列表形式 　　　　    tag.classList
添加class第二個值 　　　  tag.classList.add('c2')
刪除class指定類名 　　　  tag.classList.remove('c3')

// 對象標籤內添加指定樣式
obj.style.樣式 = 「...」
例：obj.style.fontSize = '16px';
例：CSS： background-color、JavaScript： backgroundColor
注：樣式參數在JavaScript下第一個詞小寫第二個詞大寫，中間沒有「-」。

---

• // 獲取全部類名
• className

---

•  // 將字符串以列表格式輸出
• classList

---

• // 刪除指定類
• classList.remove(cls)

---

• // 添加類
• classList.add(cls)

---

 

 

標籤操做

---

建立標籤並添加到HTML中 

形式一：字符串方式

// 建立字符串格式的標籤級屬性
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>xsk</a>"

形式二：對象方式

// 一、新建建立標籤a
var tag = document.createElement('a')

// 二、新建添加內容
tag.innerText = "xsk"

// 三、新建添加class類
tag.className = "c1"

// 四、新建添加屬性
tag.href = "http://www.baidu.com

修改標籤

形式一：字符串方式

// 修改標籤字符串內容
var obj = "<input type='text' />";

// 將標籤字符串obj添加到對象標籤
對象標籤.insertAdjacentHTML("beforeEnd",obj);

// 將標新建p標籤添加到對象標籤
對象標籤.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
beforeBegin ：在獲取標籤兄弟標籤，上面第一個位置插入標籤。
afterBegin ：在獲取標籤兄弟標籤，下面正一個位置插入標籤。
beforeEnd ：在獲取標籤內，上面第一個位置插入標籤。
afterEnd ：在獲取標籤內，下面第一個位置插入標籤。

形式二：對象方式

// 新建建立標籤a
var tag = document.createElement('a')

// 將標籤tag添加到對象標籤
對象標籤.appendChild(tag) 
對象標籤.insertBefore(tag,xxx[1])