JavaScript的BOM与DOM详解

最新推荐文章于 2025-02-17 01:00:13 发布

作梦作梦啊

最新推荐文章于 2025-02-17 01:00:13 发布

阅读量440

点赞数

分类专栏：其他文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_53316359/article/details/122213282

版权

其他专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中的浏览器对象模型(BOM)和文档对象模型(DOM)。BOM包括Window、Navigator、Screen、History和Location等对象，重点讲解了Window对象的常用方法如alert、setTimeout等。DOM主要由Document、Element、Attribute等对象构成，重点介绍了Document对象的方法如getElementById，以及Element对象和Node对象的操作方法。文中还给出了实际的HTML表格增删改查的示例代码，以及使用innerHTML简化操作的方法。

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

JavaScript的BOM对象（Browser Object Model）与DOM对象（Document Object Model）:

个人学习笔记，如有问题还望指出，谢谢！！！

BOM的组成：(这里只提供了三个常用的对象详解)

** Window：窗口对象**

** Navigator：浏览器对象**

** Screen：显示器对象**

** History ：历史记录对象**

** Location：地址栏对象**

Window对象详解：

1.创建：可直接使用无需创建

2.方法：

（1）与弹窗有关的方法：

	* alert()       //一般用于显示提示信息（一条提示信息和一个确认按钮）。

	* confirm()      //一般用于显示提示信息（一条提示信息和确认与取消两个按钮）返回值为true（确认）和false（取消）。

	* prompt()       //一般用于显示提示信息（一条提示信息和一个获取值的输入框）返回值为输入框的内容。

（2）与打开关闭浏览器窗口的方法：

	* close()      //关闭调用者。

	* open(URL)      //打开URL的网页，返回值为新网页Window对象。

（3）与定时器有关的方法：

setTimeout方法与setInterval方法的返回值为对象，该对象可用于清除定时器。

	* setTimeout(function()，ms)       //第一个参数为要调用的函数对象，第二个参数为毫秒值。！！！需要注意的是该定时器的方法只能调用一次。

	* clearTimeout(定时器对象)

	* setInterval(function()，ms)       //与setTimeout方法的参数相同，但定时器的方法如果不清除定时器可以一直调用该方法。

	* clearInterval(定时器对象)      //取消定时器

3.属性：

1.获取其他的BOM对象：

	window.history
	window.document
	window.avigator
	window.screen          //分别对应其他几个BOM的组成对象

2.获取DOM对象：

	window.document       //获取DOM的document对象

4.特点：

（1）Window对象不需要创建即可直接使用。

（2）window引用可以直接省略，例如：window.方法名()；

Location对象：

**1.属性：Location.href **

可以用于修改网址，即重定向

2.方法：Location.reload() 可以用于刷新页面！

History对象：

1.属性：History.length

可以查看当前窗口的历史记录个数

2.方法：（前提是窗口历史中有历史记录才可以生效）

History.back()               // 后退到上一个页面
History.forword()			 // 前进到下一个页面
History.go(number)			 // number为正数是forword，负数为back

DOM的组成：

*** Document文档对象**

*** Element元素对象**

*** Attribute属性对象**

*** Text文本对象**

*** Comment注释对象**

*** Node节点对象前五个的父类对象**

核心DOM模型：

*** Document文档对象**

*** Element元素对象**

*** Node节点对象**

Document文档对象：

方法：

获取Element对象：

        getElementById()            // 通过id值获取元素对象
        getElementsByTagName()      // 通过标签名获取（获取数组）
        getElementsByClassName()	// 通过类名获取（获取数组）
        getElementsByName()			// 通过name值获取（获取数组）

获取其他对象：

        createAttribute(name)
        createComment()
        createElement()
        createTextNode()

Element元素对象：

创建：通过document创建或获取

方法：

	setAttribute("属性名","属性值")    // 设置属性

// 例：
    var div2 = document.createElement("div");
    div2.setAttribute("id","div2");
    
    removeAttribute()          // 删除属性
  
// 例：
	var div1 = document.getElementById("div1");
    div1.removeAttribute("id");

Node节点对象：

创建：所有DOM对象都可以被看做节点对象

方法：

        appendChild(node对象)        // 新增一个子节点
        removeChild(node对象)		   // 删除一个子节点
        replaceChild(node对象)	   // 用新节点替换一个子节点

属性：

		parentNode      // 返回结点的父节点

案例：

请添加图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="" />
    </head>
    <style type="text/css">
        table{
            border:1px solid black;
        }
        tr{
            border:1px solid black;
        }
        td{
            border:1px solid black;
        }
    </style>

    <body>
        编号:<input type="text" id="value1">
        姓名:<input type="text" id="value2">
        性别：<input type="text" id="value3">
        <button onclick="fn()">新增</button>
        <table id="table">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </table>


        <script>
            function del(obj){
                var table = obj.parentNode.parentNode.parentNode;
                var trq = obj.parentNode.parentNode;
                table.removeChild(trq);
            }
            function fn(){
                var tab = document.getElementById("table");
                var val1 = document.getElementById("value1").value;
                var val2 = document.getElementById("value2").value;
                var val3 = document.getElementById("value3").value;
    
                var tr1 = document.createElement("tr");
    
                var td1 = document.createElement("td");
                var v1 = document.createTextNode(val1);
                td1.appendChild(v1);
    
                var td2 = document.createElement("td");
                var v2 = document.createTextNode(val2);
                td2.appendChild(v2);
    
                var td3 = document.createElement("td");
                var v3 = document.createTextNode(val3);
                td3.appendChild(v3);
    
                var td4 = document.createElement("td");
                var but = document.createElement("a");
                var a1 = document.createTextNode("删除");
                but.setAttribute("onclick","del(this)");
                but.setAttribute("href","#");
                but.appendChild(a1);

                td4.appendChild(but);
    
                tr1.appendChild(td1);
                tr1.appendChild(td2);
                tr1.appendChild(td3);
                tr1.appendChild(td4);
                tab.appendChild(tr1);
            }
        </script>
    </body>
</html>

innerHTML的简化方法:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="" />
    </head>
    <style type="text/css">
        table{
            border:1px solid black;
        }
        tr{
            border:1px solid black;
        }
        td{
            border:1px solid black;
        }
    </style>

    <body>
        编号:<input type="text" id="value1">
        姓名:<input type="text" id="value2">
        性别：<input type="text" id="value3">
        <button onclick="fn()">新增</button>
        <table id="table">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </table>


        <script>
            function del(obj){
                var table = obj.parentNode.parentNode.parentNode;
                var trq = obj.parentNode.parentNode;
                table.removeChild(trq);
            }
            function fn(){
                var tab = document.getElementById("table");
                var val1 = document.getElementById("value1").value;
                var val2 = document.getElementById("value2").value;
                var val3 = document.getElementById("value3").value;
                tab.innerHTML += "<tr>" +
                                    "<td>" + val1 + "</td>" +
                                    "<td>" + val2 + "</td>" +
                                    "<td>" + val3 + "</td>" +
                                    "<td>" + "<a href='#' οnclick='del(this)'>删除</a>" + "</td>" +
                                "</tr>"
            }
        </script>
    </body>
</html>