javascript中DOM相關
1、javascript是一門輕量級得語言,所以想要用它操作網頁得話需要使用相應得介面DOM;
2、什麼是DOM?
DOM( Document Object Model) 文件物件模型。
3、相關API
document.getElementById( ID名 );
document.getElementsByClassName( 類名 ); 得到得是陣列
document.getElementsByTagName( 標籤名 ); 得到得是陣列
document.getElementsByName( name的值 );
document.querySelector("
document.querySelectorAll("選擇器"); //查詢到所有附和的標籤元素,結果為一個NodeList。
4、操作內容
1)操作標籤
獲取元素內容 var content = ele.innerHTML;
修改元素內容:ele.innerHTML=”修改的內容”;
2)操作標籤文字
獲取元素內容:var content = ele.innerText;
修改元素內容:ele.innerText=”修改的內容”;
3)操作標籤值(input)
步驟1. 先獲取元素
var ele=document.getElementsByName(“name屬性值”)[0];
步驟2. 通過元素獲取value
獲取元素value:var v= ele.value;
步驟3. 修改元素value
修改元素value:ele.value=”修改的內容”;
4)操作標籤屬性與事件
getAttribute(“屬性名”);
setAttribute(“屬性名”,”屬性值”);
removeAttribute(“屬性名”);
5)操作標籤樣式
獲取行內樣式:ele.style.樣式屬性名
設定行內樣式:ele.style.樣式名 = “新值”; //修改設定行內樣式
注意: 如果是由多個單詞構成的樣式屬性名,我們應該使用小駝峰形式給出其值。
設定任意樣式
- 直接通過修改類名方式實現,如下:
ele.className="newClassName";【推薦使用】
這樣方式在配合行內樣式的修改方式,可以達到修改任意樣式的目的。