rikako-note/javascript/dom.md

dom

• js中dom模型的简介

  • js的dom中常用对象：
    • window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
      • 返回窗口大小
      • 操作导入window中的document
      • 存储特定页面的数据
      • 在当前document中添加handler
    • navigator：可以通过该对象来检索浏览器的状态和身份信息
    • document：代表载入window的html文档
  • dom树形结构：
    • root node：在dom树结构中，根节点总是html节点
    • 子节点：直接位于另一个节点内的节点
    • 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
    • 父节点：如果一个节点直接包含另一个节点
    • 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点

• document api查找节点元素

  • querySelector：
    • document.querySelector()会返回第一个匹配的元素

      document.querySelector("p")
      

  • querySelector:
    • 返回所有满足条件的元素，按照NodeList的形式返回

      document.querySelectorAll("p")
      

• document api创建新元素

  • document.createElement:

    let node=document.createElement('p')
    let p_node=document.querySelector('p')
    p_node.apendChild(node)
    

  • node.appendChild:通过该方法可以为节点插入新的子元素
  • document.createTextNode：创建新的文本节点（类似与#text的子节点）

• document api 移除元素

  • parentNode.removeChild：移除子元素

    let par_node=document.querySelector("div")
    let child_node=document.querySelector("div > p")
    par_node.removeChild(child_node)
    

  • childNode.remove:对子元素可以直接调用remove

    let child_node=document.querySelector("div > p")
    child_node 
    

• js修改css样式

  • 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式

    let node=document.querySelector("p")
    node.style.background="grey"
    

  • 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式

    let node=document.querySelector("p")
    node.setAttribute('class','white-style')