JS之DOM基礎

JavaScript分三個部分：

1. ECMAScript標準：JS 的基本語法
2. DOM：Document Object Model --->文檔對象模型 ---操做頁面的元素
3. BOM：Browser Object Model -->瀏覽器對象模型---操做的是瀏覽器的對象

---

DOM

• 文檔對象模型(Document Object Model) 簡稱DOM ： 定義了訪問和操做 HTML 文檔的標準。

• 頁面就是文檔--document,文檔中有根元素:html(可把一個html文件當作是一個文檔，因爲萬物皆對象，因此把文檔也看作對象)
• XML文件也能夠當作是一個文檔
• HTML：展現信息，展現數據的
  XML：側重於存儲數據

  <?xml verson="1.0" encoding="UTF-8" ?> 
  複製代碼

• 標籤能夠嵌套，標籤中有標籤，元素中有元素
  html頁面中都有一個根標籤--html--也叫根元素
  頁面中有一個根元素（標籤--html）, 裏面有不少元素（有不少的標籤，有不少的對象）

• 元素(element)：頁面中的因此的標籤都是元素，元素能夠當作是對象
• 節點(node)：頁面中因此的內容都是節點：標籤，屬性，文本
  root:根

• html-->head
  ------->body--->其餘的標籤
  由文檔及文檔中的全部的元素(標籤)組成的一個樹形結構的圖,叫樹狀圖(DOM樹)

---

DOM選擇器

• id: document.getElementById("id屬性的值");====>返回的是一個元素
• 標籤: document.getElementsByTagName("標籤的名字"); 不管獲取的是一個標籤，仍是多個標籤，最終都是在數組中存儲的，這行代碼的返回值就是一個僞數組(包含多個元素對象)
• name: document.getElementsByName("name屬性的值"); ====>返回一個僞數組

----如下獲取元素的操做，有些瀏覽器不支持

• class : document.getElementsClassName("類樣式的名字");====>返回一個僞數組(H5中的)
• 選擇器：
  • document.querySelector("選擇器的名稱"); 根據選擇器的方式獲取元素====>返回一個元素
  • document.querySelectorAll("選擇器的名稱"); 根據選擇器的方式獲取元素====>返回一個僞數組

---

節點: Node,頁面中的全部內容(標籤,屬性,文本)

• 元素
• 節點的屬性: 能夠用標籤(元素)/屬性節點/文本節點 . 出來 (node.XXX)
  • nodeType : 值表明的含義1--標籤, 2--屬性, 3--文本
  • nodeName: 節點的名稱
    • 1.標籤節點---大寫的標籤名稱
    • 2.屬性節點---小寫的屬性名稱
    • 3.文本節點---#text
  • nodeValue: 節點的值
    • 標籤節點---null
    • 屬性節點---屬性值
    • 文本節點---文本內容
• 獲取節點及元素

  名稱	節點	元素
  父級	parentNode	parentElement
  子級	childNodes	children
  第一個子級	firstChild	firstElementChild
  最後一個子級	lastChild	lastElementChild
  前一個兄弟節點	previousSibing	previousElement
  後一個兄弟節點	nextSibing	nextElementSibing

  獲取的屬性的節點 object.getAttributeNode("屬性的名稱")
• 總結 :
  • 凡是獲取節點的代碼中谷歌火狐獲得都是相關的節點,凡是獲取元素的代碼中谷歌火狐獲得的都是相關的元素
  • 從子節點和兄弟節點開始,獲取節點的代碼中IE8中獲得是元素,獲取元素的代碼在IE8裏面獲得的是undefined

封裝獲取節點兼容代碼

列舉一個 其餘同理

• element.firstChild-->谷歌火狐獲取的是第一個子節點
• element.firstChild-->IE8獲取的是第一個子元素
• element.firstElementChild--->谷歌火狐獲取的是第一個子元素,IE8不支持

/**
*獲取父級元素中第一個子元素
*@param element 父級元素
*@returns {*} 父級元素中的子級元素
*/
function getFirstElement (element){
    if(element.firstElementChild){//谷歌火狐支持
        return element.firstElementChild;
    }else{
        var node = element.firstChild;
        while(node && node.nodeType != 1){//若是獲取的第一個節點不是標籤的時候
            node = node.nextSibling;
        }
        return node;
    }
}
複製代碼

• 獲取某個元素的全部兄弟元素

/**
 * 獲取某個元素的全部兄弟元素
 * @param element 某個元素
 * @returns {Array} 兄弟元素
 */
function getSiblings(element) {
    if (!element)return;
    var elements = [];
    var ele = element.previousSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);
        }
        ele = ele.previousSibling;
    }
    ele = element.nextSibling;
    while (ele) {
        if (ele.nodeType === 1) {
            elements.push(ele);

        }
        ele = ele.nextSibling;
    }
    return elements;
}
複製代碼

---

元素的建立

• 元素建立的三種方式
  • document.write("標籤代碼及內容"); 缺陷: 若是是中頁面加載完畢後,此時經過這種方式建立元素,那麼頁面上存在的全部內容所有被幹掉.
  • element.innerHTML = "標籤及代碼";
  • document.creatElement("標籤名稱");
    • 建立後要把元素追加到父級元素中(appendChild(對象))
    • 把新的元素插入到後者前面: element.insertBefore(newnode,existingnode)
      • 參數：newnode(必需,須要插入的節點對象)--existingnode(可選,在其前插入新節點的子節點,若無則插入到結尾)
    • 替換元素: element.replaceChild(newnode,oldnode)
    • 移除元素: element.removeChild(node)

