document對象的概念
瀏覽器對外提供的支持js的用來操作HTML文檔的一個對象,此對象封存的HTML文檔的所有信息。
1、使用document獲取HTML元素對象
直接獲取方式:
通過id: window.document.getElementById("id值")
通過name屬性值:document.getElementsByName("name值")
通過標簽名:document.getElementsByTagName("屬性名")
通過class屬性值:document.getElementsByClassName("class值")
間接獲取方式:
父子關系:獲取父級元素對象
var showdiv=document.getElementById("id值");
獲取所有的子元素對象數組
var childs=showdiv.childNodes;
子父關系:獲取子元素對象
var inp=document.getElementById("id值");
獲取父級元素對象
var div=inp.parentNode;
兄弟關系:var inp=document.getElementById("id的值");
var preEle= inp.previousSibling;//弟獲取兄
var nextEle=inp.nextSibling;//兄獲取弟
2、js操作HTML元素屬性
獲取元素對象
操作元素屬性
獲取:
元素對象名.屬性名//返回當前屬性的屬性值。----固有
元素對象名.getAttribute("屬性名");//返回自定義屬性的值-----自定義
修改
元素對象名.屬性名=屬性值
元素對象名.setAttribute("屬性名","屬性值");//修改自定義屬性的值----自定義
注意:
盡量的不要去修改元素的id值和name屬性值。
使用自定義方式獲取固有屬性內容,value的值獲取的是默認值,不能夠獲取到實時的用戶數據。
3、操作元素內容:
獲取元素對象
獲取
元素對象名.innerHTML//返回當前元素對象的所有內容,包括HTML標簽
元素對象名.innerText//返回當前元素對象的文本內容,不包括HTML標簽
修改
元素對象名.innerHTML="新的值"//會將原有內容覆蓋,並HTML標簽會被解析
元素對象名.innerHTML=元素對象名.innerHTML+"新的值"//追加效果
元素對象名.innerText="新的值"//會將原有內容覆蓋,但HTML標簽不會被解析,會作為普通文本顯示。
4、js操作元素樣式:
獲取元素對象
通過style屬性
元素對象名.style.樣式名="樣式值"//添加或者修改
元素對象名.style.樣式名=""//刪除樣式
注意:
以上操作,操作的是HTML的style屬性聲明中的樣式。而不是其他css代碼域中的樣式。
通過className
元素對象名.className="新的值"//添加類選擇器樣式或者修改類選擇器樣式(通過修改class的值,來調用先寫好的css樣式)
元素對象名.className=""//刪除類樣式。
5、js操作HTML文檔結構:
1)增加節點
第一種方式:使用innerHTML
div.innerHTML=div.innerHTML+"內容"//增加節點
1)刪除節點
div.innerHTML=""//刪除所有子節點
父節點.removeChild(子節點對象)//刪除指定的子節點。
2)增加節點
獲取元素對象var obj=document.createElement("標簽名");
元素對象名.appendChild(obj);
2)刪除節點
父節點.removeChild(子節點對象)//刪除指定的子節點。
6、js操作form:
獲取form表單對象
使用id:var fm=document.getElementById("id值");
使用name屬性:var frm=document.name值;
獲取form下的所有表單元素對象集合:fm.elements
form表單的常用方法
表單對象.submit();//提交表單數據。
form的屬性操作:
表單對象名.action="新的值"//動態的改變數據的提交路徑
表單對象名.method="新的值"//動態的改變提交方式
js表單元素的通用屬性
只讀模式:
readonly="readonly"//不可以更改,但是數據可以提交
關閉模式:
disabled="disabled"//不可以進行任何的操作,數據不會提交。
js操作多選框、單選框
被選中狀態下在js中checked屬性值為true,未選中狀態為false;
js操作下拉框:
被選擇的option對象在js中selected屬性值為true,未選中為false