《DOM启蒙》笔记

leeyang
632 阅读4分钟

DOM启蒙

术语

  • reflow(回流) 指代文档中部分或全部内容重新绘制图像

笔记

  • DOM是由javascript节点对象组成的层次结构(树)
  • 节点对象类型(类型常数存在于Node对象中)
    • ELEMENT_NODE 1
    • TEXT_NODE 3
    • COMMENT_NODE 8
    • DOCUMENT_NODE 9
    • DOCUMENT_TYPE_NODE 10
    • DOCUMENT_FRAGMENT_NODE(文档片段节点) 11
    • ...
  • innerHTML、outerHTML、textContent为标准属性, innerText和outerText不属于标准属性，但大都可用。
  • innerHTML的内容不包括所属对象所指代的元素，而outerHTML包括。
  • innerText会识别css，不会获取看不见的元素的文本，而textContent会全部获取。
  • insertAdjacentHTML方法可以用于创建和精确插入元素。
  • innerHTML和insertAdjacentHTML方法都可以把文本转变为节点。
  • 在最新的规范里(2018-12-5)cloneNode方法的参数默认为false，即浅复制（不复制子元素）。
  • document.defaultView可以返回JS环境中的全局对象，（在浏览器中的会是window）。
  • 元素的getBoundingClientRect()方法可以获取元素在视区中的尺寸。
  • offsetParent找不到css属性position的值为static的元素的时候，就会把body作为offsetParent，offsetLeft和offsetTop就会把body的margin计算进去，所以最好把body的margin置为0，或者把body的position值换成不是static的。
  • NodeList、HTMLCollection之类的对象并不是数组，而是类似数组的类数组(key值一般为数值，又是从0开始计)，这些类数组一般都是实时列表，可以通过将他们转换为数组，以获取一个快照，不与实时DOM进行绑定，而且还可以使用数组的一些方法。转换方法:Array.prototype.slice.call(document.links);
  • 建议元素属性的操作（增删改查）都使用方法进行操作。可以使用hasAttribute()方法进行判断是否存在某属性。
  • 类属性的获取可以使用元素的classList属性获取实时列表，并且这个列表是只读的。但是可以通过add()、remove()、contains()、toggle()进行增删查改。toggle()方法可以让某个值存在时被删除，缺失时添加。
  • 元素的dataset属性可以快速获取data-*的元素属性。并且可以通过直接修改dataset对象的属性来修改值。如elm.dataset.fooFoo = 'goo'。
  • 可以使用元素的matchs()方法来验证某元素是否被获取。
  • document对象里面有许多预定义的元素节点选取列表。
    • document.all 文档所有元素
    • document.forms 文档所有表单
    • document.images 文档所有图片
    • document.links 文档所有链接
    • document.scripts 文档所有脚本
    • document.styleSheets 文档所有<link>和<style>
  • 使用元素的disable属性可以控制样式表的有效性。但这个属性只能在js中设置，设置在标签上会使样式表无效。
  • 事件流程可分成两部分，一部分为捕获阶段，另一部分为冒泡阶段，先是所有可以捕获该事件的元素全部捕获完事件后再进行冒泡阶段。
  • 建议通过addEventListener()方法来设置触发事件，因为通过这种方式可以把事件流程分为捕获阶段(把第三个参数设置为true)，冒泡阶段(false)，而且在同一事件的同一阶段可以有多个事件处理（按照代码位置确定执行顺序）（但个人感觉还不如在一个事件处理里面调用多个函数）。
  • 使用event.preventDefault()可以撤销浏览器的默认事件。
  • 使用event.stopPropagation()可以终止事件流程。
  • 使用event.stopImmediatePropagation()可以终止事件流程和相同目标上的其他事件。
  • 通过document.createEvent()创建自定义事件的方法在标准中已被废弃(2018-12-11)，不建议使用。
  • 通过getComputedStyle()获取计算样式后的元素的样式。

总结一些操作(以下node为节点对象)

  • 元素节点的操作
    • 获取
      • document.getElementById()
      • document.getElementsByName()
      • document.getElementsByTagName()
      • document.getElementsByClassName()
      • document.querySelector()
      • document.querySelectorAll()
    • 创建
      • document.createElement()
    • 添加
      • node.appendChild()
    • 删除
      • node.removeChild()
  • 元素属性的操作
    • 获取
      • node.getAttribute()
    • 是否包含
      • node.hasAttribute()
    • 设置
      • node.setAttribute()
    • 移除
      • node.removeAttribute()
  • 元素自定义属性(data-*)的操作
    • 获取
      • node.dataset
      • node.dataset.mynameLast
    • 设置
      • node.dataset.firstName = 'hhha';
    • 删除
      • delete node.dataset.firstName;
  • 元素行内样式的操作
    • 获取
      • node.style
      • node.style.color
      • node.style.getProperty()
    • 设置
      • node.style.setProperty()
      • node.style.color = 'white';
    • 删除
      • node.style.removeProperty()
  • 元素class的操作
    • 获取
      • node.classList
    • 添加
      • node.classList.add()
    • 是否包含
      • node.classList.contains()
    • 删除
      • node.classList.remove()
    • 有则删，无则添
      • node.classList.toggle()
  • 元素宽高
    • 获取(padding + content)
      • node.clientWidth
      • node.clientHeight
    • 获取(padding + content + border)
      • node.getBoundsClientRect().width
      • node.getBoundsClientRect().height
      • node.offsetWidth
      • node.offsetHeight
  • 元素边框宽度
    • 获取
      • node.clientLeft
      • node.clientTop
  • 元素位置
    • 获取(相对offsetParent)
      • node.offsetLeft
      • node.offsetTop
  • 滚动条的操作
    • 获取宽高
      • node(window).scrollWidth
      • node(window).scrollHeight
    • 获取和设置滚动的位置
      • node(window).scrollLeft (= 100)
      • node(window).scrollTop (= 100)
      • node(window).scrollTo()
      • node(window).scrollBy()
      • node.scrollIntoView()
  • 焦点的操作
    • 获取
      • document.activeElement //当前焦点所在的元素
    • 设置
      • node.focus()
    • 测试是否拥有焦点
      • node.hasFocus()
avatar
文章
阅读
粉丝