BOM、DOM模型

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量830 收藏 15
点赞数 25
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80098008/article/details/137972645
版权

一、DOM

1.1概述

·通过HTML DOM，可访问JavaScript HTML文档的所有元素。

·当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

·HTML模型被构造为对象的树

·有了DOM树，就可以通过树来查找节点（元素），找到元素就可以对元素进行操作（修改、删除、添加），还可以操作元素的样式

        ~JavaScript能够改变页面中的所有HTML元素。

        ~JavaScript能够改变页面中的所有HTML属性。

        ~JavaScript能够改变页面中的所有CSS样式。

        ~JavaScript能够对页面中的所有的事件做出反应。

1.1查找元素

查找元素（标签）有很多方式

~通过id查找元素

        ·document.getElementByld（“id属性值”）；

        ·如果找到该元素，则该方法将以对象（在x中）的形式返回该元素。

        ·如果未找到该元素，则x将包含null。

~通过标签名查找元素

        ·方法：getElementsByTagName（“合法的元素名”）；

        ·如果找到，返回的是数组。

~通过class查找元素

        ·方法：getElementsByClassName（“class属性的值”）；

        ·如果找到，返回的是数组。

<!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>
    <ul>
        <li id="li-1" class="class-3">西瓜</li>
        <li>草莓</li>
        <li>葡萄</li>
        <li>芒果</li>
    </ul>
    <div class="class-3">开</div>
    <span class="class-3">心</span>
    <hr/>
    <button id="btn-1">根据id查找</button>
    <button id="btn-2">根据标签名查找</button>
    <button id="btn-3">根据class查找</button>


    <script>
        var btn1=document.getElementById("btn-1");
        btn1.onclick=function(){
         //通过id查找
         var li1=document.getElementById("li-1");
         console.log(li1);
        }
        
        var btn2=document.getElementById("btn-2");
        btn2.onclick=function(){
         //标签名,返回的是同名所有标签的数组
         var liArr=document.getElementsByTagName("li");
         console.log(liArr);
         for(var i=0;i<liArr.length;i++){
            console.log(liArr[i]);
        }
        }
        
        //class
        var btn3=document.getElementById("btn-3");
        btn3.onclick=function(){
         //类名,返回的是同类名所有标签的数组
         var abc=document.getElementsByClassName("class-3");
         console.log(abc);
         for(var i=0;i<abc.length;i++){
            console.log(abc[i]);
        }
        }
        
    </script>
</body>
</html>

1.3元素内容的查找和设置

元素内容，是指标签开闭之间的内容(单标签用不成)。

<p>这就是内容</p>

<p><span>这就是内容</span></p>

查找和设置使用的是相同的属性

        ~innerHTML获得或设置标签的内容

        ~innerText获得或设置标签的内容

<!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>
    <!-- <p id="p-1">p的内容</p> -->
    <p id="p-1">
        <span>p的内容</span>
    </p>
    <hr/>
    <button id="btn-1">获得内容-innerHTML</button>
    <button id="btn-2">获得内容-innerText</button>
    <script>
        var btn1=document.getElementById("btn-1");
        var p1=document.getElementById("p-1");
        btn1.onclick=function(){
            var v=p1.innerHTML;
            console.log(v);
        }
        var btn2=document.getElementById("btn-2");
        btn2.onclick=function(){
            var v=p1.innerText;
            console.log(v);
        }
    </script>
</body>
</html>

上述代码结合下边的图片，我们可以知道innerHTML和innerText的区别

         * innerHTML

         * 能获得开闭标签之前的内容，包括html标签

         *能在开闭标签之间设置内容，有标签会解析

         * innerText

         * 只能获得开闭标签之间的纯文本内容

         *能在开闭之间设置内容，有标签也当字符串展现，不当标签

         *============================================

         *二者设置内容的共性：直接覆盖原值

<script>
var btn3=document.getElementById("btn-3");
        btn3.onclick=function(){
            //设置内容无返回值
            p1.innerHTML="<span>这是新的内容!!!</span>";
        }
        var btn4=document.getElementById("btn-4");
        btn4.onclick=function(){
            //设置内容无返回值
            p1.innerText="<span>这是新的内容!!!</span>";
        }
</script>

上边可以看出，设置内容时innerHTML把span当作标签，innerText在这里只是把它当成文本内容

1.4元素属性的查找和设置

元素属性，是指开标签内的属性，通过dom对象直接调用操作。

eg，

·domObj.id

·domObj.name

·domObj.value

·...

<!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>
    <a id="a-1" href="http://www.baidu.com" target="_self">超链接</a>
    <hr/>
    <button id="btn-1">获得a标签的属性</button>
    <button id="btn-2">设置a标签的属性</button>
    <script>
        var btn1=document.getElementById("btn-1");
        btn1.onclick=function(){
            var a1=document.getElementById("a-1");
            /**
             *获得标签的属性，直接通过标签对象.属性名即可
            */
           var id=a1.id;
           var href=a1.href;
           var target=a1.target;
           console.log(id);
           console.log(href);
           console.log(target);
        }


        var btn2=document.getElementById("btn-2");
        btn2.onclick=function(){
            var a1=document.getElementById("a-1");
            /**
             *设置标签的属性，直接通过标签对象.属性名=值即可
            */
           a1.href="http://www.4399.com";
           a1.target="_blank";
        }
    </script>
