作者： | 来源：互联网 | 2023-10-15 12:28
文章目录WebAPI简介DomDom树获取Dom元素事件事件三要素操作dom元素innerHTMLinnerText实战案例：实现网页计数器WebAPI简介什么是AP
文章目录
- WebAPI简介
- Dom
- Dom树
- 实战案例&＃xff1a;实现网页计数器
WebAPI简介
什么是API
应用程序接口&＃xff08;API&＃xff0c;Application Programming Interface&＃xff09;是基于编程语言构建的结构&＃xff0c;使开发人员更容易的创建复杂的功能。API中提供了很多的网络接口供开发者使用。
JS基本上可以分为三大类&＃xff1a;
- ECAMScript:基础的JS语法
- DOM API:操作网络页面结构
- BOM API&＃xff1a;操作浏览器
本文介绍的webAPI主要包含了DOM 和BOM部分&＃xff0c;基础的JS语法在前几篇文章中已经基本介绍了一些&＃xff0c;这里就不在介绍。
下面附上API官方参考文档。
https://developer.mozilla.org/zh-CN/docs/Web/API
Dom
什么是Dom
文档对象模型(DOM,全称Document Object Model.)是HTML和XML文档的编程接口。它提供了对文档的结构化表述&＃xff0c;并定义了一种方式可以使从程序中对该结构进行访问&＃xff0c;从而改变文档的接口&＃xff0c;样式和内容。DOM将文档解析为一个由节点和对象&＃xff08;包含属性和方法的对象&＃xff09;组成的集合。
上面是比较复杂 的官方定义&＃xff0c;其实就是W3C标准给我们提供了一些已经写好的函数&＃xff0c;我们可以直接使用&＃xff0c;可以用这些函数来操作网页内容、网页结构、网页样式。
Dom树
当一个新的网页被加载时&＃xff0c;浏览器就会创建该页面的文档对象模型&＃xff08;Dom&＃xff09;.这个Dom模型会被结构化为一个 存放对象的树结构。这个树结构就是 Dom树。
结构如下&＃xff1a;
Dom树中的一些概念&＃xff1a;
-
文档&＃xff1a;一个网络页面就是一个文档&＃xff0c;即document表示
-
元素&＃xff1a;页面中的所有标签&＃xff08;tag&＃xff09;都称为元素&＃xff0c;即element。
-
节点&＃xff1a;网页中的所有内容都可以称为 节点&＃xff08;像标签节点&＃xff0c;文本节点&＃xff0c;属性节点&＃xff0c;注释节点等&＃xff09;&＃xff0c;即node.
这些文档在JS源码中就对应了一个个的对象。所以才会称为“文档对象模型”。
获取Dom元素
一个Dom树上面有很多很多的对象&＃xff0c;再进行操作之前必须先选中对象。Dom API 中提供了很多能够用来选中对象/元素的函数 在本文中我们只介绍最常用功能最强大的两个。
分别是querySelector 和querySelectAll
只有新版本的浏览器才支持&＃xff08;比如IE9之前并不支持&＃xff09;像主流的 浏览器chrome,firefox,edge都是支持的&＃xff0c;没有任何问题。
querySelector
querySelector函数的参数是一个“字符串”&＃xff0c;而且这个字符串必须是CSS选择器。
当代码中存在多个相同名称的标签时&＃xff0c;选择器在进行选择时&＃xff0c;会返回被选中元素的第一个&＃xff08;即第一个出现的元素&＃xff09;。
如果想要全部返回&＃xff0c;可以使用querySelectAll&＃xff0c;会将所有相同名称的标签元素以NodeList&＃xff08;伪数组&＃xff09;的形式&＃xff0c;全部返回。
当我们在document上调用这两个方法的时候&＃xff0c;相当于从页面对 全局来查找复合要求的元素。
如果是在某个具体的dom对象上调用这两个方法&＃xff0c;相当于从这个元素里面来查找复合要求的元素
代码演示:
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Title</title>
</head>
<body><!--创建父元素 parent,及三个子元素child1,2,3-->
<div class&＃61;"parent"><div class&＃61;"child-1">1</div><div class&＃61;"child-2">2</div><div class&＃61;"child-3">3</div>
</div><script>let elem&＃61;document.querySelector(&＃39;div&＃39;);console.log(elem);
</script>
</body>
</html>
输出结果&＃xff1a;
querySelectAll
和querySelector使用方法类似。
代码演示&＃xff1a;
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Title</title>
</head>
<body><!--创建父元素 parent,及三个子元素child1,2,3-->
<div class&＃61;"parent"><div class&＃61;"child-1">1</div><div class&＃61;"child-2">2</div><div class&＃61;"child-3">3</div>
</div><script>let elem&＃61;document.querySelectorAll(&＃39;div&＃39;);console.log(elem);
</script>
</body>
</html>
输出&＃xff1a;
<div class&＃61;"box">abc</div>
<div id&＃61;"id">def</div>
<script>var elems &＃61; document.querySelectorAll(&＃39;div&＃39;);
console.log(elems);
</script>
事件
一些复杂的程序&＃xff0c;往往涉及到组件之间相互通信。
事件机制&＃xff08;event&＃xff09;就是非常典型的组件通信机制。
事件是用户和程序之间的桥梁。
JS要构建动态页面&＃xff0c;就需要感知到用户的行为&＃xff0c;当用户对页面进行的一些操作&＃xff08;点击&＃xff0c;修改&＃xff0c;选择额&＃xff0c;浏览&＃xff09;等都会在浏览器中产生一个个的事件&＃xff0c;当JS捕获到这些事件&＃xff0c;就会运行该事件对应的程序&＃xff0c;从而实现复杂的交互操作。
事件三要素
1.事件源&＃xff1a;被触发的对象
2.事件类型&＃xff1a;事件触发的方式
3.事件处理程序&＃xff1a;事件触发后&＃xff0c;执行的程序。
代码举例&＃xff1a;
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Title</title>
</head>
<body><input type&＃61;"button" value&＃61;"我是一个按钮"><script>let button&＃61;document.querySelector(&＃39;input&＃39;);button.onclick&＃61;function(){alert("hello");}
</script>
</body>
</html>
上面的代码中&＃xff0c;button是事件源&＃xff08;用户能操作的元素&＃xff09;&＃xff0c;click就是事件类型&＃xff08;点击事件),通过onlick属性 就能关联到一个具体的事件处理函数。当button触发了click事件(当用户点击了这个按钮后)&＃xff0c;就会自动调用onclick对应的函数。
操作dom元素
获取/修改元素内容
在CSS的盒模型中&＃xff0c;我们已经知道了一个盒子的组成&＃xff1a;外边距、边框、内边距、内容。我们要获取和修改的 就是最后的内容。这个内容可能是一个文本&＃xff0c;也可能是一个图片&＃xff0c;也可能是个链接等&＃xff0c;本质上都是一段html代码片段&＃xff0c;我们要获取/修改的内容就是这段html片段。
innerHTML
通过element.innerHTML属性就可以设置和获取该元素的内容。
代码演示&＃xff1a;
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Title</title>
</head>
<body><div class&＃61;"parent">hello
</div><button>点击按钮&＃xff0c;改变文本</button>
<script>let button &＃61;document.querySelector(&＃39;button&＃39;);button.onclick&＃61;function () {let parent&＃61;document.querySelector(&＃39;.parent&＃39;);parent.innerHTML&＃61;&＃39;word&＃39;;}
</script>
</body>
</html>
运行&＃xff1a;
该属性不仅可以赋值文本&＃xff0c;还可以赋值一个html片段。
innerText
通过element.innerText属性可以设置和修改一个元素及其子元素的文本内容。
var renderedText &＃61; HTMLElement.innerText;
HTMLElement.innerText &＃61; string;
<div><span>hello world</span><span>hello world</span>
</div>
<script>var div &＃61; document.querySelector(&＃39;div&＃39;);console.log(div.innerText);div.innerText &＃61; &＃39;hello js hello js&＃39;;
</script>
通过上面的代码可知&＃xff0c;innerText属性无法获取到div内部 html代码片段&＃xff0c;只能得到文本内容。
实战案例&＃xff1a;实现网页计数器
通过html,css&＃xff0c;js目前掌握的知识&＃xff0c;我们可以做一个小练习&＃xff0c;实现一个简单的计数器&＃xff0c;类似的按键功能可以重复添加&＃xff0c;所以这里尽量简化&＃xff0c;以加减举个例子。
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>Title</title>
</head><style><!-- 先清除浏览器默认样式 -->*{margin: 0;padding: 0;box-sizing: border-box;}.parent {width: 500px;height: 300px;background-color: gray;margin: 0 auto;}.parent .screen{width: 200px;height: 150px;font-size: 30px;line-height: 150px;color:white;margin: 0 auto;text-align: center;}.parent .ctrl{width:360px;height:150px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}.parent .ctrl button{width: 100px;height: 50px;font-size: 20px;line-height: 20px;text-align: center;border-radius: 10px;border:none;}.parent .ctrl button:active{color:white;background-color: blue;}
</style>
<body>
<div class&＃61;"parent">
<!--通过screen来显示数字--><div class&＃61;"screen">0</div><div class&＃61;"ctrl"><!-- 子元素按钮--><button id&＃61;"plusButton">&＃43;</button><button id&＃61;"zeroButton">清零</button><button id&＃61;"minusButton">-</button></div>
</div><script>
let plusButton&＃61;document.querySelector(&＃39;#plusButton&＃39;);plusButton.onclick&＃61;function(){let screen&＃61;document.querySelector(&＃39;.screen&＃39;);let content&＃61;screen.innerHTML;let result&＃61;parseInt(content)&＃43;1;screen.innerHTML&＃61;result;}let minusButton&＃61;document.querySelector(&＃39;#minusButton&＃39;);
minusButton.onclick&＃61;function() {let screen &＃61; document.querySelector(&＃39;.screen&＃39;);let content &＃61; screen.innerHTML;let result &＃61; parseInt(content) - 1;screen.innerHTML &＃61; result;
}let zeroButton&＃61;document.querySelector(&＃39;#zeroButton&＃39;);
zeroButton.onclick&＃61;function() {let screen &＃61; document.querySelector(&＃39;.screen&＃39;);let content &＃61; screen.innerHTML;let result &＃61; parseInt(content) *0;screen.innerHTML &＃61; result;
}</script>
</body>
</html>
效果如下&＃xff1a;
京公网安备 11010802041100号