在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了——这就是javascript DOM DOM(Document Object Model)，文档对象模型。 是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口；W3C已经定义了一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 简单的说就是一套操作文档内容的方法。 需要注意的是，我们需要把DOM当作一个整体，不能分割看待，即DOM（文档对象模型）是一套操作文档内容的方法。 DOM把以上内容看作都是对象 用树表示这个网页的结构： 1、getElementById() 2、getElementsByTagname() 3、getAttribute() 4、setAttribute() 常用的两种解析： 1. getElementById()： 参数：元素的ID值。 （元素节点简称元素） 例： 看一下控制台打印的是什么 可以看到 console.log(timer)打印出来的是整个div标签 timer类型是个对象 2. getElementsByTagName(): 参数：元素名 例： JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。 简单理解：触发——>响应机制 网页中每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮产生一个事件，然后去执行某些操作 事件源 、事件类型、事件处理程序，我们也称为事件三要素 (1) 事件源 事件被触发的对象 谁 代码实例 运行结果 1、获取事件源 2、注册事件（绑定事件） 3、添加事件处理程序（采取函数赋值形式） 代码实战 运行结果 鼠标点击123—>控制台打印 后续~~~~
Javascript DOM
实例：
<!DOCTYPE html> <html> <head> <title>Shopping list</title> <meta charset="utf-8"> </head> <body> <h1>What to buy</h1> <p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p> <ul id="purchases"> <li>A tin od beans</li> <li>Cheese</li> <li>Milk</li> </ul> </body> </html>1、获取DOM四种基本方法
返回值：一个有指定ID的元素对象（元素是对象）
注：这个方法是与document对象相关联，只能由document对象调用。
用法：document.getElementById(Id)
typeof document.getElementById("purchases");//object代码演练：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="time">2020-04-16</div> <script> // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 // 2. get 获得 element 元素 by 通过 驼峰命名法 // 3. 参数 id是大小写敏感的字符串 // 4. 返回的是一个元素对象 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer); </script> </body> </html>
返回值：一个对象数组。这个数组里每个元素都是对象，每个对象分别对应着文档里给定标签的一个元素。
注：这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数，返回在某份html文档里总共有多少个元素节点。
用法：element.getElementsByTagName(TagName)
var items=document.getElementsByTagName("li"); items.length;//3 document.getElementsByTagName(“*”);//122、事件基础
3.1 事件概述
3.2 事件三要素
(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3) 事件处理程序 通过一个函数赋值的方式 完成
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="btn">唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素 //(1) 事件源 事件被触发的对象 谁 按钮 var btn = document.getElementById('btn'); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function() { alert('点秋香'); } </script> </body> </html>
3.3 执行事件的步骤
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div>123</div> <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function() { console.log('我被选中了'); } </script> </body> </html>
常用的DOM事件
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
