【学习笔记】：DOM对象及事件绑定

文章目录一、DOM的概念二、DHTML与HTML DOM三、Document对象获取元素方法四、Element对象与属性相关方法五、对DOM对象的操作1、DOM对象的属性2、创建元素3、挂载元素4、删除元素5、克隆元素六、调整元素样式的方式七、Event对象1、常见的几类事件点击事件焦点事件加载事件鼠标事件键盘事件选中和改变事件表单事件2、绑定事件的几种方法 一、DOM的概念 DOM的英文全称是 Document Object Model，即文档对象模型，是用以操作HTML文档和XML文档的API。 W3C将DOM分为三个不同的部分，分别是：核心DOM，XML DOM，HTML DOM。 二、 【学习笔记】：DOM对象及事件绑定 一、DOM的概念 DOM（Document Object Model）是文档对象模型，它提供了一种结构化的表示HTML或XML文档的接口，允许程序和脚本动态更新、添加、删除和改变元素及属性。DOM通过一系列的节点（包括元素、属性、文本等）构建了一个树形结构，使开发者可以方便地访问和操作文档的各个部分。W3C将DOM分为三个主要部分：核心DOM、XML DOM和HTML DOM，分别针对不同类型的文档。 二、DHTML与HTML DOM DHTML（Dynamic HTML）是动态HTML的简称，它利用JavaScript等客户端脚本语言，结合HTML DOM来改变网页内容，实现动态效果。HTML DOM允许开发者通过编程方式操纵HTML元素，创建、修改、删除或查找文档中的任何元素，从而让静态页面变得交互性十足。 三、Document对象 Document对象是HTML文档的根节点，它代表了整个网页。我们可以从全局Window对象中获取这个对象。Document对象提供了多种方法来获取文档中的元素，例如： - `getElementById(id)`：根据ID获取一个元素。 - `getElementsByName(name)`：根据名称获取一组元素。 - `getElementsByTagName(tagName)`：根据标签名获取元素集合。 四、Element对象 Element对象代表文档中的元素，如`<div>`、`<img>`等。它具有若干属性和方法，可以用来操作元素的属性。例如： - `setAttribute(name, value)`：设置元素的属性。 - `removeAttribute(name)`：删除元素的属性。 五、对DOM对象的操作 1. 属性操作： - `innerHTML`：获取或设置元素的HTML内容。 - `parentNode`：获取元素的父节点。 - `childNodes`：获取元素的所有子节点。 2. 元素创建： - `document.createElement('tag')`：创建指定标签的元素。 3. 元素挂载： - `appendChild(child)`：在父元素末尾添加子元素。 - `insertBefore(newChild, refChild)`：在现有子元素之前插入新元素。 4. 元素删除： - `removeChild(child)`：从父元素中删除子元素。 5. 元素克隆： - `cloneNode(deep)`：创建元素的副本，`deep`参数决定是否复制子节点。 六、调整元素样式 可以通过以下方式改变元素的样式： - 直接修改`style`属性，如`element.style.border = 'red 1px solid'`。 - 改变元素的`className`，实现类选择器样式的切换。 七、Event对象 Event对象封装了事件的信息，如事件类型、位置等。它可以与事件处理函数一起使用，例如： - 点击事件：`onclick`、`ondblclick`。 - 焦点事件：`onblur`、`onfocus`。 - 加载事件：`onload`。 - 鼠标事件：`onmousedown`、`onmouseup`、`onmousemove`。 - 键盘事件：`onkeydown`、`onkeyup`、`onkeypress`。 - 选择和改变事件：`onselect`、`onchange`。 - 表单事件：`onsubmit`、`onreset`。 事件绑定的方法有多种： - 直接在HTML标记中添加事件处理函数：`<button onclick="myFunction()">Click me</button>`。 - 使用JavaScript的`addEventListener`方法：`element.addEventListener('click', myFunction)`。 - 使用`attachEvent`方法（IE浏览器特有）：`element.attachEvent('onclick', myFunction)`。 以上就是关于DOM对象和事件绑定的一些基本知识点，理解并掌握它们对于开发交互性强的Web应用至关重要。通过熟练运用DOM操作和事件处理，可以创建出各种动态效果和用户交互功能。