JS基础第二课（元素篇）

介绍元素前，带小伙伴们了解一下，什么是DOM？

一、DOM：全称Document Object Model(文档对象模型)

1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构

2、XML 是一种标记语言类似html，被设计用来传输和存储数据

3、DOM可以把网页和脚本语言以及其他编程语言联系起来

4、DOM开发中主要用于操作元素（因此DOM与元素紧密相连）

二、获取元素的五种方式

1、根据ID获取：返回元素对象（仅获取到匹配的第一个元素的标签）

   

2、根据类名获取：返回元素的对象集合（类似数组），注意不是标签！需要通过循环遍历，来获取最终需要的标签

标题
标题

3、根据标签名获取：返回带有指定标签名的对象集合（类似数组），不是标签！与类名获取同样，需要通过循环遍历，来获取最终需要的标签

段落
段落

4、根据选择器获取【注意：选择器对应的符号不能漏，不能错（class对应. ）、（id对应# ）】

（1）获取指定元素的第一个对象

（2）获取指定元素对象集合，一样需要循环遍历来取标签

  

（3）获取子级对象（querySelector也可以直接获取标签名）

    
段落
    
段落

5、根据特殊元素获取

（1）获取body

（2）获取html

    
段落
    
段落

 三、事件（HTML DOM 事件）

1、组成

（1）事件源：触发的对象

（2）事件类型：如何触发

（3）事件处理程序：通过函数响应事件

2、三种写法（用监听按钮事件为例子）

（1）通过dom事件类型【常用】

    
1
    
2
    
3

（2）通过dom.addEventListener事件类型

点击

（3）直接在标签上编写<标签名 οnclick="方法">确定【常用】

①

    
请点击

②

请点击

3、其他例子：焦点离开、焦点聚集

四、操作元素

1、概念：JavaScript的DOM操作可以改变网页内容、结构和样式，通过利用Dom操作元素来改变元素里面的内容、属性等

注意：事件和操作元素都是对标签进行操作的

2、改变获取元素的内容

（1）修改获取文本内容

标题
修改

（2）修改获取标签文本

标题
修改

 

3、修改获取元素属性（dom.属性名 = 修改值）

标题
修改属性

4、修改样式属性

（1）格式：dom.style.样式属性 = 值

（2）适用于较少的样式修改

（3）复合型的属性需要用驼峰的编写方法，否则会出错

修改属性

修改前： 修改后：

5、使用className修改样式属性

  
    
    
    
    
    
  
  
    
div
    
div
    
div
    点击修改
    
  

修改前： 修改后：

6、HTML标签自定义属性

（1）目的：为了保存属性并使用的数据

（2）设置属性：setAttribute('属性名','值')

（3）获取属性：getAttribute('属性名')

我是标签

  

五、节点操作

1、节点层级

 

2、创建节点：document.createElement("标签名")

3、添加节点：添加的位置.appendChild(添加的节点)

4、删除节点：选择.removeChild(节点)

5、复制节点/克隆节点

cloneNode(true)：克隆整个节点包括里面的内容
cloneNode(false)：克隆节点不包括里面的内容

        
1

添加
删除