對 原生 js 的學習和積累

javascript 原生方法學習積累

節點屬性的設置和獲取

屬性設置

1. 能夠直接在標籤上 設置

<div name='i am div'></div>

1. 經過 element.setAttribute('屬性名','屬性值')，設置指定元素上的某個屬性值。若是屬性已經存在，則更新該值；不然，使用指定的名稱和值添加一個新的屬性。

element.setAttribute('data','2020')

獲取 屬性 的兩種方法

1. 經過 element.getAttribute('屬性名')，返回元素上一個指定的屬性值。若是指定的屬性不存在，則返回 null 或 "" （空字符串）；

element.getAttribute('data')  // 2020

1. 經過 element.attributes 屬性返回該元素全部屬性節點的一個實時集合。該集合是一個 NamedNodeMap 對象，不是一個數組，因此它沒有 數組 的方法，其包含的 屬性 節點的索引順序隨瀏覽器不一樣而不一樣。但它能夠被當作一個類數組，具備 length 屬性， 和 索引。

NamedNodeMap 對象是即時的(live)，所以，若是它內部包含的對象發生改變的話，該對象會自動更新到最新的狀態。

//<div name='i am div' id='app' class='main'></div>

    // 獲取屬性集合
    let atr =  document.getElementsByTagName('div')[0].attributes;

    // 獲取屬性的兩種方式，經過下標，和 屬性名獲取
    let name = arr[0].value;  // i am div
        /* 這兩種和上面獲取到的值同樣，暫時不知道有啥區別
        let name = arr[0].nodeValue;
        let name = arr[0].textContent;
        */

    let n = arr['name'].value; i am div

insertAdjacentHTML( ) 和 innerHTML 的區別

innerHTML

優勢:

• 一般讀取 元素節點的內容是使用 innerHTML, 畢竟 文本和 標籤 都能獲取，比較方便。
• 和 DOM 操做方法相比，可使用更少的代碼添加大量的新標籤,速度比 DOM 操做更快。(這個不知道是否是更快)
• 當須要移除元素中的全部內容時，它更簡單（直接設置一個空字符串便可）。

缺點:

• 設置元素的 innerHTML 將會刪除全部該元素的後代並 替代 (也就是元素裏面的全部DOM節點都須要從新被解析和重建) 。
• 設置 innerHTML 不會自動的附件事件句柄到新的元素，須要你自行跟蹤處理它們，並手工添加它們。也就是說須要從新獲取元素並綁定事件函數。
• 即便使用 += 如 innerHTML = innerHTML + 'html' ，舊的內容仍然會被替換掉；整個innerHTML內容被從新解析並構建成元素，所以它的速度要慢得多；
• innerHTML不提供驗證，所以咱們可能會在文檔中插入有效的和破壞性的HTML並將其中斷。並且在某些瀏覽器裏還會有潛在的內存泄露風險。

【譯文】在JavaScript裏面使用InnerHTML的缺點是什麼

insertAdjacentHTML()

1. 在 MDN 上， 使用 innerHTML += 時推薦使用該方法。Firefox 8.0+ 才被支持。其餘的支持度很好。
2. 它不會從新解析它正在使用的元素，所以它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接innerHTML操做更快。
3. 還有 insertAdjacentElement() (它不只會將引用的元素添加到指定的位置，並且還會將元素從文檔中的原始位置移除。這是一種在 DOM 中移動元素的簡單方法) 和 insertAdjacentText()。insertAdjacentText 和 innerText 相識類似，都是插入純文本，都會把 HTML 解析爲 文本。

使用方法

三個方法的都是有兩個參數。position 和 ele ( insertAdjacentText 方法 是 text )

element.insertAdjacentHTML(position, ele)

• position: 表示相對於所述位置element; 必須是如下字符串之一：

  • beforebegin : element自己以前。
  • afterend : element自己以後。
  • afterbegin :就在element第一個孩子節點以前。
  • beforeend : 在的element最後一個孩子節點以後的內。
• ele : 要被解析爲HTML或XML,並插入到 DOM 樹中的字符串。對於 insertAdjacentElement()來講 ,參數能夠是 元素引用。insertAdjacentText() 是 文本字符串。

<h3>insertAdjacentElement</h3>
    <div>
        <p style="border:2px solid red">我是 p 標籤</p>
    </div>
    <script type="text/javascript">
        let p = document.getElementsByTagName('p')[0];
        let ht = `<p>beforebegin，插入 HTML</p>`;
        p.insertAdjacentHTML('beforebegin',ht);
        p.insertAdjacentHTML('afterend',`<p>afterend，插入 HTML</p>`);
        p.insertAdjacentHTML('afterbegin',`<p>afterbegin，插入 HTML</p>`);
        p.insertAdjacentHTML('beforeend',`<p>beforeend，插入 HTML</p>`);
        
        // insertAdjacentElement(), 第二個參數能夠是元素引用或 HTML 字符串
        // 這是一種在 DOM 中移動元素的簡單方法
        let d = document.querySelector('div');
        let h = document.querySelector('h3');
        d.insertAdjacentElement('afterend',h)
    </script>

參考和引用

MDN
JavaScript之DOM-2 讀取和修改節點信息(節點信息、元素的內容、屬性)
8 個你不知道的 DOM 功能