西南城乡建设部网站首页,黄石规划建设局网站,WordPress修改_,株洲网站seo优化价格Objective#xff08;本课目标#xff09; 掌握获取页面元素的常用方法 掌握事件触发案例 能够区分innerText和innerHTML的区别 综合案例训练
1 DOM 介绍
1.1 什么是DOM 文档对象模型#xff08;Document Object Model#xff0c;简称DOM#xff09;#xff0c;是 …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
