在页面初始化时使用代码与页面交互

在页面初始化时，通常使用JavaScript来进行代码与页面的交互，目的是为了设置初始状态、解析HTML结构、绑定事件处理程序等。以下是常见的几种初始化步骤：

1. **获取DOM元素**：使用`document.getElementById()`、`.querySelector()`或`.getElementsByClassName()`等方法获取你需要控制的HTML元素。

var myElement = document.getElementById('myElement');

2. **设置样式或属性**：可以修改元素的样式或属性，如`style.property = value`或`.setAttribute('attrName', 'attrValue')`。

myElement.style.color = "red";
myElement.setAttribute("title", "This is a sample element");

3. **事件监听**：在页面初始化时可以绑定事件监听器，以便在特定事件发生时执行相应操作。

myElement.addEventListener('click', function() {
    console.log('Element clicked!');
});

4. **数据绑定和模型初始化**：如果应用了前端框架，如Vue或React，会涉及数据绑定和组件初始化的过程。

new Vue({
    el: '#app',
    data: {
        message: 'Hello from Vue!'
    },
    mounted() {
        console.log('Vue instance is ready.');
    }
});

5. **Ajax请求**：有时候需要在页面加载初期发送数据请求，填充内容或预加载资源。

fetch('api/data')
    .then(response => response.json())
    .then(data => {
        // 更新DOM或存储数据
    });