对 原生 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 功能