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

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

时间：2022-09-05 15:05:03

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">-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”) ’

//这样过于麻烦，经常做出改进:给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> "; //显示<strong>今天是：</strong> //2.innerHTML 识别HTML标签 W3C推荐保留空格和换行var div = document.querySelector("div");div.innerMTML = "<strong>今天是：</strong> "; //显示今天是：（其中'今天是'加粗）//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='被点击了';}

valuecheckedselecteddiabled

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

案例之密码显示与隐藏

案例：点击按钮将密码框切换为文本框，并可以查看密码明文

思路：点击眼睛按钮，把密码框类型转换为文本框就可以看见里面的密码，一个按钮有两个状态，点击一次，切换为文本框，继续点击一次切换为密码框

算法：利用一个flag变量，判断flag值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框， flag设置为1

代码：

样式属性操作

可以通过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="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）如果想要保留原先的类名，用多类名选择器

案例之：密码框格式提示错误信息

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

思路：

首先判断事件的表单失去焦点 onblur

如果输入正确则提示正确的信息颜色为绿色小图标变化

如果输入的不是6-16位，则提示错误信息颜色为红色小图标变化

因为里面的样式过多，采用className修改样式