JavaScript浏览器API核心操作方法与实践指南

浏览器为JavaScript提供了丰富的Web API接口，这些接口是现代Web应用开发的基础。掌握核心API的操作方法对于构建交互式网页应用具有重要意义。

## DOM操作与元素选择

文档对象模型（DOM）是网页内容的编程接口。通过选择器获取元素是DOM操作的起点：

```javascript

// 基本选择器

const elementById = document.getElementById('main-header');

const elementsByClass = document.getElementsByClassName('item');

const elementsByTag = document.getElementsByTagName('div');

// 现代选择器API

const singleElement = document.querySelector('#container .active');

const allElements = document.querySelectorAll('.list-item:not(.disabled)');

// 遍历和筛选

const listItems = document.querySelectorAll('ul.menu > li');

listItems.forEach((item, index) => {

    console.log(`项目 ${index}:`, item.textContent);

});

// 检查元素存在性

const elementExists = document.querySelector('.target') !== null;

```

## 元素创建与属性操作

动态创建和修改DOM元素是常见需求：

```javascript

// 创建新元素

const newDiv = document.createElement('div');

newDiv.className = 'card';

newDiv.setAttribute('data-id', '12345');

// 设置内容

newDiv.innerHTML = '<h3>标题</h3><p>内容描述</p>';

// 或者使用文本节点避免XSS风险

const textNode = document.createTextNode('安全文本内容');

newDiv.appendChild(textNode);

// 操作属性

const image = document.querySelector('.profile-image');

image.setAttribute('src', 'avatar.jpg');

image.setAttribute('alt', '用户头像');

const currentSrc = image.getAttribute('src');

image.removeAttribute('data-temp');

// 操作CSS类

const button = document.querySelector('.action-btn');

button.classList.add('active', 'highlighted');

button.classList.remove('inactive');

button.classList.toggle('visible');

const isActive = button.classList.contains('active');

// 操作样式

const box = document.getElementById('dynamic-box');

box.style.backgroundColor = '#f0f0f0';

box.style.fontSize = '16px';

box.style.setProperty('--custom-color', '#336699');

// 批量样式操作

Object.assign(box.style, {

    width: '200px',

    height: '150px',

    margin: '10px auto',

    transition: 'all 0.3s ease'

});

```

## 事件处理机制

事件处理是交互式应用的核心，需要理解事件传播机制：

```javascript

// 基本事件监听

const button = document.getElementById('submit-btn');

function handleClick(event) {

    console.log('按钮被点击', event.target);

    event.preventDefault(); // 阻止默认行为

    event.stopPropagation(); // 阻止事件冒泡

}

button.addEventListener('click', handleClick, { 

    capture: false, // 冒泡阶段处理

    once: true,     // 只执行一次

    passive: true   // 不调用preventDefault()

});

// 移除事件监听

button.removeEventListener('click', handleClick);

// 事件委托示例

document.querySelector('.item-list').addEventListener('click', function(event) {

    if (event.target.matches('.delete-btn')) {

        const itemId = event.target.closest('.item').dataset.id;

        deleteItem(itemId);

    }

    

    if (event.target.matches('.edit-btn')) {

        event.stopPropagation(); // 阻止事件进一步传播

        editItem(event.target);

    }

});

// 自定义事件

const customEvent = new CustomEvent('itemAdded', {

    detail: { id: 123, name: '新产品' },

    bubbles: true,

    cancelable: true

});

document.dispatchEvent(customEvent);

// 监听自定义事件

document.addEventListener('itemAdded', function(event) {

    console.log('项目添加:', event.detail);

});

```

## 数据存储与读取

浏览器提供了多种客户端存储方案：

