JavaScript语法基础之DOM基础

目录

1. DOM 基础

1.1. DOM 是什么？

1.1.1. DOM 对象

1.1.2. DOM 结构

1.2. 节点类型

1.3. 获取元素

1.3.1. getElementById()

1.3.2. getElementsByTagName()

1.3.3. getElementsByClassName()

1.3.4. getElementsByName()

1.4.如何去操作对象

修改属性（css）

1.5.如何动态的创建对象

---

1. DOM 基础

1.1. DOM 是什么？

1.1.1. DOM 对象

• DOM全称Document Object Model（文档对象模型），它是由 W3C 定义的一个标准。

• 我们有时候遇到鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等，其实这些效果就是通过DOM提供的方法来实现的。

• 简单来说，DOM 里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如：改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

• 一句话总结就是：DOM 操作，可以简单理解成“元素操作”。

1.1.2. DOM 结构

• DOM采用的是树形结构，用树节点形式来表示页面中的每一个元素，我们先看下面一个例子：

•  
  
  
      
      
  
      
  Gok
      
          
  Gok是一个……
          
  Gok成立于……
  
  

• 对于上面这个 HTML 文档，DOM 会将其解析为如下图所示的树形结构。

• 是不是很像一棵树呢？其实，这也叫做DOM 树。在这棵树上html 元素是树根，也叫根元素。
• 接下来深入一层，我们发现有 head 和 body 这两个分支，它们位于同一层次上，并且有着共同的父节点（即 html），所以它们是兄弟节点。
• head 有 2 个子节点：title、meta（这两个是兄弟节点）。
• body 有 3 个子节点：h1、p、p。
• 利用这种简单的家谱关系我们可以把各节点之间的关系清晰地表达出来。
• 那么为什么要把一个HTML页面用树形结构表示呢？这也是为了更好地给每一个元素进行定位，以便让我们找到想要的元素。
• 每一个元素就是一个节点，而每一个节点就是一个对象。
• 也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解 DOM 操作太重要了）。

1.2. 节点类型

• 在 JavaScript 中，节点也是分为很多类型的。

• DOM 节点共有12种类型，不过常见的只有 3 种（其他的不用管）。

• • 元素节点(标签)

• • 属性节点（属性名）

• • 文本节点（文本）

• 很多人看到下面这句代码，就认为只有一个节点，因为只有 div 这一个元素嘛。

• 实际上，这里有 3 个节点：

Gok

1.3. 获取元素

获取元素，准确来说，就是获取元素节点（注意不是属性节点或文本节点）。

对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素。只有获取到了，才能对其进行相应的操作。

咦，这不跟 CSS 选择器相似吗？只不过选择器是 CSS 的操作方式，而 JavaScript 却有着属于自己的另一套方法。

在 JavaScript 中，我们可以通过以下 6 种方式来获取指定元素：

• • getElementById()

• • getElementsByTagName()

• • getElementsByClassName()

• • getElementsByName()

• • querySelector()、querySelectorAll()

• • document.title、document.body

• 上面每一种方法都非常重要，我们要一个个地认真学透。

• 请注意，JavaScript 是严格区分大小写的，所以在书写的时候，就不要把这些方法写错了。

1.3.1. getElementById()

• 在 JavaScript 中，如果想通过 id 来选中元素，我们可以使用 getElementById() 来实现。

• getElementById 这个方法的名字看似很复杂，其实根据英文来理解就很容易了，也就是get element by id（通过 id 来获取元素）的意思。

• 实际上，getElementById() 类似于 CSS 中的 id 选择器，只不过 getElementById() 是 JavaScript 的操作方式。

• 语法：

document.getElementById("id名")

• 举例：

• 这个例子的 JavaScript 代码在HTML代码的上面，如果没有 window.onload，浏览器解析到 document.getElementById("div1") 就会报错，因为它不知道id为"div1"的元素究竟是哪位兄弟。

• 因此我们必须使用 window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。

1.3.2. getElementsByTagName()

• 在JavaScript中，如果想通过标签名来选中元素，我们可以使用 getElementsByTagName() 方法来实现。

• 同样，getElementsByTagName()类似于 CSS 中的元素选择器。

• 语法：

document. getElementsByTagName("标签名")

• 举例：

  
    
    
    
  
  
    

      
HTML
      
CSS
      
JavaScript
      
jQuery
      
Vue.js
    
  

1.3.3. getElementsByClassName()

• 在 JavaScript 中，如果想通过 class 来选中元素，我们可以使用 getElementsByClassName() 方法来实现。

• 同样，getElementsByClassName() 类似于 CSS 中的 class 选择器。

• 语法：

document. getElementsByClassName("类名")

• 举例：

  
    
    
    
  
  
    

      
HTML
      
CSS
      
JavaScript
      
jQuery
      
Vue.js
    
  

1.3.4. getElementsByName()

• 对于表单元素来说，它有一个一般元素都没有的 name 属性。如果想要通过 name 属性来获取表单元素，我们可以使用 getElementsByName() 方法来实现。

• 语法：

document.getElementsByName("name名")

• 举例：单选按钮

  
    
    
    
  
  
    你的最高学历:
    本科
    硕士
    博士
  

• 举例：复选框

  
    
    
    
  
  
    你喜欢的水果:
    苹果
    香蕉
    西瓜
  

1.4.如何去操作对象

    
    


程咬金
 						==》container
			==》userName


修改							==》change

修改属性（css）

    
    
    





修改

1.5.如何动态的创建对象

// 动态创建元素
document.createElement("标签名字");
// 追加元素： 父级追加子级
父级对象.append(子级对象);
// 获取父级对象
子级对象.parentNode;
// 删除对象
dom对象.remove();

案例：

    
    
    



    姓名: 
    

    

    年龄: 
    

    

    性别:
     男
     女
    

    

    




    

        
姓名
        
年龄
        
性别
        
操作