Home  >  Article  >  Web Front-end  >  HTML5 actual combat and analysis of CSS selector - querySelector()

HTML5 actual combat and analysis of CSS selector - querySelector()

黄舟
黄舟Original
2017-02-10 14:44:061978browse

Today I will introduce to you the relevant knowledge of HTML5. Today I will mainly introduce the new selector as the theme. The selector introduced to you today is querySelector(). I will share it with you by comparing the two writing methods of jQuery and JavaScript. I hope it can be helpful to everyone on the road to learning HTML5.

The querySelector() method receives a CSS selector and returns the first element that matches the pattern. If no matching element is found, null is returned. A small example is as follows:


 1) Get the tag

  JavaScript code

##

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

	body.style.background = "red";

	alert(body)//[object HTMLpElement]


 

jQuery code

var $body = $("body");

$body.css({
	'background': "red"
});

alert($body) //[object Object]

 

Preview effect

 

1、JavaScript

HTML5 actual combat and analysis of CSS selector - querySelector()


## 

2、jQuery


HTML5 actual combat and analysis of CSS selector - querySelector()## 

2) Get ID

 

HTML code

<p id="box1" class="box">梦龙小站</p>
<section id="box2" class="box">梦龙小站</section>
JavaScript code

var box1 = document.querySelector(&#39;#box1&#39;);

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLpElement]
jQuery code

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

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

alert($box1)  //[object Object]
Preview effect


1、JavaScript

HTML5 actual combat and analysis of CSS selector - querySelector()
##2. jQuery



# Call querySelector( through document type ) method, matching elements will be found within the scope of document elements. When the querySelector() method is called through the element type, matching elements will only be found within the range of descendant elements of the element. CSS selectors can be simple or complex, depending on the situation. If an unsupported selector is passed in, querySelector() will report an error.

HTML5 actual combat and analysis of CSS selector - querySelector() HTML5 actual combat and analysis CSS selector——querySelector() is introduced here. Considering that HTML5 requires more experience and contains a lot of things, specific knowledge points will be introduced one by one, so each article will not necessarily be very long. I hope everyone can understand it. The advantage of doing this is to facilitate search in the future. Thank you for your support and love. For more content related to HTML5, please pay attention to the updates on the actual combat and analysis of HTML5 from Menglong Station.

The above is the content. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn