目录
firstChild 获取元素的第一个子节点,相当于 childNodes[0]
firstElementChild 获取元素的第一个元素 相当于 children[0]
nextElementSibling 获取当前元素的下一个兄弟元素(ie 6 7 8 不支持)
previousSibling 获取当前元素的上一个兄弟节点
previousElementSibling 获取当前元素的上一个兄弟元素(ie 6 7 8 不支持)
案例 ;封装一个通用方法,使其在低版本ie中,也可以直接获取下一个dom元素,传入当前元素对象,返回下一个元素对象
前言
父子关系和兄弟关系在 DOM 中具有重要的作用,使开发者能够方便地导航和操作 DOM 元素。它们为动态创建和修改 DOM 结构、样式和布局控制、事件处理和委托等提供了强大的功能和灵活性。
一.父子关系
父子关系的常用属性
childNodes 获取所有的子节点
children 获取所有的子元素(dom元素)
let list = document.querySelector('#list') console.log(list.childNodes,list.children);
firstChild 获取元素的第一个子节点,相当于 childNodes[0]
firstElementChild 获取元素的第一个元素 相当于 children[0]
//把第一个li的颜色设置为红色 list.firstElementChild.style.color = '#f00';
let list = document.querySelector('#list') console.log(list.firstChild,list.firstElementChild);
lastChild 获取元素的最后一个子节点
lastElementChild 获取元素的最后一个子元素
console.log(list.lastChild,list.lastElementChild); list.lastElementChild.style.fontSize = '40px';
注意
标准浏览器好ie高版本会把回车(换行)当做文本节点,ie低版本(8及以下)不会,也就是ie 6 7 8 不支持。
parentNode 和 parentElement 都是查找元素的父元素 一般的 parentNode 兼容性更好,因此更常用
//查找父节点 console.log(li.parentNode,li.parentElement);
兄弟关系的常用属性
nextSibling 获取当前元素的下一个兄弟节点
nextElementSibling 获取当前元素的下一个兄弟元素(ie 6 7 8 不支持)
let li = document.querySelector('#list>li:nth-child(6)') li.style.fontSize = '40px' console.log( li.nextSibling,li.nextElementSibling); //给当前元素的下一个元素,添加样式 li.nextElementSibling.style.color = 'pink'
previousSibling 获取当前元素的上一个兄弟节点
previousElementSibling 获取当前元素的上一个兄弟元素(ie 6 7 8 不支持)
//获取当前元素的上一个 节点和上一个元素 console.log(li.previousSibling,li.previousElementSibling); li.previousElementSibling.style.color = '#f60'
案例 ;封装一个通用方法,使其在低版本ie中,也可以直接获取下一个dom元素,传入当前元素对象,返回下一个元素对象
function getEle(domObj){
// 如果不存在参数
if (!domObj) {
return null;
}
//获取传入对象的下一个节点
let ele = domObj.nextSibling;
while (ele&&ele.nodeType!=1) { //如果ele存在
console.log('输出'+ ele.nodeType);
ele = ele.nextSibling;
// //如果没有下一个元素
// if (ele==null) {
// return null;
// }
}
return ele;
}
console.log(getEle(li));
let li10 = document.querySelector('#list>li:nth-child(10)')
console.log(getEle(li10));
let head = document.querySelector('head')
console.log(getEle(head));
let html = document.querySelector('html')
console.log(html);
console.log(getEle(html));