宿迁网站建设开发,山西焦煤集团公司网站,环球资源网商务网站建设目的,那里可以做网站的吗DOM对象
什么是DOM
DOM(Document Object Model)#xff1a;文档对象模型#xff0c;就是Javascript将HTML文档的各个组成部分封装为对象#xff0c;通过修改HTML元素的内容和样式动态改变页面。
如何获取DOM对象
获取DOM中的元素对象#xff08;Element对象/标签…DOM对象
什么是DOM
DOM(Document Object Model)文档对象模型就是Javascript将HTML文档的各个组成部分封装为对象通过修改HTML元素的内容和样式动态改变页面。
如何获取DOM对象
获取DOM中的元素对象Element对象/标签操作标签的属性
标签对象通过document获取document对象通过Window对象获取以下是document对象提供的用于获取element元素对象的ApI如下 这里展示了getElementById,其余API调用类似。
获取元素对象
!DOCTYPE html
html langen
headmeta charsetUTF-8titletest/title
/head
bodydiv id001hhh/divscriptvar divdemo document.getElementById(001)alert(divdemo)/script
/body
/html操作属性
如何查看文档呢
scriptvar divdemo document.getElementById(001)divdemo.innerHTML hxw 好帅alert(divdemo)
/script发现内容从’hhh’变成了’hxw 好帅’,我爱敲代码 案例
需求
点亮灯泡将所有的div标签的白哦前提内容后面加上Yes使得所有的复选框被选中状态 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg idh1 src../img/off.gif brbrdiv classclshxw 好帅/div brdiv classclshxw 将会是一个优秀的程序员/div brinput typecheckbox namehobby 敲代码input typecheckbox namehobby 打篮球input typecheckbox namehobby 打乒乓球
/body
/html效果如下
需求实现
点亮灯泡其实本质就是换一张图片需要获取img标签对象来操作src属性在div标签内容的后面添加Yes并且是红色字体获取原有内容通过font属性进行修改字体颜色。通过标签名获取所有的div标签对div标签进行遍历处理获取div标签的原有内容然后追加very good,替换掉原来的内容将所有的复选框内容呈现被选中的状态checkbox标签对象的checked属性设置为true可以使得复选框被选中所以通过name属性获取所有的checkbox标签遍历所有的chekbox标签设置每个checkbox标签的checked属性
代码实现 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg idh1 src../img/off.gif brbrdiv classclshxw 好帅/div brdiv classclshxw 将会是一个优秀的程序员/div brinput typecheckbox namehobby 敲代码input typecheckbox namehobby 打篮球input typecheckbox namehobby 打乒乓球scriptvar img document.getElementById(h1);img.src ../img/on.gifvar divs document.getElementsByTagName(div);for(let i 0; i divs.length; i ){const div divs[i];div.innerHTML font color red Yes! /font}var ins document.getElementsByName(hobby);for(let i 0; i ins.length; i ){const check ins[i];check.checked true;}/script
/body
/htmljs事件
什么是事件
当我想要在游戏中注册一个新账号输入用户名页面会给我一个反馈我这个用户名是否存在以及是否符合其命名规则要想实现这个就需要使用事件。理解以下的概念 事件Event 在 JavaScript 中事件是指在用户与页面交互时或在页面加载过程中发生的特定动作比如点击按钮、提交表单、页面加载完成等。 事件处理函数Event Handler 事件处理函数是当特定事件发生时执行的函数。例如当用户点击一个按钮时可能会触发一个函数来处理这个点击事件。 事件监听Event Listener 事件监听是一种机制用于监听和响应用户操作或其他事件。通过事件监听你可以指定在特定事件发生时应该执行哪个函数。
事件绑定的方式 事件绑定的函数只有在事件触发的时候才会被调用 方式一通过html中的事件属性进行绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typebutton idbtn1 value事件绑定1 onclickon()scriptfunction on(){alert(按钮一被点击了...)}/script
/body
/html方式二通过DOM中Element元素的事件属性进行绑定 html中的标签被加载成element对象可以通过对象的属性来操作标签的属性。此时可以添加一个按钮 input typebutton idbtn2 value事件绑定2scriptdocument.getElementById(btn2).onclick function(){alert(按钮二被点击...)}/script
