DOM思维导图

DOM
  定义
    document，object，model：文档对象模型
    DOM的核心：document对象
    DOM的作用：可以访问和操作XML和HTML文档中的标签、标签的属性、节点的属性和方法
    在DOM中将整个HTML文档看作是一个倒立的树（树状结构）：一个HTML页面就是一个DOM对象，是一棵DOM HTML树
      DOM HTML树的根节点：html
      元素（element）：html文档中的标签
      节点（Node）：html文档中的内容
    DOM树中节点的分类
      标签节点：所有的标签
      属性节点：标签的属性---内置属性、自定义属性
      文本节点：标签中的文本、换行、空格等
      注释节点：<!-- 注释内容 -->
    基本概念
      根节点：根节点是html，有且只有一个
      子节点：某个节点的下一级节点
      父节点：某个节点的上一级节点
      兄弟节点：拥有相同父节点的节点
  通过document对象来操作html
    getElementById('id属性值')：通过标签的id属性来获取标签
    getElementsByName('name属性值')：通过标签的name属性来获取标签,返回值是NodeList
    getElementsByTagName('标签名')：通过标签名来获取标签
    getElementsByClassName('class属性值')：通过标签的class属性来获取标签，返回的类型是HTMLcollection
    querySelector('#id')：返回一个指定id属性值的标签
      querySelector('.class')：返回第一个指定class属性的标签
      querySelector('标签名')：返回第一个指定标签名的标签
    querySelectorAll('.classs属性值')：返回所有指定class属性值的标签，返回值的类型是NodeList
  document对象的属性
    document.body：返回文档的body元素
    document.documentElement：返回文档的html元素
    document.forms：返回文档的form表单对象
  element对象的属性和方法
    children属性：用来获取某个元素的子元素
    强调：HTMLCollection和NodeList的区别
      HTMLCollection：通过document对象或element对象调用getElementByClassName()方法、getElementByTagName()方法，children属性等返回的对象集
      NodeList：document对象调用getElementByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象
      HTMLCollection对象用于元素操作
      NodeList对象用于节点操作
  元素的属性和方法
    属性
      innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）
      innerText：设置和返回起始标签和结束标签之间的文本（纯文本，不能解析标签，不识别标签）
      textContent：设置和返回指定节点的文本内容（不识别换行）
    方法
      document.write('html内容'):在文档中写入指定的内容
      document.writeln('html内容'):向文档中写入指定内容后换行（其实并没有换行）
  标签的属性
    attributes：返回标签的所有属性集合
    setattribute(name,value)：设置标签的属性值。参数name表示属性名，参数value表示属性值
    getAttribute(name)：获取标签的某个属性值。参数name代表属性名
    removeAttribute(name)：删除标签的某个属性（不是属性值）。参数name代表属性名
  元素样式
    元素名.style.样式属性名
    注意：样式属性名在使用时需要将单词之间的"-"删除，将第二个单纯的首字母大写
    HTML5对象样式的操作
      一个元素的class属性可以有多个值:作用是在保留原有样式的基础上添加新的样式
      如何在JS程序运行过程中动态的添加class属性值
        classList属性：是元素的class属性的一个列表
    classList属性提供的方法和属性
      属性：length---某个标签的class属性值的个数（即有多少个类名）
      方法
        add('字符串')：给元素添加类名，一次只能添加一个
        remove('字符串')：将元素的类名删除。一次只能删除一个
        toggle('字符串')：若类名存在则删除，不存在则添加
        item(index)：根据index来获取元素的类名
        contains('类名')：判断元素是否含有给定的类名，若有返回true，没有则返回false
  DOM中节点的操作
    采用操作节点的方式来操作页面中的元素
      获取节点是使用的属性
        换行符、空格等也是节点
        firstChild：获取当前节点的首个子节点
        nextSibiling：返回同一树层级中指定节点之后紧跟的节点
        lastChild：访问当前节点的最后一个子节点
        previousSibling：返回同一层级中指定节点的前一个节点
        nodeName：节点的名称
        nodeValue：节点的值
        nodeType：节点类型
        parentNode：当前节点的父节点
        childNodes：当前节点的所有子节点
          childNodes属性和children属性的区别
            相同的
              都可以获取子元素；都是数组可以循环遍历，但是不能用push添加元素
            不同点
              childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList
              children返回的是元素节点（标签），返回值类型是HTMLCollection
        getAttribute('id')：用来获取元素的id属性值
        getAttributeNode('id')：用来获取元素的id属性（属性节点）
      追加节点
        创建元素节点：document.createElement()
        在指定节点的末尾追加节点：document.appendChild()。***不需要获取父元素
        创建文本节点：document.createTextNode()
        在指定节点之前添加一个节点：document.insertBefore(newNode,node):将节点newNode插入到节点node之前。***需要获取父元素！！！