gpt生成的2个html布局异常节点发现函数

使用场景

布局的时候出现滚动条莫名滚动条, 如果想要移除首先得定位到导致滚动条的元素,下面的2个函数可以辅助你快速定位它们,找出问题.

查找出现滚动条的元素

提示词: 从浏览器dom中找到 scrollLeft不为0的元素,并打印其xpath,请使用js帮我实现该功能

function getXPathForElement(element) {
    const path = [];
    while (element && element.nodeType === Node.ELEMENT_NODE) {
        let index = 1;
        let sibling = element.previousSibling;
        while (sibling) {
            if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === element.tagName) {
                index++;
            }
            sibling = sibling.previousSibling;
        }
        const tagName = element.tagName.toLowerCase();
        const identifier = index > 1 ? "[" + index + "]" : "";
        path.unshift(tagName + identifier);
        element = element.parentNode;
    }
    return path.length ? "/" + path.join("/") : null;
}

function findElementsWithScrollLeft() {
    const elementsWithScroll = [];
    const allElements = document.querySelectorAll('*');
    
    allElements.forEach(element => {
        if (element.scrollLeft !== 0) {
            elementsWithScroll.push(element);
        }
    });

    return elementsWithScroll;
}

const elementsWithScroll = findElementsWithScrollLeft();

if (elementsWithScroll.length > 0) {
    console.log("Elements with scrollLeft !== 0:");
    elementsWithScroll.forEach(element => {
        const xpath = getXPathForElement(element);
        console.log("XPath:", xpath);
    });
} else {
    console.log("No elements with scrollLeft !== 0 found.");
}

找到右侧出现在屏幕外侧,导致滚动条出现的元素的元素

提示词: 背景和上述类似, 查找规则改为其BoundingClientRect的right值大于屏幕宽度的元素,要求返回所有,而不是其中一个

function getXPathForElement(element) {
    const path = [];
    while (element && element.nodeType === Node.ELEMENT_NODE) {
        let index = 1;
        let sibling = element.previousSibling;
        while (sibling) {
            if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === element.tagName) {
                index++;
            }
            sibling = sibling.previousSibling;
        }
        const tagName = element.tagName.toLowerCase();
        const className = element.getAttribute("class");
        const identifier = index > 1 ? "[" + index + "]" : (className ? `[@class="${className}"]` : "");
        path.unshift(tagName + identifier);
        element = element.parentNode;
    }
    return path.length ? "/" + path.join("/") : null;
}

function findElementsWithRightGreaterThanScreenWidth() {
    const elementsWithRight = [];
    const allElements = document.querySelectorAll('*');
    const screenWidth = window.innerWidth;

    allElements.forEach(element => {
        const rect = element.getBoundingClientRect();
        if (rect.right > screenWidth) {
            elementsWithRight.push(element);
        }
    });

    return elementsWithRight;
}

const elementsWithRight = findElementsWithRightGreaterThanScreenWidth();

if (elementsWithRight.length > 0) {
    console.log("Elements with right > screenWidth:");
    elementsWithRight.forEach(element => {
        const xpath = getXPathForElement(element);
        console.log("XPath:", xpath);
    });
} else {
    console.log("No elements with right > screenWidth found.");
}