JavaScript中的DOM

1.什么是DOM？

 1.DOM全称：Document Object Model ，文档对象模型。
 2.DOM为我们提供了用JavaScript来操作：html、xml文档的应用编程接口。
 3.DOM使得html文档形成一棵DOM树，类似于一颗家族树一样，是一层接一层的，子子孙孙。
 4.有了DOM，就是相当于拿到了当前html文档的"家谱"，参考这个"家谱"，我们就可以去操作它的每一个节点。

2.什么是节点？

 DOM 是这样规定的：
 1.整个文档是一个文档节点，并且节点之间具有层次关系。
 2.每个 HTML 标签是一个元素节点。
 3.包含在 HTML 元素中的文本是文本节点。
 4.每一个 HTML 属性是一个属性节点。
 5.HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。

3.关于节点（Node）和元素（Element）的区别

 1.首先我们观察以下代码：

    
    
    

        
1
        
2
        
3
    

 2.观察发现：

• 当打印div0下所有子元素（Element）时，获取到的就是div0下的两个标签元素和
  ，干干净净没有任何多余的成分。
  • 当打印div0下所有的子节点（Node）时，除了正常的标签，还有三个text，一个comment内容，这三个text内容其实就是
    、、

    标签后面的回车。也就是说把文字（回车）节点、注释节点也都获取到了。

     3.所以不难发现：

    • 元素是一个小范围的定义，必须是含有完整信息的结点才是一个元素，例如
      ...
      或
      ...
      等。
    • 一个结点不一定是一个元素，而一个元素一定是一个结点。
    • 节点的覆盖范围很大，包括：注释、回车符等等。

    4.节点属性

     1.每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
     nodeName（节点名称）
      元素节点的 nodeName 是标签名称
      文本节点的 nodeName 永远是 #text
      注释节点的 nodeName 永远是 #comment
     nodeValue（节点值）
      文本节点nodeValue 属性包含文本。
      元素节点nodeValue不可用
      注释节点nodeValue包括注释内容
    nodeType（节点类型）
      具体类型对应请参考这里。

     2.例如输出一个元素的三个属性：

    5.获取DOM元素

        document.getElementById(); // 根据id获取一个元素
        document.getElementsByTagName();// 根据标签名称获取HTML标签列表
        document.getElementsByName();// 根据元素（标签）Name属性获取元素列表
        document.getElementsByClassName();// 根据className获取HTML标签列表
        document.querySelector();// 类CSS选择器返回一个匹配的元素，注意是一个，如有多个，仅返回第一个。
        document.querySelectorAll();// 类CSS选择器返回所有匹配的元素。
    

    6.节点遍历

     见如下代码：

    
        
    a
        
    b
        
    c
        
    d
        
    
            
    1
            
    2
            
    3
            
    4
        
        abc
        
    
    按钮
    
    

    8.DOM的增删改查