```javascript

// localStorage操作

const storageKey = 'user_preferences';

// 存储数据

localStorage.setItem(storageKey, JSON.stringify({

    theme: 'dark',

    language: 'zh-CN',

    notifications: true

}));

// 读取数据

try {

    const preferences = JSON.parse(localStorage.getItem(storageKey));

    if (preferences) {

        applyPreferences(preferences);

    }

} catch (error) {

    console.error('解析存储数据失败:', error);

    localStorage.removeItem(storageKey); // 清除无效数据

}

// 监听存储变化

window.addEventListener('storage', function(event) {

    console.log('存储变更:', {

        key: event.key,

        oldValue: event.oldValue,

        newValue: event.newValue,

        url: event.url

    });

});

// sessionStorage（会话级存储）

sessionStorage.setItem('session_token', 'abc123xyz');

const token = sessionStorage.getItem('session_token');

// IndexedDB示例（复杂数据存储）

const dbRequest = indexedDB.open('MyDatabase', 1);

dbRequest.{

    const db = event.target.result;

    

    if (!db.objectStoreNames.contains('products')) {

        const store = db.createObjectStore('products', { 

            keyPath: 'id',

            autoIncrement: true 

        });

        

        store.createIndex('category', 'category', { unique: false });

        store.createIndex('price', 'price', { unique: false });

    }

};

dbRequest.{

    const db = event.target.result;

    const transaction = db.transaction(['products'], 'readwrite');

    const store = transaction.objectStore('products');

    

    // 添加数据

    store.add({

        name: '产品名称',

        category: '电子产品',

        price: 299.99,

        stock: 50

    });

    

    // 查询数据

    const index = store.index('category');

    const request = index.getAll('电子产品');

    

    request.{

        console.log('查询结果:', request.result);

    };

};

```

## 网络请求与数据获取

现代浏览器提供了多种网络请求API：

```javascript

// Fetch API基础用法

async function fetchUserData(userId) {

    try {

        const response = await fetch(`/api/users/${userId}`, {

            method: 'GET',

            headers: {

                'Content-Type': 'application/json',

                'Authorization': `Bearer ${getToken()}`

            },

            credentials: 'include', // 包含cookies

            cache: 'no-cache'      // 不缓存

        });

        

        if (!response.ok) {

            throw new Error(`HTTP错误: ${response.status}`);

        }

        

        const userData = await response.json();

        return processUserData(userData);

        

    } catch (error) {

        console.error('获取用户数据失败:', error);

        showErrorMessage('数据加载失败');

        throw error;

    }

}

// 发送POST请求

async function submitFormData(formData) {

    const response = await fetch('/api/submit', {

        method: 'POST',

        headers: {

            'Content-Type': 'application/json'

        },

        body: JSON.stringify(formData),

        mode: 'cors' // 跨域请求

    });

    

    // 处理不同类型的响应

    const contentType = response.headers.get('content-type');

    

    if (contentType && contentType.includes('application/json')) {

<"trending.zhaiLimao.com"><"crawler.yunruiwater.cn"><"gold.sxyicheng.cn">

        return response.json();

    } else if (contentType && contentType.includes('text/plain')) {

        return response.text();

    } else {

        return response.blob();

    }

}

// 上传文件

async function uploadFile(file) {

    const formData = new FormData();

    formData.append('file', file);

    formData.append('description', '文件描述');

    

    const response = await fetch('/api/upload', {

        method: 'POST',

        body: formData,

        // 不要设置Content-Type，浏览器会自动处理

    });

    

    const progress = document.querySelector('.upload-progress');

    

    // 上传进度跟踪

    const reader = response.body.getReader();

    const contentLength = +response.headers.get('Content-Length');

    let receivedLength = 0;

    

    while (true) {

        const { done, value } = await reader.read();

        

        if (done) break;

        

        receivedLength += value.length;

        const percent = (receivedLength / contentLength) * 100;

        progress.style.width = `${percent}%`;

    }

}

// WebSocket实时通信

function setupWebSocket() {

    const socket = new WebSocket('wss://api.example.com/ws');

    

    socket.{

        console.log('WebSocket连接已建立');

        socket.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));

    };

    

    socket.{

        const message = JSON.parse(event.data);

        handleRealTimeUpdate(message);

    };

    

    socket.{

        console.log('连接关闭:', event.code, event.reason);

        // 尝试重新连接

        setTimeout(setupWebSocket, 3000);

    };

    

    socket.{

        console.error('WebSocket错误:', error);

    };

}

```

