JavaScript中document對象的常用方法


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM