关于HTML DOM以及BOM的一些实例_.html 的贴片bom怎么做的-优快云博客

本文链接：https://blog.youkuaiyun.com/Apollo_learn/article/details/135050705

本文介绍了BOM（浏览器对象模型），包括window、document、navigator、location和history对象的功能，以及如何在HTML和JavaScript中利用这些对象实现页面交互，如添加待办事项、显示和删除列表项、输入个人信息提示和切换图片等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是BOM

BOM浏览器对象模型是指浏览器提供的一组API，用于操作和控制浏览器窗口、文档和其他组件。

BOM包括了一些对象：

window对象：表示当前浏览器窗口或框架，可以控制窗口的大小、位置、导航等。
document对象：表示当前页面的文档对象，可以操作和控制页面上的元素和内容。
navigator对象：提供了浏览器的相关信息，例如浏览器的名称、版本、操作系统等。
location对象：提供了URL的相关信息，例如当前页面的URL、主机名、查询参数等。
history对象：提供了浏览器的历史记录，可以通过它来实现前进、后退等导航操作。

实例输入待办事项，如题

点击提交后每次都会追加一个“li”，以实现多个待办事项的输入。这里使用appendChild实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>清单</h3>
    <ul id='list'>
        <li class="list-items" id="item">待办</li>
        
    </ul>
    <input type='text' id="user_input" />
    <div id="myDiv">
        <input type="submit" id='add' />
    </div>
    <script>
        myDiv.addEventListener("click", function () {
            var text = document.getElementById("user_input").value;
            var li = document.createElement('li');
            li.innerHTML = text;
            list.appendChild(li);
            document.getElementById("user_input").value = '';
        });
        document.getElementById("list").addEventListener('click', function (e) {
            if (e.target.tagName.toUpperCase() == "LI") {
                e.target.parentNode.removeChild(e.target);
            }
        });

    </script>

</body>

</html>

实例1 输入个人信息，然后弹出提示框个人信息会显示在网页上，可以用作信息提示及确定，具体应用还有待优化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
<body>
    <h1>我的信息</h1>
    <ul>
        <li>姓名: <span id="name"></span>
        <li>学号: <span id="index"></span>
        <li>专业: <span id="hometown"></span>
    </ul>
    <button onclick='kopce()'>填写</button>
</body>
<script>
    function kopce(){
        var name = document.getElementById('name')
        var index = document.getElementById('index')
        var hometown = document.getElementById('hometown')

        var name2 =  prompt('请输入你的姓名: ')
        var index2 = prompt('请输入学号: ')
        var hometown2 = prompt('请输入专业：')

        var c = confirm(name2 + "是你的名字");
        if(c){
            name.innerHTML = name2;
            index.innerHTML = index2;
            hometown.innerHTML = hometown2;
        }
        putColor();
    }
    function putColor(){
        var city = document.getElementById('hometown');
        city.parentNode.style.backgroundColor = 'red'
    }

</script>
</html>

实例2 选择并删除，下拉列表选中，点击按钮就可以实现删除。通过以下方法实现，可以应用于删除不想要的选项等场景。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><form>
<select id="colorSelect">
<option>Red</option>
<option>Green</option>
<option>White</option>
<option>Black</option>
</select>
<input type="button" onclick="removecolor()" value="Select and Remove"><br></form>
</body>

<script>
    function removecolor(){
        var color = document.getElementById('colorSelect')
        for(i=0;i<color.length;i++){
            if(color[i].selected){
                console.log(color[i].value)
                color.removeChild(color[i])
            }
        }
    }
</script>
</html>

实例3 点击按钮，切换图片。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>切换图片</h3>
    <br>
    <br>


    <button onclick="generate()" id="photos">点这里</button>

</body>
<script>
    function generate() {
        var picture = Math.floor(Math.random() * 3);
        photos = document.getElementById('photos')
        if (parseInt(picture) == 0) {
            photos.innerHTML = `<img src="sailing.jpeg">`
        } if (parseInt(picture) == 1) {
            photos.innerHTML = `<img src="MIT Dome - 20101114_DR_MIT_0135-Photo by Domonick Reuter_preview_0.jpeg">`
        } else {
            photos.innerHTML = `<img src="7257241410_1a87dc5888_b.jpg">`
        }
    }
</script>

</html>