// 1,getElementById:返回元素节点
document.getElementById();
// 2,getElementsByClassName:返回HTMLCollection对象(IE9以下不支持。)
document.getElementsByClassName();
// 3,getElementsByTagName:返回HTMLCollection对象
document.getElementsByTagName();
// 4,getElementsByTagName:返回nodeList对象,第0项为元素节点
document.getElementsByName();
// 5,querySelector:返回选择器匹配到的第一个元素节点(选择器同css用法一致,支持由外到内的嵌套写法)
document.querySelector('#box em');
// 6,querySelectorAll:返回nodeList对象(类似数组对象,每个值为选中元素节点)
document.querySelectorAll();
// 7,获取子元素集合
// childNodes(IE:只获取元素节点;非IE:获取元素节点与文本节点;)
document.getElementById().childNodes;
// children(只获取元素节点,浏览器表现相同)
document.getElementById().children;
// 8,获取最后一个元素节点:lastElementChild(IE<9不支持)
document.getElementById().lastElementChild;
// 9,获取第一个元素节点:firstElementChild(IE<9不支持)
document.getElementById().firstElementChild;
// 10,获取后一个兄弟元素节点
// nextSibling(IE<9:后一个兄弟元素节点;非IE6,7,8:后一个兄弟节点,文本节点或者元素节点)
document.getElementById().nextSibling;
// nextElementSibling(IE<9不支持)
document.getElementById().nextElementSibling;
// 11,获取前一个兄弟元素节点
// previousSibling(IE<9前一个兄弟元素节点;非IE6,7,8:前一个兄弟节点,文本节点或者元素节点)
document.getElementById().previousSibling;
// previousElementSibling(IE<9不支持)
document.getElementById().previousElementSibling;
// 12,parentNode:获取父元素节点(parentElement用法一致,仅IE支持)
document.getElementById().parentNode;
// offsetParent:获取第一个设置定位的上级元素,返回元素节点
console.log(document.getElementById().offsetParent)
// 14,获取指定的某个上级元素的方法
let el = document.getElementById();
getParents(el, {id: 'box'})
function getParents (el, option) {
let ele = null;
while (el.tagName !== 'BODY') {
const attr = Object.keys(option)
if (el[attr].toUpperCase() === option[attr].toUpperCase()) {
ele = el;
break;
}
el = el.parentNode;
}
return ele
}
dom操作获取元素的若干方法
本人前端水平有限,写的知识点可能有谬误,欢迎留言指正,如果看到,我将第一时间回复。感谢支持!