DOM操作注意点整理-原创手记-慕课网

获取元素位置

getBoundingClientRect()返回一个对象，提供当前元素节点的大小、位置等信息。

#demo {
  margin: 10px;
  padding: 20px;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

<div id="demo"></div>var demo = document.getElementById("demo")var rect = demo.getBoundingClientRect()
 console.log(rect)//{  
    width:242    //元素宽度 包括边框
    height:242  //元素高度  包括边框
    x:10    //元素左上角相对于视口的横坐标
    y:10   //元素左上角相对于视口的纵坐标
    left:10  //元素左上角相对于视口的横坐标，与x属性相等
    right:252  //元素右边界相对于视口的横坐标（等于x + width）
    top:10   //元素左上角相对于视口的纵坐标，与y属性相等
    bottom:252   //元素底部相对于视口的纵坐标（等于y + height） }

让元素位于可视区域

scrollIntoView() 滚动当前元素，进入浏览器的可见区域。接受一个布尔值作为参数，默认为true。
如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐，如果为false，则底部对齐。
生效的前提是当前区域可滚动。

NodeList和HTMLCollection

相同点

都是一个类似数组的对象，成员是节点对象。不能使用pop或push之类数组特有的方法。

不同点

HTMLCollection实例都是动态集合，节点的变化会实时反映在集合中；
NodeList 实例可能是动态集合，也可能是静态集合。只有Node.childNodes返回的是一个动态集合，其他的 NodeList 都是静态集合。
HTMLCollection实例只能包含元素节点（element），不能包含其他类型的节点。
HTMLCollection没有forEach方法，只能使用for循环遍历。NodeList有forEach方法。

获取DOM

getElementsByTagName() 搜索 HTML 标签名，返回符合条件的元素，它的返回值是HTMLCollection实例。
getElementsByClassName() 根据class类名返回符合条件的元素，返回值是HTMLCollection实例。
getElementsByName() 根据name属性返回符合条件的元素，返回值是NodeList 。
querySelectorAll() 根据css选择器返回符合条件的元素，返回值是NodeList 。
querySelector() 根据css选择器返回符合条件的元素，返回值是第一个匹配的节点。
getElementById() 根据id返回符合条件的元素，

js操作css

元素节点的style属性。
元素节点的className属性，返回一个空格分隔的字符串。
元素节点的classList属性，指向一个类似数组的对象。

script标签

加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。
如果外部脚本加载时间很长，就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。但是动态生成的script标签不会阻塞页面渲染，也就不会造成浏览器假死。
所以，较好的做法是将<script>标签都放在页面底部，而不是头部。
为了解决脚本文件下载阻塞网页渲染的问题，一个方法是加入defer属性，另一个方法是加入async属性。

defer属性可以保证浏览器下载脚本文件的时候，不会阻塞页面渲染。而且可以保证执行顺序就是它们在页面上出现的顺序。
async属性可以保证脚本下载的同时，浏览器继续渲染。无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

window.requestAnimationFrame()

可以将某些代码放到下一次重新渲染时执行，最适用的场合是网页动画。

window.requestIdleCallback()

指定只有当一帧的末尾有空闲时间，才会执行回调函数。
它还可以接受第二个参数，表示指定的毫秒数。如果在指定的这段时间之内，每一帧都没有空闲时间，那么函数fn将会强制执行。

requestIdleCallback(fn, 5000);     //函数fn最迟会在5000毫秒之后执行。

回调函数的参数是一个 deadline 对象，有一个方法和一个属性：timeRemaining() 和 didTimeout。
timeRemaining() 方法返回当前帧还剩余的毫秒。这个方法只能读，不能写，一旦这个属性等于0，就把任务分配到下一轮。
didTimeout 属性会返回一个布尔值，表示指定的时间是否过期。

事件

事件捕获指的是从window到触发事件的那个节点，即自上而下的去触发事件。事件冒泡是自下而上的去触发事件。
绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

  <div id="parent">
      <div id="child"></div>
  </div>

  <script>
      var parent = document.getElementById('parent')      var child = document.getElementById("child")      window.addEventListener('click', function () {          console.log("window")
      }, false)      document.addEventListener('click', function (event) {          console.log("document")
      }, false)
      parent.addEventListener('click', function (event) {          console.log("parent")
      }, false)
      child.addEventListener('click', function (event) {          console.log("child")
      }, false)  </script>

false为冒泡，控制台打印child，parent，document，window；
true为捕获，控制台打印window，document，parent，child；
有时候我们想要阻止冒泡，使用event.stopPropagation()或event.cancelBubble = true
有时候我们想要阻止事件的默认行为，使用event.preventDefault()或者return false
如果事件不能取消，调用event.preventDefault()会没有任何效果。所以使用这个方法之前，最好用
event.cancelable属性判断一下是否可以取消。

DocumentFragment

DocumentFragment节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点。
它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多。
一旦DocumentFragment节点被添加进当前文档，它自身就变成了空节点，可以被再次使用。
注意，DocumentFragment节点本身不能被插入当前文档，是它的所有子节点插入当前文档，而不是它自身。

    <div id="box">
        <p>hello world</p>
    </div>
    <button id="add">增加</button>

    <script>
        var box = document.getElementById("box");        var docFrag = document.createDocumentFragment();        var add = document.getElementById("add")        function addP() {            var p = document.createElement('p');
            p.textContent = 'Hello World';
            docFrag.appendChild(p);            console.log(docFrag.parentNode)          //null
            console.log(docFrag.childElementCount)   //1
            box.appendChild(docFrag)            console.log(docFrag.childElementCount)    //0
        }
        add.addEventListener('click', addP, false)    </script>

自定义属性

元素可以自定义data-属性，用来添加数据。data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。
Element.dataset属性返回一个对象，可以从这个对象读写data-属性，dataset上面的各个属性返回都是字符串。

    //html
    <div id="box" data-time-stamp="123" data-time_hour="12" data-time.minute="12" data-time:minute="12"></div>
    //js
    var box = document.getElementById("box")    console.log(box.dataset)

webp

作者：tiancai啊呆
链接：https://www.jianshu.com/p/3a92f5214070