html5 手机网站导航条,oppo手机商城,沃尔玛网上商城中国,英文网站群建设目录 前言
一.父子关系
父子关系的常用属性
childNodes 获取所有的子节点
children 获取所有的子元素#xff08;dom元素#xff09;
firstChild 获取元素的第一个子节点#xff0c;相当于 childNodes[0]
firstElementChild 获取元素的第一个元素 相当于 children[0]…目录 前言
一.父子关系
父子关系的常用属性
childNodes 获取所有的子节点
children 获取所有的子元素dom元素
firstChild 获取元素的第一个子节点相当于 childNodes[0]
firstElementChild 获取元素的第一个元素 相当于 children[0]
lastChild 获取元素的最后一个子节点
lastElementChild 获取元素的最后一个子元素
注意
兄弟关系的常用属性
nextSibling 获取当前元素的下一个兄弟节点
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(#listli:nth-child(6))li.style.fontSize 40pxconsole.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 (eleele.nodeType!1) { //如果ele存在console.log(输出 ele.nodeType);ele ele.nextSibling;// //如果没有下一个元素// if (elenull) {// return null;// }}return ele;}console.log(getEle(li));let li10 document.querySelector(#listli: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));
