javascript document例子

document 对象是 JavaScript 中非常核心的对象之一，它是 DOM（Document Object Model）的一部分，提供了丰富的属性和方法用于操作网页上的元素和内容。

和文件相关操作，比如上传下载等。

下载文件例如image.png：

function downloadImage() {
var link = document.createElement('a');
link.href = "{{ url_for('download_file', filename='image.png') }}";
link.download = "image.png"; 
link.click();
}

选择文件时提示文件名：

function showFileName() {
const fileInput = document.getElementById('file');
const fileNameDisplay = document.getElementById('fileNameDisplay');
if (fileInput.files.length > 0) {
fileNameDisplay.style.display = 'block';
fileNameDisplay.textContent = `已选择文件: ${fileInput.files[0].name}`;
} else {
fileNameDisplay.style.display = 'none';
}
}

document.addEventListener("DOMContentLoaded", () => {
    const generateButton = document.getElementById("generateButton");
    const showButton = document.getElementById("showButton");

    generateButton.addEventListener("click", () => {
        fetch('/generate_plot')
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('Plot generated successfully!');
                    showButton.disabled = false;
                }
            });
    });

    showButton.addEventListener("click", () => {
        fetch('/show_plot', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('PyQt window launched!');
                }
            });
    });
});

DOMContentLoaded‌事件是文档对象模型（DOM）完全加载和解析完成的事件，但不需要等待样式表、图片和子框架的加载完成。当文档的HTML完全加载和解析完成后，就会触发DOMContentLoaded事件，此时DOM树已经完全构建，但可能还未加载完所有的外部资源（如样式表和图片）‌。

触发时机和条件

DOMContentLoaded事件的触发时机是在HTML文档完全加载和解析完成后，但不需要等待样式表、图片和子框架的加载完成。这意味着在DOMContentLoaded事件触发时，页面的HTML结构已经完全构建，但外部资源如CSS和图片可能还未加载完成‌12。

使用场景和优势

DOMContentLoaded事件对于执行依赖于DOM的JavaScript代码非常有用，因为它确保了脚本在尝试访问DOM元素之前，这些元素已经存在于页面上。通过为document对象添加事件监听器来监听DOMContentLoaded事件，可以在DOM完全加载和解析完成后立即执行相关代码，从而提高页面加载的性能‌。

与其他事件的比较

与DOMContentLoaded事件相对的是window.load事件，该事件会在页面的所有资源（包括HTML、CSS、图片等）完全加载后才触发。

对应HTML只需id对应：

    Generate Plot
    Show Plot in PyQt

点我

以下是HTML，容易和JS混淆

Click me