</body>
</html>

1.5元素CSS样式的查找和设置

元素css样式的查找和设置，是指标签中的style的属性值的获得和设置

·获得属性值

        元素对象.style.属性

·设置属性值

        元素对象.style.属性=""

<!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>
    <div id="div-1" style="background-color: red;">块</div>
    <hr/>
    <button id="btn-1">获得div的css样式</button>
    <button id="btn-2">设置div的css样式</button>
    <script>
        var btn1=document.getElementById("btn-1");
        var div=document.getElementById("div-1");
        btn1.onclick=function(){
            //获得所有样式
            var style=div.style
            console.log(style);
            //获得指定的样式
            var bgc=div.style.backgroundColor;//单独获得背景颜色
            console.log(bgc);
        }
        var btn2=document.getElementById("btn-2");
        btn2.onclick=function(){
            //设置单独的样式
            div.style.backgroundColor="green";

            //设置样式
            div.style="background-color:yellow;width:50px;height:50px";
        }
    </script>
</body>
</html>

二、BOM-location

·表示当前浏览器的链接地址

·可以读取地址

·可以修改地址

<!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>
    <button id="btn-1">获得location信息</button>
    <button id="btn-2">设置location信息</button>
    <script>
        var btn1=document.getElementById("btn-1")
        btn1.onclick=function(){
            var location=window.location;
            console.log(location);
        }

        var btn2=document.getElementById("btn-2")
        btn2.onclick=function(){
            //重点!!!
            //改变当前页面跳转的指定路径
            window.location.href="http://www.baidu.com";
        }
    </script>
</body>
</html>

Hygge666666
关注
  • 25
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
BOM和DOM模型图
11-25
### BOM和DOM模型 #### 一、BOM与DOM概览 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。 ##### BOM：浏览器对象模型...
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...
JavaScript的BOM模型与DOM模型
it66682的博客
05-26 134
Screen：显示器屏幕对象 Location：地址栏对象 History：历史记录对象** [](()DOM模型 =============================================================== DOM模型就是文档对象模型（Document Object Model）： 定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 包括： **Document：文档对象 Element：元.
前端基础学习——JavaScript之BOM模型与DOM模型
weixin_53919192的博客
07-06 917
本文为大家带来了前端基础学习——JavaScript之BOM模型与DOM模型，希望对你有帮助~~
DOM对象模型和BOM对象模型
qq_38806666的博客
11-23 1327
DOM对象模型和BOM对象模型
BOM与DOM
weixin_47432345的博客
08-07 4604
DOM 与 BOM 详解
BOM和DOM详解
weixin_44074543的博客
05-06 3727
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象，而非 js 对象； DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。 BOM 主要处理浏览器
BOM DOM的一些解释
weixin_45439010的博客
11-11 214
DOM 是为了操作文档出现的 API，document 是其的一个对象； BOM 是为了操作浏览器出现的 API，window 是其的一个对象。 BOM是浏览器对象模型，是对浏览器本身进行操作 DOM是文档对象模型，是对浏览器（可看成容器）内的内容进行操作 归DOM管的： E区（就是你说的document啦。由web开发人员呕心沥血写出来的一个文件夹，里面有index.html，CSS和JS什么鬼的，部署在服务器上，我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地，浏览，右键查看
BOM模型与DOM模型
叮当的猫猫的博客
09-05 331
BOM模型与DOM模型
html中的bom和dom,BOM与DOM的区别
weixin_39681486的博客
06-15 745
总结：【BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。 DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。 BOM的内容不多，主要还是DOM。 由于DOM的操作对象是文档(Document)，所以dom和浏览器没有直接关系。一般情况下：BOM是由navigator、history、scre...
DOM和BOM的使用
01-08
BOM 提供了一些浏览器相关的功能，例如窗口、导航、历史记录等，而 DOM 则是文档对象模型，它允许开发者通过 JavaScript 操作文档的内容和结构。 DOM 概述 DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形...
BOM与DOM的区别分析
09-05
**BOM与DOM的区别分析** 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是两个至关重要的概念，它们都是用于处理和操作网页内容的接口。DHTML（Dynamic HTML）技术的实现离不开这两者的...
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
10-18
JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给...
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 643
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 610
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 235
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 299
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
bom dom对比举例
07-30
BOM和DOM是两个不同的概念，它们分别代表浏览器对象模型和文档对象模型。BOM主要涉及浏览器窗口和浏览器的相关属性和方法，而DOM则涉及网页文档的结构和内容。 举个例子来对比BOM和DOM，假设我们要获取浏览器窗口的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值