<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      通過原生DOM怎么添加、移除、創建、查找元素?

      時間:2021-07-30 09:57:29 類型:web前端
      字號:    

      DOM節點創建最常用的便是document.createElement和document.createTextNode方法:

      var el1 = document.createElement('div');
      var el2 = document.createElement('input');
      var node = document.createTextNode('hello world!');


      DOM 查詢

      元素查詢的API返回的的結果是DOM節點或者DOM節點的列表。document提供了兩種Query方法:

      // 返回當前文檔中第一個類名為 "myclass" 的元素
      var el = document.querySelector(".myclass");
      
      // 返回一個文檔中所有的class為"note"或者 "alert"的div元素
      var els = document.querySelectorAll("div.note, div.alert");
      
      // 獲取元素
      var el = document.getElementById('xxx');
      var els = document.getElementsByClassName('highlight');
      var els = document.getElementsByTagName('td');

      Element也提供了很多相對于元素的DOM導航方法:

      // 獲取父元素、父節點
      var parent = ele.parentElement;
      var parent = ele.parentNode;
      
      // 獲取子節點,子節點可以是任何一種節點,可以通過nodeType來判斷
      var nodes = ele.children;    
      
      // 查詢子元素
      var els = ele.getElementsByTagName('td');
      var els = ele.getElementsByClassName('highlight');
      
      // 當前元素的第一個/最后一個子元素節點
      var el = ele.firstElementChild;
      var el = ele.lastElementChild;
      
      // 下一個/上一個兄弟元素節點
      var el = ele.nextElementSibling;
      var el = ele.previousElementSibling;

      DOM 更改

      // 添加、刪除子元素
      ele.appendChild(el);
      ele.removeChild(el);
      
      // 替換子元素
      ele.replaceChild(el1, el2);
      
      // 插入子元素
      parentElement.insertBefore(newElement, referenceElement);

      屬性操作

      // 獲取一個{name, value}的數組
      var attrs = el.attributes;
      
      // 獲取、設置屬性
      var c = el.getAttribute('class');
      el.setAttribute('class', 'highlight');
      
      // 判斷、移除屬性
      el.hasAttribute('class');
      el.removeAttribute('class');
      
      // 是否有屬性設置
      el.hasAttributes()


      黄网站免费 <