还可以再学习一下[js] 思源笔记左侧空白区域显示心灵毒鸡汤或倒计时 - 链滴
学习得到光标所在块得到 id
通过块 id 遍历 DOM 树结构获得面包屑及其它
document.addEventListener 函数
防抖函数
/*css部分*/ .fn__flex-1.dock__item--space { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ font-size: 20px; /* 字体大小 */ writing-mode: vertical-rl; /* 竖向排列 */ text-align: center; /* 文字居中对齐 */ }
//左侧空白部分显示自定义文字js部分 // 获取左侧栏目标元素 var targetElement = document.querySelector('div.fn__flex-1.dock__item--space'); targetElement.textContent = '过 犹 不 及'; // 防抖函数 function debounce(func, wait) { let timeout; return function() { const context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } // 检查 breadcrumbElement 的函数 function checkBreadcrumbElement(event) { const clickedElement = event.target; // 向上遍历DOM树直到找到具有data-node-id属性的元素 let element = clickedElement; while (element && !element.hasAttribute('data-node-id')) { element = element.parentNode; } // 如果找到了具有data-node-id属性的元素 if (element) { const nodeId = element.getAttribute('data-node-id'); console.log('找到的data-node-id是:', nodeId); // 获取data-node-id元素的祖父元素 let grandParentElement = element.parentNode.parentNode; // 查找祖父元素的兄弟元素中是否有protyle-breadcrumb类 let siblingElements = Array.from(grandParentElement.parentNode.children).filter(child => child !== grandParentElement); let breadcrumbElement = siblingElements.find(sibling => sibling.classList.contains('protyle-breadcrumb')); console.log("breadcrumbElement", breadcrumbElement); if (breadcrumbElement) { // 找到protyle-breadcrumb元素下的protyle-breadcrumb__bar let breadcrumbBar = breadcrumbElement.querySelector('.protyle-breadcrumb__bar'); if (breadcrumbBar) { // 在protyle-breadcrumb__bar下寻找所有的protyle-breadcrumb__item let breadcrumbItems = breadcrumbBar.querySelectorAll('.protyle-breadcrumb__item'); console.log("breadcrumbItems", breadcrumbItems); if (breadcrumbItems.length > 0) { // 获取第二个倒数的面包屑项 let secondLastBreadcrumbItem = breadcrumbItems[breadcrumbItems.length - 2]; if (secondLastBreadcrumbItem) { // 获取第二个倒数面包屑项的文本内容 let textElement = secondLastBreadcrumbItem.querySelector('.protyle-breadcrumb__text'); if (textElement) { let textContent = textElement.textContent; targetElement.textContent =textContent; console.log('第二个倒数的标题内容是:', textContent); } } else { console.log('没有找到第二个倒数的面包屑项'); } } else { console.log('没有找到protyle-breadcrumb__item元素'); } } else { console.log('没有找到protyle-breadcrumb__bar元素'); } } else { console.log('没有找到protyle-breadcrumb元素'); } } else { console.log('没有找到具有data-node-id属性的元素'); } } // 为点击事件绑定防抖后的事件处理函数 document.addEventListener('click', debounce(checkBreadcrumbElement, 100));
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于