网站建设流程收费,网站高级感,哪个网站做ppt模板赚钱,关于做网站的策划书目录
一.dom元素获取的意义与使用场景
使用场景#xff08;绝大多数js操作都需要dom操作#xff09;
总结/疑问解答#xff01;
二.DOM元素获取的常用方法#xff08;重点#xff09;
获取dom元素#xff08;动态#xff09;
document.gerElementbyId()
docume…目录
一.dom元素获取的意义与使用场景
使用场景绝大多数js操作都需要dom操作
总结/疑问解答
二.DOM元素获取的常用方法重点
获取dom元素动态
document.gerElementbyId()
document.gerElementsBytagName()
document.gerElementsByclassName()
document.gerElementsByname()通过name属性查找元素
获取dom元素静态
1.querySelector(css选择器) 新方法ie低版本不支持返回的是符合选择器的第一个元素对象
2.querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象
3.特点重点
4.注意
静态和动态的区别
相关代码 一.dom元素获取的意义与使用场景
DOM 元素获取在 JavaScript 中具有重要的意义和作用。它使我们能够动态地与网页中的元素进行交互并根据用户的操作或特定的逻辑来修改页面的外观和行为。
作用/意义了解即可 操作和修改元素内容通过获取 DOM 元素我们可以修改元素的文本内容、HTML 结构或其他属性。这使得我们可以根据需要动态地修改页面例如更新文本、插入新的元素或更新图片等。添加和删除元素通过获取 DOM 元素及其父元素我们可以动态地添加新的元素到页面中或删除现有的元素。这对于创建动态内容、响应用户操作或实现交互性的网页非常有用。修改元素样式通过获取 DOM 元素的引用我们可以修改元素的 CSS 样式包括颜色、尺寸、位置等。这使得我们可以根据特定条件或用户操作来改变元素的外观从而实现更好的用户体验或动态效果。添加事件监听器通过获取 DOM 元素我们可以为元素添加事件监听器以便在用户执行特定操作时触发相应的 JavaScript 代码。这使我们能够实现响应式的交互并处理用户的点击、鼠标移动、键盘输入等事件 使用场景绝大多数js操作都需要dom操作 动态网页当需要根据用户的操作或特定的逻辑来动态更新网页内容或行为时DOM 元素获取非常有用。例如表单验证、菜单导航、动画效果等。单页应用程序SPA在使用 JavaScript 框架如React、Angular、Vue.js开发单页应用程序时通过获取 DOM 元素来操作和更新页面是必要的。例如根据路由切换组件、更新数据、渲染视图等。动态表单验证当需要验证表单输入的有效性并基于验证结果提示用户时通过获取 DOM 元素来检索表单字段并应用相应的验证逻辑非常有用。注意DOM 元素获取是一项强大的功能但在处理大量元素时可能会影响性能。因此在使用过程中要注意使用正确的选择器并避免不必要的DOM操作以提高网页的性能和响应速度。 总结/疑问解答 dom操作其实在前面的文章中已经用到很多次了但是一直没有系统性的总结接下来的几篇文章主要来总结dom操作以及dom操作相关的案例小游戏比如说选字游戏连连看打地鼠多球碰撞随机抽签无缝轮播原生js绘制时钟等等。
二.DOM元素获取的常用方法重点
获取dom元素动态 获取dom元素 document.gerElementbyId() document.gerElementsBytagName() document.gerElementsByclassName() document.gerElementsByname()通过name属性查找元素 ie下只针对于input元素起作用 在标准浏览器下可以适用于任何标签 注意gerElementsByname()的调用对象只能是 document 以上几种方法在前面的文章中都有讲到所有在这里面不做过多的讲述详情可以翻阅往期的笔记。下面是文章链接javaScript如何获取html中的元素对象_js 获取html对象_小姚学前端的博客-CSDN博客 获取dom元素静态 1.querySelector(css选择器) 新方法ie低版本不支持返回的是符合选择器的第一个元素对象 let age document.querySelector(input[nameage]) //里面是属性选择器console.log(age);//通过id名获取let cao document.querySelector(#cao)console.log(cao); 2.querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象 //获取所有的divlet divs document.querySelectorAll(div)console.log(divs);//通过类名获取let qiao document.querySelectorAll(.qiao)console.log(qiao);//同时使用多个选择器let ele document.querySelectorAll(input,div)console.log(ele);//选择所有的li元素let lis document.querySelectorAll(li)console.log(lis);//获取list1下面所有的li元素let lis1 document.querySelectorAll(#list1li)console.log(lis1); 3.特点重点 特点 1.传入的参数是选择器通过选择器检索出具体元素 2.他的调用对象只能是 document 3.querySelector(css选择器) querySelectorAll(css选择器)[0] 4.都支持多个选择器如果使用多个选择器, 用逗号分开 4.注意 以上两个方法是静态方法所有选择器都支持 静态和动态的区别 动态获取的元素集合在以后的操作中随着操作的增删和修改而改变静态获取的元素 集合不会随着以后的操作而改变 //静态和动态的区别let list1 document.getElementById(list1)//创建一个li标签let cli document.createElement(li)//使用标签名获取li标签动态方法let myLi document.getElementsByTagName(li)//使用静态方法获取li标签let ulSon document.querySelectorAll(li)//给创建的标签添加字符串cli.innerHTML 桃树;//把创建的标签添加到htmllist1.appendChild(cli);console.log(myLi,ulSon); //输出后的结果动态的包含新创建的标签静态的不包含相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title获取dom元素/title
/head
bodyinput typetext nameuser placeholder输入用户名 brinput typetext nameage placeholder输入用户年龄 brdiv nameuser不许玩原神/divdiv classqiao idcao铜雀春深锁二乔/divdiv classqiao小荷才露尖尖角/divul idlist1li松树/lili杨树/lili梧桐树/lili石榴树/lili梨树/li/ulul idlist2li松树2/lili杨树2/lili梧桐树2/lili石榴树2/lili梨树2/li/ul
/body
/html
script/*获取dom元素document.gerElementbyId()document.gerElementsBytagName()document.gerElementsByclassName()document.gerElementsByname()通过name属性查找元素ie下只针对于input元素起作用在标准浏览器下可以适用于任何标签注意gerElementsByname()的调用对象只能是 document以上4个方法都是 动态方法querySelector(css选择器) 新方法ie低版本不支持返回的是符合选择器的第一个元素对象querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象以上两个方法是静态方法所有选择器都支持特点1.传入的参数是选择器通过选择器检索出具体元素2.他的调用对象只能是 document3.querySelector(css选择器) querySelectorAll(css选择器)[0]4.都支持多个选择器如果使用多个选择器, 用逗号分开静态和动态的区别动态获取的元素集合在以后的操作中随着操作的增删和修改而改变静态获取的元素集合不会随着以后的操作而改变*/let user document.getElementsByName(user)console.log(user);let age document.querySelector(input[nameage]) //里面是属性选择器console.log(age);let inputs document.querySelector(input)console.log(inputs);//获取所有的divlet divs document.querySelectorAll(div)console.log(divs);//通过类名获取let qiao document.querySelectorAll(.qiao)console.log(qiao);//通过id名获取let cao document.querySelector(#cao)console.log(cao);//同时使用多个选择器let ele document.querySelectorAll(input,div)console.log(ele);//选择所有的li元素let lis document.querySelectorAll(li)console.log(lis);//获取list1下面所有的li元素let lis1 document.querySelectorAll(#list1li)console.log(lis1);let myLi document.getElementsByTagName(li)console.log(myLi);let ulSon document.querySelectorAll(li)
// ulSon[0].classNameabcmyLi[0].classNameabc//静态和动态的区别let list1 document.getElementById(list1)let cli document.createElement(li)cli.innerHTML 桃树;list1.appendChild(cli);console.log(myLi,ulSon);/script
