insertBefore/appendChild

insertBefore（新元素，在谁前面插入）
appendChild（在其末尾添加新元素）

克隆

cloneNode(是否深度克隆)
克隆元素，形参为bool值，为true是进行深度克隆，不填，为浅度克隆。

文档片段

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 100px;
  10.             height: 100px;
  11.             background: red;
  12.             margin: 10px auto;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <script>
  18.         var body = document.querySelector('body');
  19.         var crea = document.createDocumentFragment()
  20.         var  div = ''
  21.         for(var i = 0 ; i < 10; i++){
  22.             div = document.createElement('div');
  23.             crea.appendChild(div);//将其保存值文档片段中，如果直接添加会让dome树重新渲染10次，
  24.             // 文档片段就像是空的div，但在页面上找不到，保存在内存中，最后一起加入页面，这样demo树就渲染啦一次，
  25.             // 更改html结构会让demo树重新渲染
  26.         }
  27.         body.appendChild(crea)
  28.     </script>
  29. </body>
  30. </html>

获取元素

querySelector/getElementBy

1： 静态获取元素 ：querySelector

  1. document.querySelector(selectors)

优点：可以以css的选择元素的方式进行获取元素
缺点：一次之能获取一个,querySelectorAll是静态获取，不会实时获取
2：动态获取元素：getElementBy

  1. var element = document.getElementById(id);

优点：可以实时获取元素，
缺点：没有第一种方法获取元素方便
getElementsByClassName的原理

  1. Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function(_className){
  2.     allElement = document.getElementsByTagName('*');
  3.     var getElementArr = [];
  4.     function trimSpace(eleName){
  5.         var reg = /\s+/g;
  6.         var newEleName = eleName.replace(reg,' ');
  7.         return newEleName;
  8.     }
  9.     for(var i = 0 ; i < allElement.length ; i++){
  10.         var lastElementStr = trimSpace(allElement[i].className).trim()       
  11.         var elementArr = lastElementStr.split(" ");
  12.         for(var j = 0 ; j < elementArr.length ; j++){
  13.             if(elementArr[j] == _className){
  14.                 getElementArr.push(elementArr[j])
  15.                 break;
  16.             }
  17.         } 
  18.     }
  19.     return getElementArr;   
  20. }
  21. console.log(document.getElementsByClassName('demo'))

其他获取元素

IMG_20200718_092726.jpg
classList这个属性下有四个方法
add() : 添加一个或多个类名
remove(): 移除一个或多个类名
contains()：判断类名是否存在 返回值为 true 和false
toggle(className,boolean)：用于添加/移除一个类名
详细解释： 依据mdn
移除一个类名，并返回一个false，如果传入类名不存在，则将此类名添加进去，并返回true。第二个参数为Boolean值，当为true时，当传入的类名不存在时，则将其添加进去并返回true，若传入的类名存在，则直接返回true，如果第二参数填入false，则会移除存在的类名，并返回false，如果传入的类名不存在则直接返回false，说白就是第二参数填true时会添加返回一个true，当类名已经存在时啥都不做返回一个true，false会删除类名返回一个false，当类名不存在时啥也不做，返回一个false

IMG_20200716_223352.jpgIMG_20200716_223324.jpg

创建元素

1：document.createElement()
用于创建一个由标签名称 tagName 指定的 HTML 元素

  1. var li = document.createElement("li");