JavaScript基础——DOM和BOM的常用api

已于 2024-01-05 15:30:08 修改
阅读量1.7k 收藏 38
点赞数 44
分类专栏： JavaScript基础 文章标签： javascript html
于 2023-12-01 15:55:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56223760/article/details/134736929
版权

DOM和BOM的常用api

文章目录

一、概念

API：预先定义的函数。给予开发者提供的工具，能轻松实现想要的功能。

Web API：浏览器提供的一些浏览器功能和页面元素的API（BOM和DOM）

DOM（W3C的标准）：文档对象模型。为了操作文档出现的 API，document 是其的一个对象

BOM：浏览器对象模型。为了操作浏览器出现的 API，window 是其的一个对象。

DOM：网页的内容，比如index.html、CSS、JS部署在服务器上，通过url将document加载到本地，预览到的内容和右键查看源代码等

BOM：浏览器的标签页、地址栏、搜索栏、书签栏、右键的菜单、页面加载时的状态栏、显示http状态码、滚动条等

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

两者的关系：BOM包含DOM也就是说window对象包含了document属性

img

二、常用的API

1.DOM

1.1获取元素
id事件名说明用法
1getElementById(‘id’)根据ID名获取元素 var node= document.getElementById('id')
2getElementsByTagName(‘标签名’)根据标签名获取 var node= document.getElementsByTagName('标签名')
3getElementsByClassName(‘类名’)根据类名返回元素对象集合var node= document.getElementsByClassName('.box')
4querySelector(‘选择器’)根据指定选择器返回第一个元素对象var node= document.querySelector('.box')
5querySelectorAll(‘选择器’)根据指定选择器返回所有元素对象集合var node= document.querySelectorAll('.box');
6document.body获取body元素对象var bodyElm= document.body
7document.documentElement获取html元素对象var htmlElm = document.documentElement
1.1.1 代码实例

ID：1

<body>
    <div class="box" id="time">2023-3-23</div>
</body>
<script>
    var timer = document.getElementById('time');    
    console.log(timer);             
    console.log(typeof timer);      //   object     返回的是一个元素对象
</script>

ID：2

<body>
    <ul>
        <li>知否知否,应是绿肥红瘦11</li>
        <li>知否知否,应是绿肥红瘦22</li>
    </ul>

    <ol id="ol">
        <li>东临碣石,以观沧海1</li>
        <li>东临碣石,以观沧海2</li>
    </ol>
</body>
<script>
    // 获取所有li
		var lis = document.getElementsByTagName('li');
		console.log(lis);       // [li,li...]
    //获取ul下的li
    	var ulElm = document.getElementsByTagName('ul')
        var lis = ulElm[0].getElementsByTagName('li')
</script>

ID：3、4、5、6、7

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>=
</body>
<script>
    //3
		var boxs = document.getElementsByClassName('box');
        console.log(boxs);  // [div.box,div.box]
    //4
    	var firstBox = document.querySelector('.box');     // 类选择器
        console.log(firstBox);		// [div.box]		
    //5
    	var AllBox = document.querySelectorAll('.box');
        console.log(AllBox);    // [div.box,div.box]
    //6
		var bodyElm = document.body;
        console.log(bodyElm);
	//7
    	var htmlElm = document.documentElement;
        console.log(htmlElm);
</script>
1.2 DOM事件

常见的DOM事件包括鼠标事件、键盘事件、表单事件、窗口事件等。

事件的三要素：

  1. 事件源
  2. 注册事件（绑定事件）
  3. 事件处理程序
id事件名说明
1onclick鼠标点击左键触发
2onmouseover鼠标经过触发
3onmouseout鼠标离开触发
4onfocus获得鼠标焦点触发
5onblur失去鼠标焦点触发
6onmousemove鼠标移动触发
7onmouseup鼠标弹起触发
8onmousedown鼠标按下触发
9ondblclick鼠标双击触发
1.2.1 代码实例
<body>
    <input type="text" />
</body>
<script>
    var inp = document.querySelector("input");
    inp.onclick = function () {
      console.log("我被点击了");
    };
    inp.onmouseover = function () {
      console.log("你碰到我了");
    };
    inp.onmouseout = function () {
      console.log("你离开了我");
    };
    inp.onfocus = function () {
      console.log("我聚焦了");
    };
    inp.onblur = function () {
      console.log("我失去聚焦了");
    };
    inp.onmousemove = function () {
      console.log("你的手在我身上动");
    };
    inp.onmouseup = function () {
      console.log("你松开左键了");
    };
    inp.onmousedown = function () {
      console.log("你按下了");
    };
    inp.ondblclick = function () {
      console.log("你打了我两下");
    };
