前端js学习笔记-DOM1

b站黑马教程js191-245集笔记，Vue.js是一套用于构建用户界面的渐进式框架，是目前流行的三大前端框架之一

DOM

• 获取元素节点
  • DOM方法
    • document.getElementByID( )
    • document.getElementByTagName( )
    • document.getElementByClassName( )
    • document.querySelector( )
    • document.querySelectorAll( )
    • HTML5新增的方法
    • document.body
    • document.html
    • 获取body/html特殊元素
  • 利用节点层级关系
    • 利用父子 兄弟关系
• 事件基础
  • 鼠标事件
    • onclick
    • onmouseover
    • onmouseout
    • onfocus
    • onblur
    • onmousemove
    • onmouseup
    • onmousedown
• 操作元素
  • 改变元素内容
    • element.innerText
      • 去除html标签，同时空格和换行也会去掉
    • element.inner HTML
      • 包括html标签，保留空格和换行；
  • 改变元素属性
    • html自带属性
      • src,href,alt,title,表单属性，如type，value，checked，selected，disabled等
    • css样式属性
      • 如element.style.display=’block‘
        • 改动较少时
      • 如element.className=' '
        • 改动较多时，可以另起类名存储改动后的样式，通过js调用类名；
  • 自定义属性
    • 获取属性值
      • element.属性
        • 获取内置属性，如src等
      • element.setAttribute('属性名')
        • 获取我们自定义的属性
      • H5规定自定义属性以data-开头，如’data- index‘，如何让利用H5获取自定义的属性？
        • element.dataset.index
        • element.dataset['index']
        • 支持ie11以上
    • 移除属性
      • element.removeAttribute(’属性名‘)
• 节点操作
  • 获取元素通常使用的两种方式
    • DOM方法
      • document.getElementByID( )
      • document.getElementByTagName( )
      • document.getElementByClassName( )
      • document.querySelector( )
      • document.querySelectorAll( )
    • 利用节点层级关系
      • 利用父子 兄弟关系
  • 节点的基本属性
    • nodeType（节点类型）
      • 1元素节点
        • 常用
      • 2为属性节点
      • 3为文本节点
        • 包括换行符等
    • nodeName节点名称
    • nodeValue节点值
  • 节点层级
    • 获得node节点的父级节点
      • node.parentNode
        • 返回的是最近的一个父级节点
        • 无父级时返回null
    • 获得parentNode的子节点
      • parentNode.childnodes
        • 返回值包含元素节点。文本节点和属性节点，很少用；
      • parentNode.children
        • 只返回元素节点，且各浏览器支持，常用！
      • 如何获取第一个元素节点
        • parentNode.firstChild
          • 返回第一个子节点，包含文本和属性节点；
        • parentNode.firstElementChild
          • 返回第一个元素子节点，但只兼容ie9以上版本
        • parentNode.children[0]
          • 第一个元素节点，且兼容性好，常用
      • 如何获取最后一个元素节点
        • parentNode.lastChild
          • 返回最后一个子节点，包含文本和属性节点；
        • parentNode.lastElementChild
          • 返回最后一个元素子节点，但只兼容ie9以上版本
        • parentNode.children[parentNode.children.length-1]
          • 最后一个元素节点，且兼容性好，常用
    • 兄弟节点
      • 下一个兄弟节点
        • node.nextSibling
      • 上一个兄弟节点
        • node.previousSibling
      • 下一个兄弟元素节点
        • node.nextElementSibling
          • 只兼容ie9以上版本
      • 上一个兄弟元素节点
        • node.previousElementSibling
          • 只兼容ie9以上版本
      • 如何解决兼容性问题？
        • 封装函数
  • 动态节点修改
    • 创建节点
      • document.createElement(' ')
    • 添加节点
      • node.appendChild(' ')
        • 加父节点的子节点末尾
      • node.insertBefore(child,指定元素)
        • 加载父节点的指定子节点前面
    • 删除节点
      • node.removeChild（ ）
    • 复制节点
      • node.cloneNode( true or false)
        • true为深度拷贝，包含节点本身及立面的所有子节点
        • false为浅层拷贝，只复制节点本身，不包含子节点