对原生 js 的学习和积累

最新推荐文章于 2021-03-23 14:45:15 发布

三白学习前端

最新推荐文章于 2021-03-23 14:45:15 发布

阅读量202

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_39085060/article/details/104064448

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript 原生方法学习积累

节点属性的设置和获取

属性设置

可以直接在标签上设置

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

通过 element.setAttribute(‘属性名’,‘属性值’)，设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

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

获取属性的两种方法

通过 element.getAttribute(‘属性名’)，返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 “” （空字符串）；

element.getAttribute('data')  // 2020

通过 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

NamedNodeMap

insertAdjacentHTML( ) 和 innerHTML 的区别

innerHTML

优点:

通常读取元素节点的内容是使用 innerHTML, 毕竟文本和标签都能获取，比较方便。
和 DOM 操作方法相比，可以使用更少的代码添加大量的新标签,速度比 DOM 操作更快。(这个不知道是不是更快)
当需要移除元素中的所有内容时，它更简单（直接设置一个空字符串即可）。

缺点:

设置元素的 innerHTML 将会删除所有该元素的后代并替代 (也就是元素里面的所有DOM节点都需要重新被解析和重建) 。
设置 innerHTML 不会自动的附件事件句柄到新的元素，需要你自行跟踪处理它们，并手工添加它们。也就是说需要重新获取元素并绑定事件函数。
即使使用 += 如 innerHTML = innerHTML + 'html'，旧的内容仍然会被替换掉；整个innerHTML内容被重新解析并构建成元素，因此它的速度要慢得多；
innerHTML不提供验证，因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断。而且在某些浏览器里还会有潜在的内存泄露风险。

【译文】在JavaScript里面使用InnerHTML的缺点是什么

insertAdjacentHTML()

在 MDN 上，使用 innerHTML += 时推荐使用该方法。Firefox 8.0+ 才被支持。其他的支持度很好。
它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
还有 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>