js dom操作总结

Posted 2020-11-22 lyt0207

ES + DOM + BOM
1 DOM 文档对象模型 Document object model
dom树

               html
                |
        head        body
         |           |
       meta title   div 
2 事件-----行为
  三要素 事件类型(具体什么行为)、事件源（谁身上发生该行为）、事件处理

  js程序如何处理事件
     事件源.事件 = 事件处理函数 

DOM
元素操作
创建元素
    1 document.write() （一般不用）
    2 innerHTML
    3 document.createElement
增加元素
    appendChild()
    append() (有兼容问题)
    insertBefore()
删除元素
    removeChild()(知道父元素)/remove()(自杀)
修改元素
    修改属性 
         .src/.href/.title/...(标准属性)
         setAttribute()/getAttribute()/removeAttribute()(标准属性和自定义属性都可以操作)
         也可以用data-*的方式在html标签上自定义属性，或者使用javascript 的dataset 设置自定义属性，读取的时候也是通过dataset对象，使用”.”来获取属性
    修改元素内容
        innerHTML(支持标签)/innerText(不支持标签)
    修改表单元素
        value/type/disabled/checked/...
    修改元素样式 
        style.***
        className 
查找元素  
  1 api 

  2 h5新增api

  3 关系属性
    parentNode
    children
    previousElementSibling (文本元素)
    nextElementSibling (文本元素)
事件操作
      事件源.事件 = 事件处理函数 
      onclick
      onmouseover/onmouseout
      onfocus/onblur
      onmousedown 
      ...