Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）

Web APIs
Web APIs 和 JS 的关联性：
Web APIs是 W3C 组织的标准，主要学习DOM 和 BOM
Web APIs是 JS 所独有的部分
主要学习页面交互功能
Web APIs 是 JS 的应用
总结：
API 是一种接口工具，以实现某些功能，只要会使用就可以了
Web APIs是浏览器提供的一套操作浏览器功能（BOM) 和页面元素(DOM)的API
Web APIs 一般都有输入和输出，Web APIs很多都是方法（函数）
可以结合前面学习内置对象方法的思路学习
DOM
DOM是文档对象模型，是W3C推荐的处理可扩展标记语言的一套标准程序接口，即处理页面/文档的一些接口
W3C已经规定了一系列的DOM接口，通过这些接口可以改变网页的结构、和样式

DOM树

文档（document）：一个页面就是一个文档；
元素(Element)：页面中的所有标签都是元素；
节点(Node)：页面中的内容都是节点，例如：标签，文本，属性，注释等；
DOM把以上内容都看成是对象DOM在实际操作中获取元素的方法：
1. 根据ID获取getElementById(‘id’) 方法可以获取带有ID的元素对象
因为文档页面从上往下加载，所以先要有标签，所以script放在标签下面
驼峰命名法 get 获得Element 元素 by
参数id 是大小写敏感的字符串
返回的是一个元素对象

    <div id="time">2020-10-01</div><script>//1.因为文档页面从上往下加载，所以先要有标签，所以script放在标签下面//2.驼峰命名法  get 获得Element 元素 by//3.参数id 是大小写敏感的字符串//4.返回的是一个元素对象var timer = document.getElementById("time");console.log(timer); //把标签选中了console.log(typeof timer);//返回object//5.console.dir打印返回的元素对象，更好地查看属性里面的属性和方法console.dir(timer);

2. 根据标签名获取

getElementsByTagName(‘标签名’) 方法可以返回页面内所有的带有指定标签名的对象的集合

返回的是获取过来元素对象的集合，以伪数组形式存储

   <ul><li>如月之恒，如日之升1</li><li>如月之恒，如日之升2</li><li>如月之恒，如日之升3</li><li>如月之恒，如日之升4</li><li>如月之恒，如日之升5</li></ul><ol><li>empty</li><li>empty</li><li>empty</li></ol><script>//(1)getElementsByTagName 方法可以返回带有指定标签名的对象的集合//(2)返回的是获取过来元素对象的集合，以伪数组形式存储var lis = document.getElementsByTagName("li");console.log(lis);console.log(lis[0]); //得到第一行的li//(3)想要依次得到元素对象可以采取遍历的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}</script>

注意：
1.因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
2.得到的元素对象是动态的（即原对象一旦变化，得到的结果也会随之变化）
3.如果页面中只有一个元素，返回的依然是元素对象，伪数组
4.如果页面中没有元素，返回的是空的伪数组
5.element（父元素）.getElementsByTagName(’标签名’)；可以获取某个元素（父元素）内部所有指定标签名的子元素
///父元素必须是单个对象（必须指明是哪个对象），获取时不包括父元素自己
例：此处必须是 ’ ol[0] . getElementsByTagName(“li”) ’

   <ul><li>如月之恒，如日之升1</li><li>如月之恒，如日之升2</li><li>如月之恒，如日之升3</li><li>如月之恒，如日之升4</li><li>如月之恒，如日之升5</li></ul><ol><li>empty</li><li>empty</li><li>empty</li></ol><script>//(1)getElementsByTagName 方法可以返回带有指定标签名的对象的集合//(2)返回的是获取过来元素对象的集合，以伪数组形式存储var lis = document.getElementsByTagName("li");console.log(lis);console.log(lis[0]); //得到第一行的li//(3)想要依次得到元素对象可以采取遍历的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}</script>

//这样过于麻烦，经常做出改进:给ol一个id值

    <ol id="ol">-----</ol>-------------------------------------------//改进var ol = document.getElementById("ol");console.log(ol.getElementsByTagName("li"));

3. 根据HTML5新增的方法获取

ie9以上才可使用，有兼容性问题

getElementsByClassName(‘类名’) 根据类名获取

 <div class="box">盒子</div><script>//**3.HTML5新增方法  getElementsByClassName 根据类名获取 var boxs = document.getElementsByClassName('box');console.log(boxs);</script>

document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
（切记里面的选择器需要加符号：类选择器加 . id选择器加 # 标签选择器不用加）

    //(2) document.querySelector('选择器')根据指定选择器返回第一个元素对象var firstBox= document.querySelector('.box'); //返回第一个类名为box的元素console.log(firstBox);var nav = document.querySelector('#nav'); //返回第一个id为nav的元素console.log(nav);var li = document.querySelector('li');  //返回第一个liconsole.log(li);

