作者： | 来源：互联网 | 2023-10-15 12:28
文章目录WebAPI简介DomDom树获取Dom元素事件事件三要素操作dom元素innerHTMLinnerText实战案例：实现网页计数器WebAPI简介什么是AP
文章目录 WebAPI简介 Dom Dom树 实战案例&＃xff1a;实现网页计数器
WebAPI简介 什么是API
JS基本上可以分为三大类&＃xff1a;
ECAMScript:基础的JS语法 DOM API:操作网络页面结构 BOM API&＃xff1a;操作浏览器 本文介绍的webAPI主要包含了DOM 和BOM部分&＃xff0c;基础的JS语法在前几篇文章中已经基本介绍了一些&＃xff0c;这里就不在介绍。
下面附上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;。querySelectAll &＃xff0c;会将所有相同名称的标签元素以NodeList &＃xff08;伪数组&＃xff09;的形式&＃xff0c;全部返回。
当我们在document上调用这两个方法的时候&＃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; ) ; . log ( elems) ; < / script>
事件 一些复杂的程序&＃xff0c;往往涉及到组件之间相互通信。
事件是用户和程序之间的桥梁。
JS要构建动态页面&＃xff0c;就需要感知到用户的行为&＃xff0c;当用户对页面进行的一些操作&＃xff08;点击&＃xff0c;修改&＃xff0c;选择额&＃xff0c;浏览&＃xff09;等都会在浏览器中产生一个个的事件&＃xff0c;当JS捕获到这些事件&＃xff0c;就会运行该事件对应的程序&＃xff0c;从而实现复杂的交互操作。
事件三要素 1.事件源&＃xff1a;被触发的对象
代码举例&＃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; . 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: 500 px; height: 300 px; background- color: gray; margin: 0 auto; } . parent . screen{ width: 200 px; height: 150 px; font- size: 30 px; line- height: 150 px; color: white; margin: 0 auto; text- align: center; } . parent . ctrl{ width: 360 px; height: 150 px; margin: 0 auto; display: flex; justify- content: space- between; align- items: center; } . parent . ctrl button{ width: 100 px; height: 50 px; font- size: 20 px; line- height: 20 px; text- align: center; border- radius: 10 px; 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; ) ; . 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; ) ; . 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号