</script>
1.3操作元素
id事件名称说明用法
1element.innerText可以修改元素的内容，只有内容，不保留空格、换行element.innerText = '内容'
2element.innerHTML得到html标签、保留空格、换行element.innerHTML= '内容'
3element.属性DOM操作可以修改网页中元素的属性,如:src,href,id,alt,title等element.属性 = '内容'
4element.表单属性DOM可以操作表单的属性,如:type,value,checked,selected,disabled等element.表单属性 = '内容'
5element.style直接修改元素样式element.样式属性= '内容'
6element.className通过修改元素类名来改变样式element.className= '类名'
1.3.1代码实例
<style>
    .border{
        border: 1px solid red;
    }
</style>
<body>
    <span>名字：</span>
    <input type="text" />
</body>
<script>
	var sp = document.querySelector("span");
    var inp = document.querySelector("input");
    inp.onfocus = function () {
      sp.innerText = "姓名：";
    };
    inp.onblur = function () {
      sp.innerHTML = "名字：";
    };
    sp.title = "鼠标停留在文字上展示";
    inp.value = "默认值";
    sp.style.color = "red";
    inp.className = "border";
</script>
1.4自定义属性操作
id事件名说明
1element.属性用于获取内置属性的值
2element.getAttribute(‘属性’)用于获取自定义属性的值
3element.属性 = 值设置元素的属性值
4element.setAttribute(‘属性’,‘值’)设置元素的属性值
5removeAttribute(‘属性’)删除属性值
6element.dataset.属性名(H5新增方式获取)使用dateset只能获得以data开头的属性
1.4.1代码实例
<body>
    <div
      id="demo"
      index="1"
      class="one"
      remov="00"
      data-demo="1"
      data-index="2"
      data-list-name="demo"
    ></div>
</body>
<script>
	var div = document.querySelector("div");
    console.log(div.id);
    console.log(div.getAttribute("remov"));
    div.id = "123";
    div.setAttribute("index", 456);
    div.removeAttribute("remov");
    console.log(div.dataset); //{"demo":"1","index":"2","listName":"demo"}
</script>
1.5节点操作
id事件名说明
1element.parentNode获取最近的父级元素
如果找不到父节点就返回null
2parentNode.childNodes获取到所有的子节点(包括元素节点、文本节点等)
3parentNode.children获取所有子节点(得到的是元素节点)
4parentNode.firstChild、parentNode.lastChildul获取到第一个/最后一个节点(包含了文本节点、元素节点等)
5parentNode.firstElementChild、parentNode.lastElementChild获取到第一个/最后一个的子元素节点
6node.nextSibling、node.previousSibling获取上/下一个兄弟节点(包含文本节点等…)
7node.nextElementSibling、node.previousElementSibling获取上/下一个兄弟节点(得到的是元素节点)
8node.nextElementSibling、node.previousElementSibling获取上/下一个兄弟节点(得到的是元素节点)
9document.createElement(‘标签名’)创建了一个节点(元素)
10node.appendChild(child)在后面添加节点
11node.insertBefore(child,指定元素)在前面添加节点
12node.removeChild(child)删除节点
13node.cloneNode()浅拷贝，只复制标签本身，不复制内容
14node.cloneNode(true)深拷贝，复制节点和内容，包括所有子节点
1.5.1代码实例
<body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </body>
  <script>
    var son = document.querySelector("li");
    var par = document.querySelector("ul");
    console.log(son.parentNode);
    console.log(par.childNodes);
    console.log(par.children);
    console.log(par.firstChild);
    console.log(par.lastChild);
    console.log(par.firstElementChild);
    console.log(par.lastElementChild);
    console.log(par.nextSibling);
    console.log(par.previousSibling);
    console.log(par.nextElementSibling);
    console.log(par.previousElementSibling);
    let list = document.createElement("li");
    par.appendChild(list);
    par.insertBefore(list, par.children[1]);
    par.removeChild(par.children[3]);
    console.log(par.cloneNode());
    console.log(par.cloneNode(true));
  </script>
