大发体育娱乐在线-大发体育娱乐官方网站-大发体育娱乐登录网址
做最好的网站

HTML5实战与剖析之CSS选择器querySelector

来源:http://www.dfwstonefabricators.com 作者:关于计算机 人气:191 发布时间:2019-11-23
摘要:今天为大家介绍一下HTML5的相关文化,今儿首要以新扩充的选取器为宗旨,为我们介绍。前几日为大家介绍的选择器是querySelector()。小编将用jQuery和JavaScript二种写法比较的不二法门为我

今天为大家介绍一下HTML5的相关文化,今儿首要以新扩充的选取器为宗旨,为我们介绍。前几日为大家介绍的选择器是querySelector()。小编将用jQuery和JavaScript二种写法比较的不二法门为我们分享。希望能为我们在攻读HTML5的征程上全数利于。

 HTML5中的querySelector()方法和querySelectorAll()方法都在前几篇中为大家介绍过了,不清楚大家了然得什么了吧?在那地复习一下,querySelector()方法是回到与传递的CSS接受符相相配的率先个要素;querySelectorAll()方法是回来与传递的CSS采用符相匹配的富有因素,是三个NodeList对象。轻松的记念之后,小编来分享一下新一个办法——getElementsByClassName方法。

  querySelector()方法选拔一个CSS选拔符,重临与该形式相称的首先个因素,若无找到相配的要素,重返null。小例子如下:

  随着HTML4在Web开辟领域得到了累累运用之后,引致了HTML4有了重重的改换。由于class类名在CSS中使用布满,所以众多气象下编写制定JavaScript代码的时候要拿走的并不是ID而是class类名。于是乎,HTML5就新扩张了getElementsByClassName()方法。getElementsByClassName()方法能够由此document对象及具备HTML元素调用该方法。获取三个成分的类名那么些获得方式最先出以后重重JavaScript库中,他们都是透过DOM作用达成的,质量方面消耗超级大。有了那个原生的getElementsByClassName()方法,在性质方面省了无数。

 

  getElementsByClassName()方法选取三个参数,这么些参数也是CSS选取符的字符串,可以是二个也能够是三个。getElementsByClassName()方法重临的则是带有钦定类的保有因素的NodeList。注意传入三个类名的时候,类名的前后相继顺序不重大。理论底蕴就先为咱们介绍到此处,上面来看小例子吗。

  1)获取标签

 

 

 

  JavaScript代码

  1、获取具备类名称为box,并丰硕铁锈红背景

 

 

  HTML代码

梦龙小站div

梦龙小站div

梦龙小站i 梦龙小站div

梦龙小站em

梦龙小站em 梦龙小站em

 

var body = document.querySelector('body');  

    body.style.background = "red";  

    alert(body)//[object HTMLDivElement]  

  JavaScript代码

var allBox = document.getElementsByClassName("box"),
 i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i < l; i++){
 allBox[i].style.background = "red";
}

 

 

 

  预览效果

 

 

 

  2、获取ID名叫box2成分里面类名叫box的因素,并丰富煤黑背景

 

  jQuery代码

  HTML代码

梦龙小站div

梦龙小站div

梦龙小站i 梦龙小站div

梦龙小站em

梦龙小站em 梦龙小站em

 

  1. var $body = $("body");

    $body.css({  
        'background': "red"  
    });  
    
    alert($body) //[object Object]  
    

  JavaScript代码

 

//获取类名是oi和op的元素,并加上红色背景
var allBox = document.getElementById("box2").getElementsByClassName("box"),
 i, len;

alert(allBox[0].id) //[object NodeList]


for(i=0, l = allBox.length; i < l; i++){
 allBox[i].style.background = "red";
}

 

 

  预览效果

 

 

  调用这么些方法的时候,只要能找到相配的因素才会回来NodeList。在document对象上调用getElementsByClassName()方法始终都会回去与类名相相配的装有因素。在要素上调用getElementsByClassName()方法就只会再次回到后代成分中相称的因素。

  使用这一个主意能够更实惠的为带有某个类名的因素增加事件管理程序,进而不用再局限于选取ID恐怕标签加多事件管理程序了。因为重临的靶子是NodeList,所以使用那几个方法与行使getElementsByTagName()方法以至其它重临NodeList的DOM方法都具备同等的性问责题。都一定要得用for循环来增添。所以梦龙认为,运用JavaScript库中的方法获得成分,和运用getElementsByClassName()方法拿到成分有利有弊了。

  getElementsByClassName()方法帮助部分今世浏览器如,IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+。

  HTML5实战与解析之CSS选拔器——getElementsByClassName()方法就为我们介绍完了。计算一下,getElementsByClassName()方法正是用JavaScript原生方法获得成分类名的。getElementsByClassName()方法是HTML5中新扩大长的章程,谢谢咱们的支撑。

...

  预览效果

 

  1、JavaScript

 

图片 1

 

  2、jQuery

 

图片 2

 

 

  2)获取ID

 

  HTML代码

梦龙小站

梦龙小站

 

 

  JavaScript代码

var box1 = document.querySelector('#box1');  

    box1.innerHTML = "这是box1";  

    alert(box1)//[object HTMLDivElement]  

 

 

  jQuery代码

 

var $box1 = $("#box1");  

$box1.html("这是用jQuery实现的");  

alert($box1)  //[object Object]  

 

  预览效果

 

  1、JavaScript

 

图片 3

 

  2、jQuery

 

图片 4

 

 

  通过document类型调用querySelector()方法的时候,会在文书档案成分的约束内寻觅相配的要素。而由此element类型调用querySelector()方法的时候,只会在该因素后代成分的界定内找出匹配成分。CSS接受符能够轻便也得以复杂,示景况而定。要是传入了不被扶植的选拔符,querySelector()会报错。

  HTML5实战与分析之CSS选拔器——querySelector()就为大家介绍到这里了。构思到HTML5那下面要花的涉世一点都相当大学一年级部分,里面包车型大巴事物相当多,所以实际的小知识点会风度翩翩篇意气风发篇的牵线,所以每篇的字数不自然会点不清。希望大家能够通晓一下,这样做的利润就为了前天可以方便寻觅。谢谢大家的支撑与深爱,更加的多关于HTML5的连锁内容诚邀关切梦龙小站关于HTML5实战与解析的翻新。

...

本文由大发体育娱乐在线发布于关于计算机,转载请注明出处:HTML5实战与剖析之CSS选择器querySelector

关键词:

最火资讯