做食物网站,seo快速提升排名,互动平台表示公司帮助国内客户进行新冠药物研发,河北石家庄DOM#xff1a;
概念#xff1a;Document Object Model#xff1a; 文档对象模型
将标记语言的各个组成部分封装为对应的对象#xff1a;
Document: 整个文档对象
Element#xff1a;元素对象
Attribute#xff1a; 属性对象
Text#xff1a;文本对象
Comment
概念Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对应的对象
Document: 整个文档对象
Element元素对象
Attribute 属性对象
Text文本对象
Comment注释对象 JavaScript通过DOM就能够对HTML进行操作
1改变HTML元素的内容
2改变HTML元素的样式
3对HTML DOM事件作出反应
4添加和删除HTML元素 DOM是W3C的标准定义了访问HTML和XML文档的标准分为3个不同的部分。 Core DOM - 所有文档类型的标准模型。
Document整个文档对象
Element元素对象
Attribute属性对象
Text文本对象
Comment注释对象 XML DOM - XML文档的标准类型 HTML DOM - HTML 文档的标准模型
将所有的标签都包装成对象。
image img
Button: input typebutton HTML中Element对象可以通过Document对象获取而Document对象是通过Window对象获取的。
Document对象中提供了以下获取Element元素对象的函数 获取Element元素的四种方式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript// 1. 获取Element元素// 1.1 获取元素- 根据ID获取 // var image document.getElementById(h1);// alert(image);// 1.2 获取元素 - 根据标签获取// var divs document.getElementsByTagName(div);// for(let i 0; i divs.length; i) {// alert(divs[i]);// }// 1.3 获取元素 - 根据name获取// var hobbys document.getElementsByName(hobby);// for(let i 0; i hobbys.length; i) {// alert(hobbys[i]);// }// 1.4 获取元素 - 根据class属性获取var divs document.getElementsByClassName(cls);for(let i 0; i divs.length; i) {alert(divs[i]);}/script
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript// 1. 获取Element元素// 1.1 获取元素- 根据ID获取 // var image document.getElementById(h1);// alert(image);// 1.2 获取元素 - 根据标签获取// var divs document.getElementsByTagName(div);// for(let i 0; i divs.length; i) {// alert(divs[i]);// }// 1.3 获取元素 - 根据name获取// var hobbys document.getElementsByName(hobby);// for(let i 0; i hobbys.length; i) {// alert(hobbys[i]);// }// 1.4 获取元素 - 根据class属性获取// var divs document.getElementsByClassName(cls);// for(let i 0; i divs.length; i) {// alert(divs[i]);// }// 2. 查询参考手册属性和方法var divs document.getElementsByClassName(cls);var div1 divs[0];div1.innerHTML 传智教育666;/script
/html 案例
通过DOM操作完成如下效果
1、点亮灯泡
2、将所有的div标签的标签体内容后面加上very good
3、使所有的复选框呈现选中的状态。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM-案例/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript//1. 点亮灯泡 src的属性值var image document.getElementById(h1);image.src img/on.gif;//2. 将所有div标签的内容后面加上var divs document.getElementsByTagName(div);for(let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorredvery good/font; }//3. 使所有的复选框呈现选中状态var hobbys document.getElementsByName(hobby);for(let i 0; i hobbys.length; i) {const hobby hobbys[i];hobby.checked true;}/script
/html 两步操作
1获取需要操作的元素对象
2查找参考手册查看这些元素的属性和方法来完成元素的控制。 属性和方法就是对象思想。
