网站的建设费用分为,企业官网招聘,站酷网logo,网站建设确认表1.DOM(Document Object Model) 会把网页里面的元素当成对象去操作,包含对象的属性,属性值,方便我们去 操作网页。 整个页面最终会形成一个对象 :document ,页面里面的所有的元素(如 标签 ) 最终都会转换成 js 里面的对象。 1.1 获取页面的元素#xff08;通过选择器#xff0…1.DOM(Document Object Model) 会把网页里面的元素当成对象去操作,包含对象的属性,属性值,方便我们去 操作网页。 整个页面最终会形成一个对象 :document ,页面里面的所有的元素(如 标签 ) 最终都会转换成 js 里面的对象。 1.1 获取页面的元素通过选择器 1.1.1 按id属性查找 格式document.getElementById(id属性值); 此函数只能返回两种情况,要么是0个对象(即为null),要么是1个。返回的是一个具体的对象。 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptwindow.onloadfunction(){//1.获得input标签的对象var inputdocument.getElementById(mybutton);console.log(input);//2.修改value的属性值var num3;setInterval(function(){num--;input.valuenum;if(num0){location.hrefhttps://www.baidu.com;}},1000);
}/script/headbody恭喜你注册成功input typebutton idmybutton value3 /秒后跳转界面。 /body
/html最终的效果就是恭喜你注册成功3秒后跳转界面--恭喜你注册成功2秒后跳转界面--恭喜你注册成功1秒后跳转界面--恭喜你注册成功0秒后跳转界面;最后直接跳转到百度界面。 1.1.2 通过class查找 格式document.getElementsByClassName(类名); 返回的是一个HTMLCollection(类数组),具备数组的特性:有下标,有length属性 。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.c1{height: 100px;width: 100px;background-color: burlywood;}.c2{height: 100px;width: 100px;background-color:chocolate;}/stylescript typetext/javascriptwindow.onloadfunction(){//通过class类名获取标签对象var c1document.getElementsByClassName(c1);console.log(c1);}/script/headbodydiv classc1跳跳虎/divdiv classc2东北虎/divdiv classc1小哭包/div/body
/html注意若是使用alert函数来输出c1会显示如下结果 1.1.3 通过标签名查找 格式 document.getElementsByTagName(标签名); 返回的同样是一个HTMLCollection(类数组),具备数组的特性:有下标,有length属性 。 //通过标签名获取标签对象var c1document.getElementsByClassName(div);console.log(c1); 1.1.4 通过name属性查找
后期如果想把标签的元素内容发给java服务器,都需要根据name属性值来完成。 格式document.getElementsByName(name属性的属性值); 返回的是一个NodeList集合(同样可看作一个类数组)比HTMLCollection集合更强大。
注意只有文档对象才能使用getElement……方法类数组不具备。当类数组需要使用getElement……方法时需要使用 getElement……[0]来获取对象。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascript//1.获得c1所在的对象window.onloadfunction(){
// var c1document.getElementsByClassName(c1);
// console.log(c1);//2.获得d1里面的2个c1//先获得d1var d1document.getElementsByClassName(d1);//此时d1是类数组不是document文档对象//var d1document.getElementsByClassName(d1)[0];//再获得c1var c1d1.getElementsByClassName(c1);console.log(c1);}/script/headbodydiv classd1div classc1孙尚香/divdiv classc1鲁班七号/div/divdiv classc1貂蝉/divp classc1吕布/p/body
/html因为var d1document.getElementsByClassName(d1);//此时d1是类数组不是document文档对象当使用var c1d1.getElementsByClassName(c1)来获得c1时根本就不能获取到c1。此时只需要更改获取d1的代码即可。
var d1document.getElementsByClassName(d1)[0]; 1.1.5 通过document.querySelector() 来选择元素
选择单个元素 document.querySelector(#id值); document.querySelector(.class值); 返回的是单个元素对象或者null,类似id选择器 。
console.log(document.querySelector(.d1)) 选择多个元素 document.querySelectorAll(标签名1标签名2……); console.log(document.querySelectorAll(div,p)); 返回的是NodeList类数组。 1.2 DOM结构 标签名第一级第二级第三极第四级divHTMLDivElementHTMLElementElementNodepHTMLParagraphElementHTMLElementElementNodeinputHTMLInputElementHTMLElementElementNode
1.2.1 Element和Node的区别 在网页当中,所有的标签都是Element,也一定是Node 但是所有的Node不一定是Element,比如 文字,注释,回车,是Node而不是Element。 1.2.2 Element的常用属性
1.children:获得当前元素下面的子级别元素,返回的是一个HTMLCollection集合
2.parentElement:获得当前元素的父级元素
3.nextElementSibling:获得当前元素的下一个兄弟元素
4.previousElementSibling:获得当前元素的前一个兄弟元素
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript typetext/javascriptwindow.onloadfunction(){//以第一个c1为参照物作为自己//1.获得自己的孩子var myselfdocument.getElementsByClassName(c1)[0];var childmyself.children;console.log(child);//2.获得自己的父级元素var parentmyself.parentElement;console.log(parent);//3.获得自己的上一个元素var previousmyself.previousElementSibling;console.log(previous);//4.获得自己的下一个元素var nextmyself.nextElementSibling;console.log(next);}/script/headbodydiv idd1div大哥/divdiv classc1div儿子/div/divdiv三弟/div/divdiv classc1二叔/div/body
/html5.input标签修改内容: 通过value属性,但是其他一些双标签,可以使用以下两类属性去修改
innerHTML:设置或者获取当前对象的标签内容innerText: 设置或者获取当前对象的文本内容 //5.将大哥改为giegie,并将颜色设置为redvar previousmyself.previousElementSibling;previous.innerTextgiegie;previous.style.colorred;console.log(previous);
