DOM編程-document對象
document對象的常用屬性和方法介紹
常用的屬性:bgColor 它用來設置文檔的背景顏色
常用的方法:
getElementById() 根據HTML元素指定的ID,獲得唯一的一個HTML元素,如訪問DIV層對象、圖片Img對象等
getElementsByName()
根據HTML元素指定的name,獲得相同名稱的一組元素,如訪問表單元素(全選功能)
使用:
document.bgColor="red"; //設置背景顏色為紅色
var a = document.getElementByIdx_x_x_x_x("text1").value;
//獲取ID為"text1"中的值
var arr = document.getElementsByName("checkboxes");
//獲取name為"checkboxes"的數組
function move(){
document.getElementByIdx_x_x_x_x("advLayer").style.pixelTop=advInitTop+document.body.srollTop;
}
為何使用pixelTop 屬性,而不用top屬性?
因為top屬性返回帶單位的值,如返回"100px" 是一個字符串,無法進行運算,必須轉換類型后,方可運算
使用pixelTop屬性,返回以像素為單位的數值,如返回 "129" 可直接進行運算
窗體滾動事件:
window.onscroll=move;
注意:onscroll小寫,move是方法名,不加“括號”
如何隱藏\顯示DIV層:
隱藏:document.getElementByIdx_x_x_x_x("div1").style.display="none";
顯示:document.getElementByIdx_x_x_x_x("div1").style.display="block";
實現復選框全選和全不選效果:
先設置統一名稱,如"isBuy"
function checkAll(boolValue){
//獲取名稱為isBuy的數組
//可能有重名的其他類型元素,所以要判斷
}
調用:
<a href="javascript:checkAll(this.checked)">全選</a>
<a href="javascript:checkAll(this.checked)"全不選</a>
參數傳true,false,或this.checked都可,因為this.checked也返回一個Boolean類型,意思為是否已選中
通過DOM動態生成、獲取元素:
<script language="javascript"> //這個script標簽,放在HTML最后,因為HTML語言逐行解析
//想生成input標記,就在createElement_x_x_x()中寫標記名
</script>
常見錯誤及排錯方法:
問:在記事本中編輯HTML+JS代碼,出錯了,根據IE提示,尋找錯誤行,一行一行數很麻煩
答:首先,取消自動換行;其次按ctrl+G 輸入錯誤所在的行號,點確定即可找到
問:插入DIV層后,顯示不出層或看不到?
答:設置div標簽中的style屬性,
style="position:absolute;left:16px;top:129px;width=180px;height:230px;z-index=1;"
問:設置checkbox.checked的屬性值為:checkbox1.checked="false";
和checkbox1.checked=false;有何區別?
答:第一種的.checked="false"
賦的值是字符串型,當checked屬性為字符串時,永遠保持是true的,必須為其轉換類型為Boolean類型,例如: var c =
document.getElementByIdx_x_x_x_x("checkbox1").value=="true";