document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象
返回对象是一个元素集合，是一个伪元素
同样的，里面的选择器需要加符号

      //（3）document.querySelectorAll('选择器')  根据指定选择器返回所有元素对象//返回对象是一个元素集合，是一个伪元素var allBox = document.querySelectorAll(".box"); //返回所有类名为box的元素console.log(allBox);

4. 特殊元素获取

document.body获取body标签
```
 var bodyEle = document.body;console.log(bodyEle); //获取body标签console.dir(bodyEle); //返回的类型是数组对象
```
- document.documentElement 获取html标签
```
 //（2）获取html标签var htmlEle = document.documentElement;console.log(htmlEle); //获取html标签console.dir(htmlEle); //返回的类型是数组对象
```
  事件基础
  
  javascript使我们有能力创建动态页面（轮播图等），而事件是可以被javascript侦测到的行为
  简单理解：就是一种触发-----响应机制
  
  事件由三部分组成：事件源、事件类型、事件处理程序（事件三要素）
  （1）事件源：事件被触发的对象例如按钮`````````````
```
 <button id="btn">阿妫</button><script>var btn = document.getElementById("btn");
```
  (2）事件类型即触发的方式，例：鼠标点击触发（onclick）/鼠标经过触发/键盘按下触发等
  (3）事件处理程序通过一个函数赋值的方式完成
```
   btn.onclick = function(){alert('好的啊');  //点击按钮后弹出对话框}</script>
```
  鼠标事件   触发条件
  onclick   鼠标点击左键触发
  onmouseover   鼠标移动到目标上方
  onmouseout   鼠标从目标上方移出
  onfocus   获得鼠标焦点触发
  onmousedown   鼠标的键钮被按下
  onmouseup   鼠标的键钮释放弹起
  onblur   失去鼠标焦点触发
  mousemove   鼠标在目标上方移动

mouseenter 和 mouseover 区别：

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发

mouseenter 只会经过自身盒子触发（因为 mouseenter 不会冒泡）

操作元素(重要）
javascript 的DOM操作都可以改变网页内容、样式，可以利用DOM操作元素来改变元素里面的内容、属性等

改变元素内容

element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会被去掉

<body><button id="btn">显示当前系统时间</button><div>某个时间</div><p></p><script>//**当点击按钮div里面的文字会发生变化**//1.获取元素var btn = document.querySelector("button");var div = document.querySelector("div");//2.注册事件btn.onclick = function () {//点击后按指定格式获取时间div.innerText = getDate();};//3.也可以不用添加事件，直接显示var p = document.querySelector("p");p.innerText = getDate();//封装时间函数function getDate() {---------略---------；}

-element.innerHTML 较多使用从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

与element.innerText 使用方式一样。

二者区别：
（1）innerText 不识别HTML标签非标准不保留空格和换行

（2）innerHTML 识别HTML标签 W3C推荐保留空格和换行

（3）这两个属性都是可读写的可以获取元素里面的内容

(4) 这两个是普通盒子，比如 div盒子标签的内容，对表单不起作用

<body><div></div><p>我是文字<span> 123 </span></p><script>//innerText 和 innerHTML区别//1.innerText 不识别HTML标签  非标准  不保留空格和换行var div = document.querySelector("div");div.innerText = "<strong>今天是：</strong> 2020"; //显示<strong>今天是：</strong> 2020//2.innerHTML 识别HTML标签   W3C推荐   保留空格和换行var div = document.querySelector("div");div.innerMTML = "<strong>今天是：</strong> 2020"; //显示今天是：2020（其中'今天是'加粗）//3.这两个属性是可读写的 可以获取元素里面的内容var p = document.querySelector("p");console.log(p.innerText); //输出结果 我是文字 123   不保留空格和换行console.log(p.innerHTML); //输出结果 我是文字 <span> 123 </span>  保留空格和换行</script>
</body>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性

type

        btn.onclick(){//表单里面的值 文字内容通过value来修改input.value='被点击了';}

value
checked
selected

diabled

       btn.onclick(){//如果想要某个表单被禁用 不能再点击 用disabledinput.disabled=true;//this 指向的是事件函数的调用者 btnthis.disabled = true; //与input.disabled = true;效果等价}

案例之密码显示与隐藏

案例：点击按钮将密码框切换为文本框，并可以查看密码明文
思路：点击眼睛按钮，把密码框类型转换为文本框就可以看见里面的密码，一个按钮有两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，判断flag值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框， flag设置为1
代码：

<style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 7px;right: 2px;width: 24px;height: 24px;}</style></head><body><div class="box"><label for=""><img src="data:images/zyl.jpg" alt="" id="eye" /></label><input type="password" name="" id="pwd" /></div><script>//1.获取元素var eye = document.getElementById("eye");var pwd = document.getElementById("pwd");//2.注册事件var flag = 0;eye.onclick = function () {if (flag == 0) {pwd.type = "text";eye.src = "images/zjl.jpg";flag = 1;} else {pwd.type = "password";eye.src = "images/zyl.jpg";flag = 0;}};</script></body>

样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

element.style 行内样式属性

   <script>//1.获得元素var div = document.querySelector("div");//2.注册事件 处理程序div.onclick = function () {//点击后背景变为紫色，宽度变为250pxthis.style.backgroundColor = "purple";  this.style.width = "250px";};</script>

div.style 里面的属性采取驼峰命名法

（2）JS修改style样式操作，产生的是行内样式，CSS权重比较高，所以如果JS样式与内嵌样式发生冲突，以JS样式为主

（3）适用于样式比较少，功能比较简单的

实例：点击关闭二维码：

  <body><div class="box">淘宝二维码<img src="data:images/zxc.jpg" alt="" title="扫面二维码" /><i class="close-btn">x</i></div><script>//思路：利用样式的显示与隐藏完成，display:none 隐藏元素  display:block 显示元素var btn = document.querySelector(".close-btn");var box = document.querySelector(".box");btn.onclick = function () {box.style.display = "none";};</script></body>

element.className 类名样式属性
（1）通过修改元素的className来修改元素样式，适用于样式多的，功能复杂的 (常用）
（2）className是个保留字，因此使用className来操作元素类名属性
（3）className 会直接更改元素的类名，会覆盖原先的类名
（4）如果想要保留原先的类名，用多类名选择器

<style>.first {width: 200px;height: 200px;background-color: rgb(140, 127, 219);color: salmon;}.change {width: 250px;height: 300px;background-color: violet;color: rgb(190, 201, 34);}</style></head><body><div class='first'>文本</div><script>//让原来的盒子由原来的样式改为类名为change所规定的样式var test = document.querySelector("div");test.onclick = function () {//让当前原色的类名改为change//this.className = "change";//如果想要保留原先的类名，用多类名选择器this.className = 'first change';};</script></body>

案例之：密码框格式提示错误信息
案例：用户如果离开密码框，里面输入的个数不是6-16，则提示错误信息，否则提示输入正确信息
思路：

首先判断事件的表单失去焦点 onblur
如果输入正确则提示正确的信息颜色为绿色小图标变化
如果输入的不是6-16位，则提示错误信息颜色为红色小图标变化
因为里面的样式过多，采用className修改样式

<style>div {width: 600px;height: 100px auto;}.message {display: inline-block;font-size: 12px;color: rgb(119, 113, 113);background: url(images/zjl.jpg) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/zxc.jpg);}.right {color: green;background-image: url(images/zyl.jpg);}</style></head><body><!--案例：用户如果离开密码框，里面输入的个数不是6-16，则提示错误信息，否则提示输入正确信息--><div class="register"><input type="password" class="ipt" /><p class="message">请输入6~16位密码</p></div><script>var ipt = document.querySelector(".ipt");var message = document.querySelector(".message");ipt.onblur = function () {//根据表单里面值的长度 ipt.value.length判断if (ipt.value.length < 6 || ipt.value.length > 16) {message.className = "message wrong";message.innerHTML = "您输入的位数不对，要求6~16位";} else {message.className = "message right";message.innerHTML = "您输入的格式正确";}};</script></body>

Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）相关推荐

html选择按键点击后锁死输入框_js Dom为页面中的元素绑定键盘或鼠标事件
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouSEOver 鼠标移入 onmouSEOut 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...
java dom xpath_Java：在org.w3c.dom文档中获取元素的xpath
我写了我想要达到的目标.但是,getElementIdx()函数不会返回正确的计数. getPrevIoUsSibling()存在问题,但我不知道为什么. public static String g ...
VC6中用DOM遍历网页中的元素
VC6中用DOM遍历网页中的元素 2005-4-21 6:56:47 作者:模板天下收集整理来源:未知网友评论 0 条论坛286 一.摘要在我们编写的程序中,如果想要实现对浏览器打开的网页进行 ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
如何从代码中获取当前方法的名称[复制]
本文翻译自:How to get the name of the current method from code [duplicate] This question already has an a ...
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
vue-html5-editor接收数据,在vue中获取wangeditor的html和text的操作
目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wa ...
python将输入值转化为元组_Python实现将元组中的元素作为参数传入函数的操作
本文由Markdown语法编辑器编辑完成. 1. 需求: 现在有一个Python的需求需要实现: 就是实现连接一次数据库,就能够执行多条SQL语句,而且这个SQL语句是需要通过调用者将每一次执行的参数 ...
ML之Validation：机器学习中模型验证方法的简介、代码实现、案例应用之详细攻略
ML之Validation:机器学习中模型验证方法的简介.代码实现.案例应用之详细攻略目录模型验证方法的简介 1.Hold-out验证 2.K-折交叉验证 3.自助重采样模型验证方法的代码实现 ...

Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）

Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）相关推荐

最新文章

热门文章