7_js_dom编程入门1

2023-12-26 04:28:26

Objective(本课目标)

  • 掌握获取页面元素的常用方法

  • 掌握事件触发案例

  • 能够区分innerText和innerHTML的区别

  • 综合案例训练

1 DOM 介绍

1.1 什么是DOM
  • 文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口

  • 文档对象模型 (*DOM)* 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点 (node),每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。

  • DOM 模型用一个逻辑树来表示一个文档:如下

  • 文档:就相当于是document对象。

  • 节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示

  • 节点包含了属性和文本还有子节点。

  • 课堂代码:01.获取整个页面的元素.html

1.2 为什么要学习DOM?
  • 总结:就是为了使用JavaScript语言操作网页中的元素

1.3. 如何获取网页中的元素

  • 获取页面元素的核心方法

getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()
?
返回文档中与指定的选择器匹配的第一个元素节点
Document.querySelector()
返回包含文档中与指定的选择器匹配的所有元素节点的列表
Document.querySelectorAll()
1.3.1. 获取页面元素的方法1
  • 课堂代码:02.getElementById方法演示.html

  • 课堂代码:03.getElementsByTagName方法演示.html

  • 课堂代码:04.getElementsByName方法演示.html

  • 课堂代码:05.getElementsByClassName方法演示.html

1.3.2. 获取页面元素的方法2
  • 课堂代码:06.querySelector和querySelectorAll.html

1.4. 事件触发

1.4.1. 事件概述
  • 当在 HTML 页面中使用 JavaScript 时,JavaScript 可以对这些事件 做出“反应”。

    • 网页中的事件:根据用户的浏览行为做出的响应。

  • 课堂代码:07.事件的入门案例.html

1.4.2. 常见的鼠标事件

1.4.3 事件案例训练
  • 课堂代码:08.事件案例训练.html

1.5. Js操作元素案例

1.5.1. 修改元素内容
  • 课堂代码:09.innerText和innerHTML的区别.html

1.5.2. 图片切换案例
  • 课堂代码:10.图片切换案例.html

1.5.3. 操作元素属性
  • 课堂代码:11.操作元素属性1.html

  • 课堂代码:12.操作元素属性2.html

1.5.4. 隐藏密码案例讲解
  • 课堂代码:13.隐藏密码案例讲解.html

1.5.5. 关闭广告案例
  • 课堂代码:14.关闭广告案例.html

1.5.6. onblur和onfocus事件讲解
  • 课堂代码:15.onblur和onfocus事件.html

    • focus 事件在元素获取焦点时触发

    • blur当一个元素失去焦点的时候 blur 事件被触发

1.5.7. 更改元素的样式操作
  • 课堂代码:16.更改元素样式.html

  • 课堂代码:17.更改元素样式案例.html

1.5.8. 注册页面加上校验
  • 课堂作业:18.作业讲解_注册页面加上校验.html

文章来源:https://blog.csdn.net/2301_80008556/article/details/135211049
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。