1.6事件高级
id事件名说明
1element.addEventListener(type,function,Boolean)监听事件，type:类型,function:函数,Boolean:true捕获模式，false冒泡模式
2element.事件名= null传统删除事件方法
3element.removeEventListener(type,fn)监听删除事件
1.6.1代码实例
<style>
    .big {
        width: 150px;
        height: 150px;
        background-color: red;
    }
    .mid {
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    .smail {
        width: 50px;
        height: 50px;
        background-color: rgb(0, 255, 34);
    }
</style>
  <body>
    <div class="big">
      大
      <div class="mid">
        中
        <div class="smail">小</div>
      </div>
    </div>
  </body>
  <script>
    var smail = document.querySelector(".smail");
    var mid = document.querySelector(".mid");
    var big = document.querySelector(".big");
    function boxname() {
      console.log(this.innerText);
    }
    smail.addEventListener("click", boxname, false);
    mid.addEventListener("click", boxname, false);
    big.addEventListener("click", boxname, false);
   //  big.addEventListener("click", boxname, true);
    smail.removeEventListener("click", boxname);
    mid.removeEventListener("click", boxname);
  </script>
1.7event事件常用方法
id事件名说明
1e.target返回触发事件的对象(标准)
2e.srcElement返回触发事件的对象(照顾低版本浏览器 ie9以下)
3e.type返回事件的类型
4e.preventDefault()阻止默认事件(方法 如不让链接跳转 标准)
5e.returnValue阻止默认事件(属性 照顾低版本浏览器 ie9以下)
6e.stopPropagation()阻止冒泡(方法 标准)
7e.cancelBubble阻止冒泡(属性 照顾低版本浏览器 ie9以下 )
8e.clientX返回鼠标在可视区的坐标x
9e.clientY返回鼠标在可视区的坐标y
10e.pageX返回鼠标在页面的坐标x
11e.pageY返回鼠标在页面的坐标要y
12e.screenX返回鼠标在屏幕的坐标x
13e.screenY返回鼠标在屏幕的坐标y
-键盘事件触发条件
1keyup某个键盘弹起触发
2keydown某个键盘按下触发
3keypress某个键盘按下触发(但不识别功能键 如ctrl,shift,方向键等)
4keyCode返回该键的ASCII值
1.7.1代码实例
  <body>
    <ul>
      <li>li one</li>
      <li>li two</li>
      <li>li three</li>
    </ul>
    <a href="www.baidu.com">百度</a>
      
  </body>
  <script>
    var ul = document.querySelector("ul");
    ul.addEventListener("click", function (e) {
      console.log(e.target);
      console.log(e.srcElement);
      console.log(e.type);
    });
      
    var a = document.querySelector("a");
    a.addEventListener("click", fn);
    function fn(e) {
      console.log(e.preventDefault()); // dom标准写法
      // e.returnValue()
    }
      //阻止右键菜单
    document.addEventListener("contextmenu", function (e) {
      e.preventDefault(); // 阻止默认行为
    });
      //阻止选择文字
    document.addEventListener("selectstart", function (e) {
      e.preventDefault(); // 阻止默认行为
    });
      
    document.addEventListener("mousemove", function (e) {
      console.log("鼠标在可视区的坐标x:" + e.clientX);
      console.log("鼠标在可视区的坐标y:" + e.clientY);
      console.log("鼠标在文档的坐标x:" + e.pageX);
      console.log("鼠标在文档的坐标y:" + e.pageY);
      console.log("鼠标在屏幕的坐标x:" + e.screenX);
      console.log("鼠标在屏幕的坐标y:" + e.screenY);
    });
      
    document.addEventListener("keyup", function (e) {
      console.log("你松开了键盘按钮");
    });
    document.addEventListener("keydown", function (e) {
      console.log("你按下了键盘按钮");
    });
    document.addEventListener("keypress", function (e) {
      console.log("keyCode:" + e.keyCode);
    });
  </script>

2.BOM

2.1window对象的常见事件
2.1.1页面加载事件：load、DOMContentLoaded
 // 监听事件方式(等页面内容全部加载后,执行load事件。)
    window.addEventListener("load", function () {
      var btns = document.querySelector("button");
      btns.addEventListener("click", function () {
        alert(88);
      });
    });
//等DOM加载完毕,就执行DOMContentLoaded事件(ie9以上支持)
    window.addEventListener('DOMContentLoaded', function () {
        alert(11);
    })
2.1.2调整窗口大小事件：resize
	<style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
  <script>
    window.addEventListener("load", function () {
      var btns = document.querySelector("div");
      window.addEventListener("resize", function () {
        // innerWidth能获取当前屏幕宽度
        console.log(window.innerWidth);
        console.log("窗口在大小变化");
        if (innerWidth < 800) {
          btns.style.display = "none";
        } else {
          btns.style.display = "block";
        }
      });
    });
  </script>
2.1.3定时器：setTimeout、setInterval

setTimeout(调用函数, [延迟的毫秒数])：

<body>
    <button>清除计时器</button>
</body>
<script>
	let timer = setTimeout(function () {
      console.log("BOMM!");
    }, 3000); // 3秒
    var btns = document.querySelector("button");
    btns.addEventListener("click", function () {
      clearTimeout(timer);
    });
</script>

setInterval(回调函数,延迟时间)：

  <body>
    <button class="begin">开始定时器</button>
    <button class="stop">结束定时器</button>
  </body>
  <script>
    var begin = document.querySelector(".begin");
    var stop = document.querySelector(".stop");
    var timer = null; // timer  全局变量(这样其他的函数就能访问到它了)  null是一个空对象

    begin.addEventListener("click", function () {
      // 1.开启定时器
      timer = setInterval(function () {
        console.log("持续输出");
      }, 1000);
    });

    stop.addEventListener("click", function () {
      // 2.结束定时器
      clearInterval(timer);
    });
  </script>
2.2JS执行机制
2.2.1JS单线程

概念：同一个时间下,只能做一件事。

单线程所有任务都需要排队,前一个任务结束,才会执行后一个任务。这样会使JS执行的时间过长,这样就会造成页面的渲染效果不连贯,导致页面渲染加载阻塞的感觉。

2.2.2JS同步和异步

概念：

  • 同步：前一个任务执行结束后再执行下一个任务(排队的形式),程序的执行顺序与任务的排列顺序是一致的、同步的。
  • 异步：执行一个任务的同时另一个任务也可以执行。

执行过程：

  • 同步任务：同步任务都在主线程上执行,形成一个执行栈。
  • 异步任务：异步任务都是通过回调函数了来实现的。异步任务相关的回调函数会添加到任务队列(消息队列)中。
2.3location对象

window给我们提供了一个location属性用于获取或设置页面的url,并且可以解析url。这个属性返回的是一个对象,所以我们也称这个属性为location对象。

2.3.1URL

统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。 互联网上的每个文件都有一个唯一的URL，它包含信息指出文件的位置以及浏览器应该怎么去处理它。

//URL一般语法格式
protocol://host[:port]/path/[?query]#fragment
  • protocol: 通信协议,常用的http,ftp等
  • host:主机名(域名) www.xxx.com
  • port: 端口号(可选参数),省略时使用的是默认端口,如http默认端口为80
  • path:路径,由0个或者多个’/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
  • query: 参数 以键值对的形式 '&'符号分隔开
  • fragment: 片段 #后面内容 常见于链接(锚点)
2.3.2location对象的属性
location对象属性返回值
location.href获取或设置整个url
location.host返回主机(域名): www.xxx.com
location.port返回端口号
location.pathname返回路径
location.search返回参数( ?后面的内容)
location.hash返回片段(#后面的内容 常见于锚点链接)
location对象方法返回值
location.assign()跟href一样,可以跳转页面(重定向页面) 能记录历史 回退页面
location.replace()跟href一样,可以跳转页面(重定向页面) 能记录历史 回退页面
location.reload()重新加载页面,相当于刷新(f5) 参数为true(强制刷新) ctrl+f5
2.4navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent。

userAgent属性可以返回客户端发送服务端的user-agent头部的值。通过user-agent头部的值,我们可以判断用户是以哪个终端打开页面,然后实现相应的跳转方式。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "./m.jd";      // 手机
} else {
    window.location.href = "./www.jd.com";      //电脑
}
2.5history对象

与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的url。

history对象方法作用
back()后退功能
forword()前进功能
go(参数)前进后退功能,参数如果是1,则前进一个页面,-1,则后退一个页面
广东蜡笔小新
关注
  • 44
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript（二）--DOM和BOM
qq_42022411的博客
01-08 377
文章目录
JavaScript-DOM和BOM详解
主营前端方向，技术栈是vue
12-30 1124
DOM和BOM(DOM((简介,事件(onclick单击事件、onload事件),BOM(简介，分类，语法( Navigator 当前浏览器、Histry 向前或向后翻页、Location 地址栏的信息))
DOM和BOM常用API
m0_61698324的博客
01-17 886
DOM 是指文档对象模型；是为了操作文档出现的 API，可以访问HTML文档的所有元素, document 是其的一个对象； BOM 是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。是为了操作浏览器出现的 API，window 是其的一个对象。
DOM和BOM的api有哪些？
luoxiaonuan_hi的博客
07-16 746
dom和bom
DOM BOM 常用API
冀先生的博客
12-26 741
BOM BOM是browser object model的缩写，简称浏览器对象模型。 通过BOM我们可以学到与浏览器窗口交互的一些对象，可以移动，调整浏览器大小的window对象，可以用 于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与 screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。...
DOM模型+BOM模型，常见Web API简单介绍
wyhshd的博客
04-20 598
Web API是网络应用程序接口，主要用于Web开发中，使网络应用能够通过API接口实现存储服务、消息服务、计算服务等能力。这些API通过浏览器访问，也可以通过其他应用程序通过HTTP请求访问。Fetch API：用于发送网络请求并处理响应。Fetch API提供了一种更现代的方式来替代传统的XMLHttpRequest方法，它基于Promise设计，使得异步请求的处理更加简洁和直观。：这是一个较早的用于发送HTTP请求并与服务器进行通信的API。
JavaScript基础篇视频教程
06-28
事件和DOM（文档对象模型）操作是JavaScript与用户交互的基础。学习如何监听和触发事件（如click、mouseover等），以及如何使用DOM API来选择、修改或添加HTML元素，可以使网页更具交互性。 异步编程是JavaScript的...
javascript基础知识大全
08-03
JavaScript API是一系列预先定义好的函数和对象，如DOM（Document Object Model）API用于操作HTML元素，BOM（Browser Object Model）API处理浏览器特定功能，如窗口、导航和定时器。另外，ES6引入了Promise和Fetch ...
js实现DOM走马灯特效的方法
10-24
在本例中，我们讨论的是如何使用JavaScript和DOM（Document Object Model）来创建一种常见的网页特效——走马灯（也称为滚动文字或轮播效果）。 走马灯特效通常用来吸引用户的注意力，它会不断地循环显示一系列文本...
javascript
03-17
9. AJAX：Asynchronous JavaScript and XML，虽然现在XML已不常用，但AJAX的核心思想——异步数据传输和局部刷新，仍然是现代Web开发的重要技术。 10. ES标准：ECMAScript是JavaScript的标准化规格，由ECMA国际维护...
DOM和BOM的操作（Web APIs）
weixin_52390649的博客
03-24 169
1、Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM） 2、文档对象模型简称DOM，通过这些DOM接口可以改变网页的内容、结构、样式。 3、一个页面就是一个文档，DOM中用docutment表示。元素；页面中所有的标签被成为元素，用element表示。 网页中的所有内容（标签、属性、文本、注释）都叫节点，用node表示。DOM把以上内容都看做是对象。 4、事件三要素：事件源、事件类型、事件处理程序 ...
【总结】JavaScript常用BOM操作API
Seven的博客
06-29 637
JavaScript常用BOM操作API总结1.BOM简介2.BOM对象2.1 window 对象2.1.1弹框类：2.1.2打开窗口(4种)：2.1.3 关闭窗口2.2 location对象2.3. navigator对象2.4 history对象2.5 screen对象3. 浏览器窗口尺寸相关4.滚动距离5.滚动事件6. load事件 1.BOM简介 BOM 是 Browser Object Model，浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window，而win
前端学习——Web APIs (DOM+BOM)
weixin_57896572的博客
11-09 960
Pink老师，Web APIs学习笔记，包含BOM和DOM的基础知识。
什么是 web API？ DOM和BOM
计算机小白学前端~
05-08 1046
一、API和Web API API（Application Programming Interface ，应用程序API）:是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力，二又无需访问源码，或理解内部工作机制的细节。 是给程序员提供的一种工具，以便能够更轻松的实现想要完成的功能。 Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) 主要针对浏览器提供的借口，主要针对浏览器做交互效果。 二、什么是DOM DOM，
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
DOM/BOM的api对比jQuery
weixin_42069147的博客
11-23 174
nodejs安装
最新发布
a1241436267的博客
08-19 425
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值