Web前端开发基础（HTML+CSS+JavaScript）课件 第12 DOM.pptxVIP

第十二章DOM

第十二章DOM

讲师:

日期:

Web前端开发基础

1

第十二章DOM

学习目标

理解DOM的基础知识

掌握DOM事件的使用

了解事件对象及其应用

Web前端开发基础

2

第十二章DOM

12.1DOM基础

概念:DOM（文档对象模型）是用于控制网页内容的编程接口。它将HTML文档表示为节点

和对象的树结构，使开发者能够脚本化地操作页面。

Web前端开发基础

3

第十二章DOM

DOM元素

通过ID获取元素

语法:document.getElementById(ID);

示例:

!DOCTYPEhtml

htmllang=en`head`metacharset=UTF-8

`title`通过ID获取元素/title

/head`body）

`divid=divContent这是在DIV里面！/div`

script`：

letdivContent=document.getElementById(divContent);;

console.log(divContent);

/;script/_

body

/html

使用getElementById获取特定元素时，确保ID是唯一的，避免冲突。

Web前端开发基础

4

第十二章DOM

通过标签名获取元素

语法:document.getElementsByTagName