DOM文档对象模型

创建

createElement('标签名')创建一个节点

createTextNode()

createDocumentFragment() 这个可能比较陌生,根据MDN文档 DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面[回流]（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

添加

innerHTML 直接更改里面的内容,修改结构

appendChild子节点添加到父节点,成为最后一个子节点

insertBefore(newEl,refEl)在参考节点前插入节点

获取

querySelector('css选择器')返回首个匹配的元素,没有为null

querySelectorAll('css选择器')获取全部

getElementById()

getElementsByTagName/ClassName/Name

document.body / documentElement/ all[]

更新

innerHTML

innerText,textContent 和上面的区别是,自动编码,保证无法设置任何HTML标签

.style 获取对应css属性

删除

需要获得要删除的节点及父节点,调用父节点的removeChild(子节点)来删除

同时为了内存,记得删除子节点的引用

也来一道算法二分查找,利用分界线的思想,l指向小于目标元素的位置,r指向大于等于目标元素的位置,直到二者相遇,才停止二分查找的过程,具有O(logn)复杂度

const bs = function (arr, value) {
  let l = 0,
    r = arr.length;
  while (r - l > 1) {
    let mid = (l + r) >> 1;
    if (arr[mid] >= value) {
      r = mid;
    } else {
      l = mid;
    }
  }
  return r;
};

快速排序,js实现

var quickSort = function (arr, l, r) {
  if (l > r) {
    return;
  }
  let tmp = arr[l];
  let i = l,
    j = r;
  while (i != j) {
    while (arr[j] >= tmp && j > i) j--;
    while (arr[i] <= tmp && j > i) i++;
    if (j > i) {
      // let t = arr[i];
      // arr[i] = arr[j];
      // arr[j] = t;
      [arr[j], arr[i]] = [arr[i], arr[j]];
    }
  }
  // arr[l] = arr[i];
  // arr[i] = tmp;
  [arr[l], arr[i]] = [arr[i], arr[l]];
  quickSort(arr, l, i - 1);
  quickSort(arr, i + 1, r);
};
let arr = [1, 3, 5, 3, 1, 6, -1];
quickSort(arr, 0, arr.length - 1);
console.log(arr);

参考MDN 链接 developer.mozilla.org/zh-CN/docs/…

前端与JS ｜ 青训营笔记

DOM文档对象模型

创建

添加

获取

更新

删除

前端与JS ｜青训营笔记