---

設置文本內容

• 設置文本內容的幾個屬性

  • innerText : 表示節點及其後代的"呈現"(沒隱藏)文本內容
  • textContent : 表示節點及其後代的文本內容
  • innerHtml : 獲取或設置元素中包含的HTML或XML標記(就是說獲取包括標籤以及文本的內容)

• textContent與innerText的區別

• textCont獲得全部元素,包括的內容<script>和<style>元素,相比之下innerText只顯示"人類可讀"的元素(無隱藏).

  • textContent返回節點中的每一個元素。相反，innerText意識到樣式而且不會返回「隱藏」元素的文本。

• textContent和innerHTML的差別

  • innerHTML返回HTML.有時會使用innerHTML中元素中檢索或寫入文本,但textContent性能更好,由於它的值不會被解析爲HTML.

• 設置標籤中間的文本內容，應該使用textContent屬性 (谷歌、火狐支持,IE8不支持)，使用innerText屬性(谷歌、火狐、IE8都支持)

  • 凡是成對的標籤，中間的文本內容，設置的時候都使用innerText這個屬性的方式

  <p id="p1">我是一個P標籤</p>
  document.getElementById('p1').ineerText="這是一個P";
  複製代碼

  (若是這個屬性在瀏覽器中不支持，那麼這個屬性的類型是undefined。)

• 獲取的時候：

  • innerText能夠獲取標籤中間的文本內容，但標籤中若是還有標籤，那麼最裏面的標籤的文本內容也能獲取。----獲取不到標籤的，文本能夠獲取
  • innerHTML纔是真正的獲取標籤中間的全部內容

• 結論：若是想要(獲取)標籤及內容用innerHTML，若是想要設置標籤使用innerHTML，想要設置文本，用innerText、innerHTML、textContent

• 獲取及設置元素的文本內容的兼容代碼

  /**
   *設置元素的文本內容
   *@param(參數) element 任意元素
   *@param text 任意文本內容
   */
   function setInnerText(element,text){
       if(typeof(element.textContent) == "undefind")){
           element.innerText = text;
       }else{
           element.textContent = text;
       }
   }
   
   /**
   *獲取元素的文本內容
   *@param element 任意元素
   *@returns {*} 任意元素中的文本內容
   */
   function getInnerText(element){
       if(typeof(element.textContent)){
           return element.innerText;
       }else{
           return element.textContent;
       }
   }
  複製代碼

---

補充零碎點

• 規律：
  • 在表單標籤中,若是屬性和值只有一個, 而且值是這個屬性自己,那麼在寫js代碼dom操做的時候,這個屬性值可用布爾類型
  • html中屬性和值是本身的,而且只有一個.能夠只寫這個屬性不賦值(disabled-->禁用屬性)

  //name屬性用來設置分組
    <input type="button" value="修改性別" id="btn1"/>
    <input type="radio" value="1" name="sex"/>男
    <input type="radio" value="2" name="sex"/ id="rad1">女
    //封裝獲取ID函數
    function my$(id){
        return document.getElementById(id);
    }
    my$("btn").onclick = function(){
        my$("rad1").checked = true;
    };
  複製代碼

• 凡是css中這個屬性是多個單詞的寫法在js代碼中dom操做的時候,把-去掉,後面的單詞首字母大寫便可(例如:CSS中的background-color ---> backgroundColor)
• 在js代碼中dom操做是,設置元素的類樣式,不用class關鍵字,應使用className

a標籤

• 阻止超連接的默認的跳轉: return false;
• 獲取內層的a標籤最好不要直接加id,先獲取最外面的div,再用getElementsByTagName("a")[i];獲取

自定義屬性

• 語法:
  • 設置自定義屬性 : setAttribute("屬性的名字",屬性的值);
  • 獲取自定義屬性的值 : getAttribute("屬性的名字");
  • 移除自定義屬性 : removeAttribute("屬性的名字");(或者能夠直接設置屬性的值爲空)
• 在html標籤中添加的自定義屬性,若是想要獲取這個屬性的值,須要用getAttribute("自定義屬性的名字");才能得到這個屬性的值(不能直接經過DOM對象的方式來直接獲取該屬性的值)

for循環中的事件

• for循環是在頁面加載的時候,執行完畢了

  for(var k=0;k<5;k++){};console.log(k);//k=5

  事件是在觸發的時候,執行的

  例:

  <input type="button" value="1"/>
  <input type="button" value="1"/>
  <input type="button" value="1"/>
  //獲取全部的按鈕,分別註冊點擊事件
  var btnObjs = document.getElementsByTagName("input");
  //循環遍歷全部的按鈕
  for (var i = 0; i < btnObjs.length; i++) {
    //爲每一個按鈕都要註冊點擊事件
    btnObjs[i].onclick = function () {
      //把全部的按鈕的value值設置爲默認的值:1
      for (var j = 0; j < btnObjs.length; j++) {
        btnObjs[j].value = "1";
      }
      //當前被點擊的按鈕設置爲:2
      this.value = "2";
    };
  
  }
  //console.log(i);//3
  複製代碼

------------------------------------------------------記錄於 2019.4.16 JavaScript之DOM基礎