## 浏览器信息与性能

获取浏览器环境和性能数据：

```javascript

// 用户代理检测

const userAgent = navigator.userAgent;

const isMobile = /Mobile|Android|iPhone/i.test(userAgent);

const isChrome = /Chrome\//.test(userAgent);

// 特征检测（推荐方式）

const supportsWebGL = !!window.WebGLRenderingContext;

const supportsServiceWorker = 'serviceWorker' in navigator;

const supportsNotifications = 'Notification' in window;

// 获取视口信息

const viewportWidth = window.innerWidth;

const viewportHeight = window.innerHeight;

const devicePixelRatio = window.devicePixelRatio;

// 监听窗口变化

window.addEventListener('resize', debounce(function() {

    console.log('新窗口尺寸:', window.innerWidth, 'x', window.innerHeight);

}, 250));

// 获取性能指标

if ('performance' in window) {

    const timing = performance.timing;

    const loadTime = timing.loadEventEnd - timing.navigationStart;

    console.log('页面加载时间:', loadTime, 'ms');

    

    // 性能观察器

    const observer = new PerformanceObserver((list) => {

        for (const entry of list.getEntries()) {

            console.log(`${entry.name}: ${entry.duration}ms`);

        }

    });

    

    observer.observe({ entryTypes: ['measure', 'mark'] });

}

// 页面可见性API

document.addEventListener('visibilitychange', function() {

    if (document.hidden) {

        console.log('页面被隐藏');

        pauseMediaPlayback();

    } else {

        console.log('页面恢复可见');

        resumeMediaPlayback();

    }

});

```

## 地理位置与设备能力

访问设备功能和位置信息：

```javascript

// 地理位置获取

function getCurrentLocation() {

    if (!navigator.geolocation) {

        console.warn('浏览器不支持地理位置');

        return;

    }

    

    const options = {

        enableHighAccuracy: true,  // 高精度模式

        timeout: 10000,           // 超时时间

        maximumAge: 60000         // 缓存位置有效期

    };

    

    navigator.geolocation.getCurrentPosition(

        function(position) {

            const { latitude, longitude, accuracy } = position.coords;

            console.log('位置:', latitude, longitude, '精度:', accuracy);

            updateMapPosition(latitude, longitude);

        },

        function(error) {

            console.error('获取位置失败:', error.message);

            handleLocationError(error.code);

        },

        options

    );

}

// 持续监听位置变化

const watchId = navigator.geolocation.watchPosition(

<"EPL.jsnjz.cn"><"CFL.csxthr.com"><"SerieA.zhaiLimao.com">

    position => updatePosition(position.coords),

    error => console.error('位置监控错误:', error)

);

// 停止监听

// navigator.geolocation.clearWatch(watchId);

// 设备方向（移动端）

if (window.DeviceOrientationEvent) {

    window.addEventListener('deviceorientation', function(event) {

        const { alpha, beta, gamma } = event; // 方位角、前后倾角、左右倾角

        updateCompassDisplay(alpha);

    });

}

// 设备运动传感器

if (window.DeviceMotionEvent) {

    window.addEventListener('devicemotion', function(event) {

        const { acceleration, accelerationIncludingGravity, rotationRate } = event;

        handleMotionData(acceleration, rotationRate);

    });

}

```

这些Web API构成了现代Web应用的基础框架。从DOM操作到事件处理，从数据存储到网络通信，每个API都有其特定的应用场景和最佳实践。掌握这些核心操作方法，能够使开发者构建出更加健壮、高效的用户界面。在实际开发中，应该根据具体需求选择合适的API，并考虑兼容性和性能影响。随着Web标准的不断发展，新的API也在不断涌现，持续学习和实践是保持技术竞争力的关键。