点击按钮报setAttribute null错误：跨页面DOM操作排查与修复

JS的DOM操作仅能访问当前已加载页面内的元素，无法跨独立页面直接操作DOM：

• 触发loginClick()函数的按钮，位于独立的登录入口页（包含#loginButton的页面）
• 函数尝试修改的#loginIcon元素，属于带导航栏的另一个独立页面
• 点击触发事件时，当前页面的DOM树中不存在#loginIcon，document.getElementById("loginIcon")的返回值为null，对null调用setAttribute()就会抛出对应TypeError错误。

你之前排查的脚本放置位置、元素id拼写/大小写问题均无异常，问题核心是跨独立页面直接操作DOM的逻辑本身无法生效。

要实现“用户点击登录按钮后，导航栏的登录入口切换为个人中心入口”的效果，不能在按钮所在页直接操作另一个页面的DOM，可通过以下两种方式实现：

方案1：跨页面传状态，在目标页做DOM修改（最稳定通用） #

这种方式不受页面结构限制，是多页面应用的常规实现逻辑：

1. 修改按钮触发的点击逻辑：用户点击登录按钮时，通过localStorage这类跨页面共享存储的方式，标记用户的登录状态，再跳转到导航栏所在的目标页面
2. 在包含导航栏的页面中，待DOM加载完成后，读取存储的登录状态标记，如果检测到用户已登录，再执行修改#loginIcon属性的逻辑

示例代码：

// 登录入口页的按钮点击逻辑
function loginClick(){
    // 存储登录状态标记
    localStorage.setItem('isLoggedIn', 'true');
    // 跳转到导航栏所在的目标页面
    window.location.href = 'index.html';
}

// 导航栏所在页面的加载逻辑
window.addEventListener('DOMContentLoaded', () => {
    const loginIcon = document.getElementById('loginIcon');
    // 读取登录状态
    if(localStorage.getItem('isLoggedIn') === 'true'){
        loginIcon.setAttribute("href","account.html");
        // 注意原代码的class设置存在问题：原元素的nav-link类名会被覆盖，需要保留原有类名
        loginIcon.setAttribute("class","nav-link active fa fa-user-plus");
        loginIcon.innerHTML = "Account";
    }
})

额外提示：你原JS代码中修改class的逻辑存在bug，直接给class属性赋值为fa fa-user-plus，会把元素原有的nav-link active类名覆盖，导致导航样式失效，需要把原有类名一并保留。

方案2：特殊嵌套场景的跨页DOM访问 #

仅当触发按钮的页面是同域iframe嵌入到导航栏页面内时，才可通过window.parent.document.getElementById(...)的方式访问父页面元素，否则会被浏览器跨域安全策略拦截，无法正常操作。

内容的提问来源于stack exchange，提问作者somethingfishy