JS中的BOM和DOM的介绍与使用

简介: JS中的BOM和DOM的介绍与使用

1 BOM DOM 对象

1.1 什么是BOM

image.png

BOM是Browser Object Model的简写,即浏览器对象模型。


BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法


BOM没有统一的标准(每种客户端都可以自定标准)。


BOM的顶层是window对象


1.2 什么是DOM

DOM是Document Object Model的简写,即文档对象模型。


DOM用于XHTML、XML文档的应用程序接口(API)。


DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。


DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。


DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。


DOM的顶层是document对象蓝色框内是归DOM管的,红色框内归BOM管的;也可以说DOM也是归BOM管的


BOM 是为了操作浏览器出现的 API,window 是其根对象。


DOM 是为了操作文档出现的 API,document 是其根对象。


2 BOM 对象-window

20200430095501178.jpg


2.1 三种弹框的方式:

//只含有确定的按钮


window.alert("今天星期一, 马上周五了, 我好开心呢");


//含有确定按钮和取消按钮的弹框


var flag= window.confirm("确实很开心");


//如果返回的是true代表点击的是确定 , 如果返回是false代表点击的取消


//含有输入内容的弹框 前部分代表的是提示的信息, 后面是输入内容的默认值


var val= window.prompt("请输入昵称:","例如:李白");


//取消 返回 null


2.2 定时器的应用

//2S后调用方法 执行一次


var time1=window.setTimeout("test04()",2000);


//每间隔2s就会执行方法 执行了多次


window.setInterval("test04()",2000);


2.3 清除计时器的操作

//清除计时器的操作 其中的名称就是清除计时器的名称


window.clearInterval(time);


window.clearTimeout(time1);


2.4 关闭和打开浏览器

//打开指定的页面


window.open("http://www.baidu.com");


//关闭浏览器窗口。


window.close();


3 Window 中对象学习

3.1 Location:对象

var href= window.location.href;


//获得端口号 8020


var port=window.location.port;


//主机名称


var hostname=window.location.hostname;


//主机加端口号


var host=window.location.host;


//修改当前的URL地址


window.location.href="http://www.taobao.com";


//刷新网页


window.location.reload();


3.2 History 对象:

/返回历史记录的数量


var len= window.history.length;


//后退按钮


window.history.back();


//前进按钮window.history.forward();


//如果是正数标识前进指定的页面如果是负数标识后退指定的页面


window.history.go(-1);


3.3 Screen:对象:

//获得当前屏幕的分辨率


var he = window.screen.height;


var wi = window.screen.width;


3.4 Navigator 对象:

//返回由客户机发送服务器的 user-agent 头部的值。


console.log(window.navigator.userAgent);


代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      /*****Location对象学习*********/
      function  testLocation(){
    //http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.html    
       var  href= window.location.href;
      //http://127.0.0.1 
       var hostname=window.location.hostname;
       //8020
       var  port=window.location.port;
       //http://127.0.0.1:8020
       var  host=window.location.host;
      // alert(href+"----"+hostname+"----"+port+"----"+host);
       //修改当前的URL地址
      // window.location.href="http://www.baidu.com";
      //重新加载页面  
       window.location.reload();    
      }
      function  testHistory(){
        //返回浏览器历史列表中的 URL 数量。
        var len=window.history.length;
        //alert(len);
        //前进操作
//        window.history.forward();
        //后退操作
        //window.history.back();
        //控制前进和后退的网页  如果是正数代表前进  如果是负数代表后退  如果是0重新加载页面
        window.history.go(0);
      }
      function  testScreen(){
        //获得当前屏幕的分辨率
        var  he=window.screen.height;
        var  wi=window.screen.width;
        alert(he+"----"+wi);
      }
      function  testNavigator(){
      //返回由客户机发送服务器的 user-agent 头部的值。 
       var  us= window.navigator.userAgent;
        alert(us);    
      }
    </script>
  </head>
  <body>
  <p>
     <input type="button" name="" id="" value="Location对象" onclick="testLocation()" />
  </p>
  <p>
     <input type="button" name="" id="" value="History对象" onclick="testHistory()" />
  </p>
  <p>
     <input type="button" name="" id="" value="Screen对象" onclick="testScreen()" />
  </p>
  <p>
     <input type="button" name="" id="" value="Navigator对象" onclick="testNavigator()" />
  </p>
  </body>
</html>

效果:

4 DOM 中的节点类型

4.1 什么是 DOM2.DOM 节点分类 node

元素节点 element node <a href="链接地址">我的链接</a>

属性节点 attribute node href="链接地址"

文本节点 text node 链接地址 我的链接

4.2 DOM 节点关系

父子关系(parent-child):<html> 元素作为父级,

<head> 和 <body> 元素作为子级

兄弟关系(Sibling):<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

5 DOM 操作的内容1.查询元素(进行操作元素、或者元素的属性、文本)

2.操作文本

3.操作属性

4.操作CSS样式(一个特殊的属性style)

5.操作元素

目录
相关文章
|
26天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
21 1
|
18天前
|
Web App开发 JavaScript iOS开发
js【详解】BOM
js【详解】BOM
11 0
|
18天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
22天前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
13 0
|
25天前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
14 0
|
28天前
|
Web App开发 移动开发 JavaScript
探索 JavaScript 宇宙:DOM与BOM的星际邂逅
探索 JavaScript 宇宙:DOM与BOM的星际邂逅
|
JavaScript 前端开发 Go
JavaScript系列--BOM(二)
JavaScript系列--BOM(二)
136 0
|
JavaScript 前端开发 API
JavaScript系列--BOM(一)
JavaScript系列--BOM(一)
91 0
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
29 2
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
35 4