js语法Dom节点

这是一篇关于js语法Dom节点的思维导图。

node

• node(节点)访问关系包括元素(标签),注释,空文档,换行
  • 获取父节点
    • 节点.parentNode
  • 获取下一个兄弟节点
    • 获取下一个节点,兼容ie678写法下一个兄弟节点 =节点.nextElementSibling  || 节点.nextSibling
    • 节点.nextSibling
      • 火狐,谷歌.IE9+都表示下一个节点(包括注释/空文档/换行)
      • IE678:指下一个元素节点(标签)
    • 节点.nextElementSibling
      • 火狐,谷歌.IE9+下指下一个元素节点(标签)
      • IE678没有这个属性
  • 前一个节点
    • 节点.previousSibling
    • 节点.previousElementSibiling
  • 第一个子节点
    • firstChild
    • firstElementChild
  • 最后一个子节点
    • lastChild
    • lastElementChild
  • 获取所有的子节点
    • childNodes(标准属性,获取所有内容/元素/属性/文本)
      • 用法:子节点数字=父节点.childNodes;
      • 火狐和谷歌等高版本会把换行也看成子节点
    • children(非标准属性)返回子元素节点的集合
      • 用法:子节点数组=父节点.chidren;
      • 只返回html节点,文本节点都不返回
      • IE678中包含注释节点
  • nodeType属性
    • nodeType ===1
      • 表示的是元素节点(标签)
    • nodeType ===2
      • 表示是属性节点
    • nodeType ===3
      • 表示是文本节点
    • nodeType ===8
      • 注释节点
• node(节点)内容操作
  • 节点.innerHtml
    • 识别标签
  • 节点.innerText
    • 不识别标签
  • 节点.value
    • 表单元素的值
• node(节点)属性操作
  • 获取节点属性值
    • 方式二元素节点.setArr
    • 方式二元素节点.getArrtibute('属性名称')
  • 设置节点属性
    • 方式一节点.属性名="属性值"
    • 方式二节点.setAttaibute("属性名","新的属性值")
  • 删除节点属性
    • 元素.removeAttaibute("要删除的属性")
• node(节点)增--删---改--查
  • 创建节点
    • document.creatElement('li')创建一个li标签
  • 插入元素节点
    • 第一种:父元素.append(dom元素)
      • 插入到父元素内部的末尾
      • 同一个dom对象只能执行一次插入
    • 第二种:父节点.insertBefore(插入的节点,作为参考的节点)
      • 插入的节点在参考节点的前面
  • 删除节点
    • 父节点.removeChild(子节点)
      • node1.parentNode.removeChild(node1) 删除自己
  • 复制/克隆节点
    • 节点.cloneNode()
      • 带参数true
        • 复制节点和里面所有的子节点
      • 带参数false或者不带参数
        • 只复制自己,不复制子节点