【JS】原生JS操作DOM的各种姿势

1. 获取单个DOM元素

   document.querySelector('.element'); // 通过class获取
   document.querySelector('#element'); // 通过id获取
   document.querySelector('div'); // 通过标签获取
   document.querySelector('[name="userName"]'); // 通过属性名获取
   document.querySelector('div + p > span'); // 通过标签组合获取

2. 获取DOM元素集合，并将伪数组转化为数组

   const arr = [...document.querySelectorAll('div')];
   // or
   const alsoArr = Array.from(document.querySelector('div'));

3. 元素的局部搜索

   const container = document.querySelector('#container');
   container.querySelector('#target');

4. 添加DOM元素

   /**
   * 旧姿势
   **/
   const link = document.createElement('a');
   link.setAttribute('href', '/home');
   link.className = 'active';
   link.textContent = '首页';
   document.body.appendChild(link);
   
   /**
   * 新姿势
   **/
   document.body.insertAdjacentHTML(
     'beforeend',
     '<a href="/home" class="active">首页</a>'
   );
   
   document.body.insertAdjacentHTML(
     'beforeend',
     document.createElement('a')
   );
   
   document.body.insertAdjacentText('afterbegin', 'cool');

5. 移动DOM元素

   const h1 = document.querySelector('h1');
   const h2 = document.querySelector('h2');
   h1.insertAdjacentElement('afterend', h2);

6. 替换DOM元素

   /**
   * 旧姿势
   **/
   parentNode.replaceChild(newNode, oldNode);
   
   /**
   * 新姿势
   **/
   oldElement.replaceWith(newElement);

7. 移除DOM元素

   /**
   * 旧姿势
   **/
   const target = document.querySelector('#target');
   target.parentNode.removeChild(target);
   
   /**
   * 新姿势
   **/
   const target = document.querySelector('#target');
   target.remove();

8. 用HTML字符串创建DOM元素

   const createSingleElement = (domString) = > {
     const parser = new DOMParser();
     return parser.parseFromString(domString, 'text/html').body.firstChild;
   }
   
   const element = createSingleElement('<a href="./home">首页</a>');

9. DOM检查

   /**
   *<div class="say-hi">Hello DOM!</div>
   **/
   const div = document.querySelector('div');
   div.matches('div'); // true
   div.matches('.say-hi'); // true
   div.matches('#hi'); // false
   
   /**
   * <div><h1>Title</h1><</div>
   * <h2>Subtitle</h2>
   **/
   const $ = document.querySelector.bind(document);
   const div = $('div');
   const h1 = $('h1');
   const h2 = $('h2');
   div.contains(h1); // true
   div.contains(h2); false

10. 判断两个元素的位置关系

    /**
    * 返回值的定义：
    * 1：两个元素不在同一个文档内
    * 2：otherElement在element之前
    * 4：otherElement在element之前
    * 8：otherElement包含element
    * 16：otherElement被element所包含
    * 如果有多个位置满足的则数值相加
    **/
    element.compareDocumentPosition(otherElement)

11. DOM观察者

    //选择一个需要观察的节点
    var targetNode = document.getElementById('some-id');
    
    // 设置observer的配置选项
    var config = { attributes: true, childList: true, subtree: true };
    
    // 当节点发生变化时的需要执行的函数
    var callback = function(mutationsList, observer) {
        for(var mutation of mutationsList) {
            if (mutation.type == 'childList') {
                console.log('A child node has been added or removed.');
            }
            else if (mutation.type == 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    };
    
    // 创建一个observer示例与回调函数相关联
    var observer = new MutationObserver(callback);
    
    //使用配置文件对目标节点进行观测
    observer.observe(targetNode, config);
    
    // 停止观测
    observer.disconnect();

参考资料：

1. mp.weixin.qq.com/s/riyUf0lW2…
   
2. www.jianshu.com/p/90f042c9e…