DOM-文档对象模型

DOM:Document Object Model文档对象模型
  1、DOM的核心：document对象
  2、DOM的作用：可以访问和操作XML和HTML文档中标签、标签的属性、节点的属性和方法
  3、在DOM中将整个html文档看做是一个倒立的树（树装结构）：一个html页面就是一个DOM对象，是一棵DOM HTML树
    1、DOM HTML树的根节点：html
    2、元素(Element)：html文档中的标签
    3、节点(Node)：html文档中的内容
  4、DOM树中节点的分类：
    1、标签节点：所有的标签
    2、属性节点：标签的属性 —- 内置属性、自定义属性
    3、文本节点：标签中的文本、换行、空格等
    4、注释节点：
  5、基本概念
    （1）根节点：根节点是html，有且只能有一个
     （2）子节点：某个节点的下一级节点
     （3）父节点：某个节点的上一级节点
    （4）兄弟节点：拥有相同父节点的节点
    查看元素的原型:console.log(div.__proto__)
      __proto__：表示元素的原型
  6、通过document对象来操作html页面中的元素
    1、getElementById(“id属性值”)：通过标签的id属性获取标签
    2、getElementsByName(“name属性值”)：通过标签的name属性获取标签，返回值的类型是NodeList
    3、getElementsByTagName(“标签名”)：通过标签名获取标签，返回值的类型是HTMLCollection
     4、getElementsByClassName(“class属性值”)：通过标签的class属性获取标签，返回值的类型是HTMLCollection
    5、querySelector(‘#id属性值’)：返回一个指定id属性值的标签  querySelector(‘.class属性值’)：返回第一个指定class属性值的标签  querySelector(‘标签名’)：返回第一个指定标签名的标签
     6、querySelectorAll(‘.class属性值’)：返回所有指定class属性值的标签。返回值的类型是NodeList  querySelectorAll(‘标签名’)：返回所有指定标签名的标签。返回值的类型是NodeList
  7、document对象的属性
     1、document.body：返回文档的body元素
    2、document.documentElement：返回文档的html元素
     3、document.forms：返回文档的form(表单)对象
  8、Element对象的属性和方法：在JavaScript代码中使用html的标签（Element）属性和方法
    1、children属性：用来获取某个元素的子元素
    强调：HTMLCollection和NodeList的区别
      （1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。
      （2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。
      （3）HTMLCollection对象用于元素操作
      （4）NodeList对象用于节点操作
  9、元素的属性和方法
     1、属性：
      （1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）
      （2）innerText：设置或返回元素中去除所有标签的内容（不能解析标签—-不识别标签）
      （3）textContent：设置或者返回指定节点的文本内容（不识别换行）
     2、方法：
      （1）document.write(“html内容”)：在文档中写入指定的内容
      （2）document.writeln(“html内容”)：向文档写入指定的内容后并换行
  10、标签的属性
     1、attributes：返回标签的所有属性集合
    2、setAttribute(name, value)：设置标签的属性值。参数name表示属性名，参数value表示属性值
     3、getAttribute(name)：获取标签的某个属性值。参数name代表属性名
     4、removeAttribute(name)：删除标签的某个属性。参数name代表属性名
  11、元素的样式
    1、元素名.style.样式属性名 注意：“样式属性名”在使用时需要将单词之间的’-‘删除，将第二个单词的首字母大写
    2、HTML5对象样式的操作：
       a、一个元素的class属性可以有多个值：作用是在保留原有样式的基础上添加新的样式
       b、如何在js程序运行过程中动态的添加class属性值：
         classList属性：是元素的class属性的列表
  12、classList属性提供的方法和属性
    （1）属性：length —— 某个标签的class属性值的个数（即多少个类名）
     （2）方法：
      a、add(‘字符串’)：给元素添加类名。一次只能添加一个
       b、remove(‘字符串’)：将元素的类名删除。一次只能删除一个
       c、toggle(‘字符串’)：若类名存在则删除，不存在则添加
       d、item(index)：根据index，来获取元素的类名
       e、contains（‘类名’）：判断元素是否含有给定的类名，若有返回true，没有返回false
  13、DOM中节点的操作：采用操作节点的方式来操作页面中的元素
    （1）获取节点时使用的属性：
      a、firstChild：获取当前节点的首个子节点。注意：换行符、空格等也是节点
       b、nextSibiling：返回同一层级中指定节点之后紧跟的节点
       c、lastChild：访问当前节点的最后一个子节点
       d、previousSibling：返回同一层级中指定节点的前一个节点
       e、nodeName：节点的名称
      f、nodeValue：节点的值
       g、nodeType：节点类型
         1：表示当前节点的类型是标签（元素）
         2：表示属性节点
        3：表示文本节点
      h、parentNode：访问当前元素节点的父节点
       i、childNodes：当前节点的所有子节点
        childNodes属性和children属性的区别
          （1）相同点：都可以获取子元素
          （2）不同点：  childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList  children返回的元素节点（即标签），返回值类型是HTMLCollection  getAttribute(‘id’)：用来获取元素的id属性值 getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）
  14、追加节点
    （1）创建元素节点：
       document.createElement()
     （2）在指定节点的末尾追加节点
       appendChild(newNode)
     （3）在指定节点之前添加节点
       insertBefore(newNode，node)：将结点newNode插入到节点node之前 该方法需要通过插入节点(node)的父节点来调用
     （4）创建文本节点：
       document.createTextNode()
    （5）复制节点
      cloneNode（deep）
        参数deep是boolean型。true/false true：表示深度复制（将节点及其子节点都进行复制）—- 深拷贝 false：表示浅复制（只复制节点而不复制子节点）—- 浅拷贝
    （6）删除子节点：
       removeChild（node）
        （1）参数node为要删除的节点
        （2）前提：被删除的节点必须为空（没有子节点）
    （7）判断当前节点是否有子节点
      hasChildNodes()
        返回值为false：表示没有子节点
        返回值为true：表示有子节点
    （8）替换节点
      replaceChild（newNode，oldNode）
        用newNode节点替换oldNode节点