对象模型¶

DOM¶

核心对象：document.xxx

Document Object Model 文档对象模型

用于访问和操作 HTML 或 XML文档的 API，它将文档表示为由节点和对象（元素、属性、文本）组成的树形结构

<!-- 示例模版 -->
<body>
    <div id="myId"></div>
    <div class="myClass"></div>
    <div class="myClass"></div>
    <script src="./DOMAndBOM.js"></script>
</body>

获取元素

const elsByTag = document.getElementsByTagName('div')  // 根据标签名选择所有匹配的元素
const elsByClass = document.getElementsByClassName('myClass') // 根据class选择所有匹配的元素
const elsBySelectorAll = document.querySelectorAll('.myClass')  // 根据属性选择所有匹配的元素
const elBySelector = document.querySelector('#myClass')  // 根据属性选择第一个匹配的元素
const elById = document.getElementById('myId')  // 根据id选择唯一匹配元素

增加/删除元素

document.body.removeChild(elById) // 删除元素

const newEl = document.createElement('div')  // 创建新元素
document.body.appendChild(newEl)  // 添加元素

修改内容

elById.textContent = 'Hello, JavaScript!'  // 修改文本内容
elById.innerHTML = '<strong>Hello, JavaScript!</strong>'  // 修改 HTML 内容

修改样式

CSS 属性名都需要转换为驼峰命名法

elById.style.color = 'red'  // 修改文本颜色
elById.style.backgroundColor = 'black'  // 修改背景颜色

BOM¶

核心对象：window.xxx

Browser Object Model 浏览器对象模型

提供了与浏览器窗口进行交互的方法和属性，比如可以弹出新的窗口，改变状态栏中的文本，操作Cookie等

window.open('https://zuoright.com', '_blank')  // 在新标签页打开URL

const width = window.innerWidth  // 获取窗口宽度
const height = window.innerHeight  // 获取窗口高度
console.log(`窗口宽度：${width}，窗口高度：${height}`)

设置定时器

// 1 秒后输出 Hello!
setTimeout(() => {
  console.log('Hello!')
}, 1000)

// 每隔 1 秒输出一次 Hello!
setInterval(() => {
  console.log('Hello!')
}, 1000)