强大的js原生选择器 document.querySelector()

JavaScript017

强大的js原生选择器 document.querySelector(),第1张

一般常用的原生选择器有:

id选择器:document.getElementById("test")

name选择器:document.getElementsByName("test")

节点选择器:document.getElementsByTagName("p")

class选择器:document.getElementsByClassName("test")

这次要详细说的是 document.querySelector() , 开挂般的存在, jQuery的完美替代版本。

接收一个字符串参数, 返回返文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。 如果找不到匹配项,则返回 null 。

3.返回带有foo或者bar样式类的首个元素

4.返回id为‘my-element’的 p 元素

6.其他选择方式可自行排列组合

document.querySelector() 的用法虽然与jQuery里的$()选择器类似,但有些细微区别:

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下:

$(...).事件名(function() { })

属性样式有:

$(...).css("border","1px solid red")

$(...).css({...})

$(...).css("border")

$(...).attr(属性名,值)

$(...).html() innerHTML

$(...).text() innerText

$(...).val() value值

$(...).addClass() 增加

$(...).removeClass() 移除

$(...).toggleClass() 开关

-webkit-autofill 这种东西要查找浏览器的兼容。选择器的话看下jquery源码就知道了是否支持一种样式。var input= document.createElement('input'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.lengthreturn function(prop) { if (prop in input.style) return trueprop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase()})for (var i = 0i <leni++) { if (vendors[i] + prop in input.style) { // browser supports eg:box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true} } return false}