获取body

document.body

获取HTML根节点

  • 通过document对象

document.documentElement

  • 通过元素，同样的方法也可以获取body

NODE.ownerDocument.documentElement

defer和async

  • 脚本运行时机的属性，只对带有src属性的script标签起作用
  • 布尔值属性，添加即为true e.g. <sciprt defer src='./index.js'></script>
  • 同时存在时，async起作用

defer： 让浏览器把脚本的执行推迟到文档完全加载和执行之后
async：让浏览器尽早的运行脚本，但是不会阻塞文档的解析

Node.insertBefore

[Node.insertBefore](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore)方法在指定的参考节点前插入一个有指定父级节点的子节点，返回插入元素本身。一般用法为
parent.insertBefore(newNode, anchorNode)
如果参考节点anchorNode为null，则insertBefore方法等价于Node.appendChide即插入节点会直接插入到父节点的最后一个。这里需要注意

referenceNode 引用节点不是可选参数——你必须显式传入一个 Node 或者 null

例子：

  1. 没有 insertAfter()。不过，可以使用 insertBefore 和 Node.nextSibling 来模拟它。

在前一个例子中，可使用下面代码将 sp1 插入到 sp2 之后：

  1. parentDiv.insertBefore(sp1, sp2.nextSibling);
  1. 在第一个子元素的前面插入一个元素，可使用 firstChild 属性。
    1. //插入节点之前，要获得节点的引用
    2. var parentElement = document.getElementById('parentElement');
    3. //获得第一个子节点的引用
    4. var theFirstChild = parentElement.firstChild;
    5. //创建新元素
    6. var newElement = document.createElement("div");
    7. //在第一个子节点之前插入新元素
    8. parentElement.insertBefore(newElement, theFirstChild);

querySelector(All)、closest、 matches

querySelector(All)

querySelectorAll如果没有命中任何目标，则返回的NodeList的length属性为0
Element类和document类都实现了querySelector和querySelectorAll，当在元素上调用时，只返回后代中的元素

closest

Element.closest相当于反着用querySelector，他会从当前元素开始向上匹配传入的选择器，找到最近祖先元素，如果没有匹配到，则返回null

  1.  <div id='box1'>
  2.       <div id='box2'>
  3.         <div id='box3'>
  4.           <span id='inner'></span>
  5.         </div>
  6.       </div>
  7.     </div>
  1.  const tar = document.querySelector('#inner')
  2.  console.log(tar.closest('#box1, #box2, #box3'))
  3. //HTMLDivElement #box3

matches

Element.matches返回布尔值，用来检查元素是否与选择器匹配。

function isSubEl(el){
    return e.matches('span.sub, span.offspring')
}

知识点

普及一下CSS选择符语法

  • div

任意<div>元素

  • #nav

id为nav的元素

  • .warning

class属性包含warning的元素

  • p[data-type="demo"]

带有属性的p标签

  • *[name='x']

任何带有 name=’x’ 属性的元素

  • span.fatal.error

class属性中包含fatal和error的span元素

  • span[name='demo'].fatal

包含属性name为demo且 class包含fatal的span

  • #log span

id为log 元素后代中的span元素

  • #log>span

id为log元素直接子元素中的span

  • body>h1:first-child

body下的第一个h1

  • img + p.caption

紧跟img后的带有caption class属性的p元素

  • button, input[type='button']

“,”分割，意味着命中任意一个选择器的都匹配，即所有的button 和 input带有type=’button’的元素

stopImmediatePropergation、stopPropergation

stopPropergation()用来阻止事件在捕获和冒泡阶段的继续传播
stopImmediatePropergation()与上面的方法相似，我们都知道，同一个元素上绑定的多个事件，是按照绑定的顺序来执行的，与上面方法不同的是stopImmediatePropergation()会阻止在同一个对象上绑定的后续事件处理程序的执行

<div>
  <p>paragraph</p>
</div>
<script>
  const p = document.querySelector('p')
            p.addEventListener("click", (event) => {
              alert("我是p元素上被绑定的第一个监听函数");
            }, false);

            p.addEventListener("click", (event) => {
              alert("我是p元素上被绑定的第二个监听函数");
              // event.stopImmediatePropagation();
              // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
            }, false);

            p.addEventListener("click",(event) => {
              alert("我是p元素上被绑定的第三个监听函数");
              // 该监听函数排在上个函数后面，该函数不会被执行
            }, false);

            document.querySelector("div").addEventListener("click", (event) => {
              alert("我是div元素,我是p元素的上层元素");
              // p元素的click事件没有向上冒泡，该函数不会被执行
            }, false);
</script>
//第三个监听事件处理函数和父元素的事件处理函数都不会执行

事件处理程序中的handleEvent

派发自定义事件 dispatchEvent()、CustomEvent

EventTarget.dispatchEvent

EventTarget.dispatchEvent()向一个指定的目标派发事件，同步调用处理函数。
用法：
target.dispatch(event)
参数：

  • target：触发和用来初始化的目标对象
  • event：事件对象

    CustomEvent

    构造方法CustomEvent创建一个新的customEvent对象
    用法：
    event = new CustomEvent(type, playload)
    参数：
    type：event名称的字符串
    playload：
    detail：与event相关的数据
    bubbles：布尔值，表示是否冒泡，默认为false
    cancelable：布尔值，表示是否能被取消，默认为false
    composed：布尔值，默认为false，指示事件是否会在影子DOM根节点之外触发侦听器。
<style>
  .box {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    display: none;
  }
</style>
<div>
  <button id='btn'>触发自定义事件</button>
  <div class='box'>隐藏的窗口</div>
</div>
<script>
  const trigger = document.querySelector('#btn')
  const box = document.querySelector('.box')
  const customEvent = new CustomEvent('show-box',{detail:{
    show:true
  }})
  trigger.addEventListener('click',function(e){
    box.dispatchEvent(customEvent)
  },false)
  box.addEventListener('show-box',function(e) {
    const {detail} = e 
    if(detail.show) {
      this.style.display = 'block'
    }
  })
</script>