JavaScript中DOM和BOM的区别与用处详解

 // 获取元素并修改其文本内容和样式
    let header = document.querySelector('.header')
    header.textContent = '欢迎来到我的网站'
    header.style.color = 'blue' // 修改文本颜色
    header.style.fontSize = '24px' // 修改字体大小

    // 修改元素的属性
    let link = document.querySelector('a')
    link.setAttribute('href', 'https://www.newlink.com') // 修改链接地址
    link.setAttribute('target', '_blank') // 在新窗口打开链接

  // 创建新的列表项元素
    let newItem = document.createElement('li')
    newItem.textContent = '新列表项'

    // 将新元素插入到现有的列表中
    let list = document.getElementById('myList')
    list.appendChild(newItem)

    // 在指定位置插入元素
    let anotherItem = document.createElement('li')
    anotherItem.textContent = '插入的新列表项'
    list.insertBefore(anotherItem, list.children[1]) // 在第二个子元素之前插入

// 为按钮添加点击事件监听器
let button = document.getElementById("submitButton");
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

  // 打开一个新的窗口并设置一些窗口属性
    let newWindow = window.open('https://www.example.com', '_blank', 'width=800,height=600')

    // 移动窗口到屏幕指定位置
    newWindow.moveTo(100, 100)

    // 调整窗口大小
    newWindow.resizeTo(500, 500)

    // 关闭窗口
    newWindow.close()

javascript
复制代码
// 获取浏览器的用户代理字符串
let userAgent = navigator.userAgent;
console.log("用户代理信息:", userAgent);

// 检测是否为移动设备
if (/Mobi|Android/i.test(userAgent)) {
    console.log("这是一个移动设备");
}

javascript
复制代码
// 获取当前页面的 URL
let currentUrl = window.location.href;
console.log("当前 URL:", currentUrl);

// 重定向到新的页面
window.location.href = "https://www.example.com";

 // 获取浏览器用户代理信息
    let userAgent = navigator.userAgent
    console.log('用户代理:', userAgent)

    // 检测是否为某个浏览器
    if (userAgent.indexOf('Chrome') > -1) {
        console.log('当前浏览器是 Chrome')
    }

    // 获取当前页面的 URL 信息
    console.log('当前 URL:', window.location.href)
    console.log('协议:', window.location.protocol)
    console.log('主机名:', window.location.hostname)
    console.log('路径名:', window.location.pathname)

    // 导航到新页面
    window.location.href = 'https://www.new-page.com'

    // 重载当前页面
    window.location.reload()

    // 浏览器历史记录操作
    window.history.back() // 返回上一页
    window.history.forward() // 前进到下一页

// localStorage 持久存储数据（页面关闭后仍然存在）
localStorage.setItem("username", "JohnDoe");
let username = localStorage.getItem("username");
console.log("用户名:", username);

// 移除存储的数据
localStorage.removeItem("username");

// sessionStorage 临时存储数据（页面关闭后数据消失）
sessionStorage.setItem("sessionID", "123456");
let sessionID = sessionStorage.getItem("sessionID");
console.log("会话 ID:", sessionID);

// 清除所有 sessionStorage 数据
sessionStorage.clear();

// 设置定时器，每隔一秒执行一次
let count = 0;
let intervalID = setInterval(() => {
    console.log(`计时器执行次数: ${count}`);
    count++;
    if (count === 5) {
        clearInterval(intervalID); // 停止定时器
    }
}, 1000);

// 延时执行函数
setTimeout(() => {
    console.log("延时执行的代码");
}, 2000);

// 提示框
alert("这是一个提示框！");

// 确认框
let confirmResult = confirm("你确定要删除这条记录吗？");
if (confirmResult) {
    console.log("用户点击了确认");
} else {
    console.log("用户点击了取消");
}

// 输入框
let userInput = prompt("请输入你的名字:", "匿名");
if (userInput !== null) {
    console.log(`你好，${userInput}`);
}