跳转至

对象模型

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)