1. Query Selector
优质
小牛编辑
134浏览
2023-12-01
常用的 class、id、属性 选择器都可以使用 document.querySelector
或 document.querySelectorAll
替代。区别是
document.querySelector
返回第一个匹配的 Elementdocument.querySelectorAll
返回所有匹配的 Element 组成的 NodeList。它可以通过[].slice.call()
把它转成 Array- 如果匹配不到任何 Element,jQuery 返回空数组
[]
,但document.querySelector
返回null
,注意空指针异常。当找不到时,也可以使用||
设置默认的值,如document.querySelectorAll(selector) || []
注意:
document.querySelector
和document.querySelectorAll
性能很差。如果想提高性能,尽量使用document.getElementById
、document.getElementsByClassName
或document.getElementsByTagName
。
1.0 选择器查询
// jQuery
$('selector');
// Native
document.querySelectorAll('selector');
1.1 class 查询
// jQuery
$('.class');
// Native
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
1.2 id 查询
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');
1.3 属性查询
// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
1.4 后代查询
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
1.5 兄弟及上下元素
兄弟元素
// jQuery
$el.siblings();
// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
上一个元素
// jQuery
$el.prev();
// Native
el.previousElementSibling;
下一个元素
// next
$el.next();
// Native
el.nextElementSibling;
1.6 Closest
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
// jQuery
$el.closest(queryString);
// Native - Only latest, NO IE
el.closest(selector);
// Native - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
1.7 Parents Until
获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。
// jQuery
$el.parentsUntil(selector, filter);
// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
1.8 Form
Input/Textarea
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
获取 e.currentTarget 在
.radio
中的数组索引// jQuery
$('.radio').index(e.currentTarget);
// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents
jQuery 对象的 iframe
contents()
返回的是 iframe 内的document
Iframe contents
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
Iframe Query
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
1.10 获取 body
// jQuery
$('body');
// Native
document.body;
1.11 获取或设置属性
获取属性
// jQuery
$el.attr('foo');
// Native
el.getAttribute('foo');
设置属性
// jQuery, note that this works in memory without change the DOM
$el.attr('foo', 'bar');
// Native
el.setAttribute('foo', 'bar');
获取
data-
属性// jQuery
$el.data('foo');
// Native (use `getAttribute`)
el.getAttribute('data-foo');
// Native (use `dataset` if only need to support IE 11+)
el.dataset['foo'];