• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    通過原生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()


    黄片基地 <