JS基础知识（三）——BOM,DOM

最新推荐文章于 2024-05-29 19:02:09 发布
最新推荐文章于 2024-05-29 19:02:09 发布
阅读量441 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 115 前端 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SSR_J_Study/article/details/89297775
本文详细介绍了JavaScript中的闭包，并深入探讨了BOM（浏览器对象模型），包括Window对象的属性和方法，如screenLeft、alert、setTimeout等。接着讲解了DOM（文档对象模型），阐述了节点访问、操作、属性操作、文本操作等内容，以及DOM事件的事件流、事件处理程序和事件对象的相关知识。

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

JS基础知识（三）——BOM,DOM


w3c规则，ie的盒模型

一、闭包

函数可以访问向上函数作用域的变量

二、BOM-浏览器对象模型

  1. 将HTML构建成一个DOM树，DOM树的构建过程是一个深度遍历的过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
  2. 将CSS解析成CSS去构造CSSOM(CSS Object Model,CSS对象模型)树。
  3. 根据DOM树和CSSOM来构造Rendering Tree（渲染树）。

注意：Rendering Tree渲染树并不等同于DOM树，因为一些像Hender或display：none的东西就没必要放在渲染树中了。

（一）BOM内的Window对象

  • screenLeft（属性）：屏幕左边，返回窗口相对于屏幕的x坐标
  • screenTop：返回窗口相对于屏幕的y坐标
  • screenX(IE)
  • screenY(IE)
  • alert：出现警告
    alert("警告内容");--加引号
  • prompt：可输入内容的对话框
    prompt("框上说明"（可无）);
  • confirm：取消一个对话框
  • setTimeout，setInterval(时间单位为毫秒)
    setTimeout：一段时间后执行所给函数
    setTimeout ( functionname / function ( ) { 函数体 } , 多少毫秒后执行 )
    setInterval：每隔一段时间执行所给函数
  • clearTimeout，clearInterval：删除定时器
    var time=setTimeout（ , ）；clearTimeout（time）；

（二）Location对象

  • hash属性：设置或返回从井号 (#) 开始的 URL（锚）。
  • host属性：设置或返回主机名和当前 URL 的端口号。
  • href属性：设置或返回完整的 URL。
  • port属性：设置或返回当前 URL 的端口号。
  • assign方法：加载新的文档

三、DOM-文档对象模型（->HTML)

document object model

  • 独立于平台和语言的接口（不仅在js可用）
  • 通过他与文档进行连接
  • 运行程序和脚本动态的访问和更新
  • 节点：任一内容均可成为节点：元素节点，文本节点，属性节点，注释节点……
    可以将一个HTML文档转变成一个DOM树
    （元素节点不包括文本节点）

（一）节点访问

DOM节点关系

  • childNodes：子节点的集合/数组
var oItems = document.body.childNodes;
for(var i;i<oItems;i++)
{
    console.log("nodeType:"+oItem[i].nodeType);
    console.log("nodeName:"+oItem[i].nodeName);
    console.log("nodeValue:"+oItem[i].nodeValue);
}
  • parentNode：返回父节点
  • firstChild，lastChild：第一个，最后一个子节点
  • nextSibling，previousSibling：下/前一个同胞节点
  • NodeList：返回一个节点组
    动态的属性（对文档结构的修改，会实时反射到NodeList）

（二）节点操作

  • 创建节点
    createElement(); //创建元素节点
    createTextNode(); //创建文本节点
    createComment(); //创建文本节点
    文档碎片
  • appendChild：在很多个子节点最后再插入一个新的节点
  • insertBefore：在指定节点之前插入一个新的节点
    insertBefore( 新节点 , 以前的节点 );
  • replaceChild：替换已存在的节点
  • removeChild：移除存在的节点
  • document：一般用document.来访问节点

获取节点的方式

常用
getElementById();
getElementsByTagName(); //标签名
getElementsByClassName();
getElementsByName();
不常用
querySelector('选择器');
querySelectorAll('选择器'); //获取...里全部的…

（三）attribute属性操作

getAttribute("属性名"); //返回属性的值
getAttribute("属性名")[0]; 返回…的第一个值
setAttribute("属性名","属性值"); //添加属性；若属性名已存在，对其进行修改
removeAttribute("属性名"); //删除属性

（四）文本操作

  • write(方法)：重绘整个页面
  • innerHTML(属性)->常用
    document.getElementById("id").innerHTML= ··· ;
    //得到标签名为“id"的内容/修改从元素的标签开始所有内容
    重绘页面的一部分
  • innerText：只返回标签内部的内容；按行输出，不会用到HTML内的格式
  • textContent：包括下面的子节点的所有内容；输出格式与HTML内的格式 一致

（五）文档碎片

document.createDocumentFragment();
相当于创建一个容器，将节点放进去可以防止节点之间插入节点树上浏览器进行渲染，提高性能

var fragment = document.createDocumentFragment()
for (var i = 0 ; i<1000 ; i++)
{
    var x = document.createElement("span");
    var t=document.createTextNode("i");
    x.appendChild(t);
    fragment.appendChild(x);
}
document.body.appendChild(fragment);

（六）元素遍历

  • childElementCount：返回元素子节点的个数
  • nextElementChild：返回第下一个元素节点（可以跳过换行的空）
  • firstElementChild
  • lastElementChild
  • previousElementChild

（七）访问样式

element.style.color=“red”；
style的属性要用驼峰式命名

（八）计算的样式

element.style.无法访问外联样式表里的样式
document.defaultView.getComputedStyle(DOM元素，伪类/null)

（九）DOM事件

事件流

  1. 捕获过程：x标签被点击，由window-document-< html >-< body >-< div >-< x.father标签 >
  2. 冒泡过程：由该标签的父元素向上
  3. 触发过程：点击x标签

一定会有触发过程，捕获和冒泡有一种

事件处理

（eg.click事件，mouseover事件；响应，处理事件的函数）

  • on(html)：<…… “函数/函数名（函数体放js里）”>
  • on(js)
DOM零级事件处理程序
  • 定义对象获取某一节点，节点.onxxx=function{……}；
  • 删除一个事件 id.onxxx=null；
  • 对同一元素多次处理，只执行最后一次的fun，执行最后一次的内容
DOM二级事件处理程序
  • addEventListener：添加事件监听（可以多次添加）
    变量.addEventListener(事件名，事件处理函数，布尔值);
    //布尔值默认-false-事件在冒泡阶段执行
  • removeEventListener：删除事件监听
    变量.removeEventListener（事件名，函数名，布尔值）;
    //布尔值默认-false-在冒泡阶段移除
    匿名函数不能通过该函数删除（方法：添加个事件名)

event（事件对象）

可以运用对象的属性和方法

  • target：返回触发事件的节点
  • preventDefault：阻止默认行为（eg.双击全选）
  • currentTarget：返回绑定事件的元素节点（过程中相关的所有节点）
  • stopPropagation：阻止事件的冒泡传播
  • type：返回发生事件的名称

鼠标事件

  • click：< element onclick = "code" > x.function（）{……}
  • dbclick ：双击
  • mousedown：按下鼠标
  • mouseup ：释放鼠标
  • mousemove ：在元素内部移动
  • mouseleave：移动到元素外部，子元素不触发
  • mouseout：移动在元素外部 子元素触发
  • mouseover：移入元素 子元素触发
  • mouseenter ：移入元素 子元素不触发

mousedown>move>up>>click
mousemove>over>enter>move>out>leave

鼠标的event
  • pageX，pageY：点击位置相对于整个页面的x，y坐标
  • clientX，clientY：点击位置对于浏览器可视窗口的x，y坐标
  • screenX,screenY：点击位置相对于电脑屏幕的x，y坐标
  • offsetX,offsetY：点击位置相对于复盒的x，y坐标

键盘事件

使用时：onkeyxxx

  • keydown
  • keypress
  • keyup
  • keyCode：获取按键（onkeydown，onkeyup）的Unicode值
  • charCode：返回onkeypress的值的Unicode值

事件委托

通过给目标节点的父节点添加事件，然后判断event.target是不是子节点，如果是就执行函数

  • 可以减少代码的冗余
BOM 与 DOM 详解：浏览器对象模型与文档对象模型的全面解析
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
06-02 1078
BOM 与 DOM 详解：浏览器对象模型与文档对象模型的全面解析
【前端学习笔记】Web API——BOM与DOM
最新发布
m0_74824076的博客
12-25 865
DOM定义了节点和对象的属性、方法，这些属性、方法可以动态地更新页面内容，响应用户的交互。在这种做法中，当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时，我们在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。window 代表浏览器的一个窗口或标签页，提供了控制浏览器窗口的方法和属性，是浏览器中最顶层的对象，同时也是全局对象，所以在全局作用域中声明的所有变量和函数都成为了 window 对象的属性。BOM：浏览器对象模型。
js中的BOM和DOM对象
06-20
js中的BOM对象(window等)
js_BOM_DO编程
ZhuiZhuDream5的博客
04-04 460
1.Array对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Array对象</title> <!--js中定义数组对象 注意事项： 1）在js中定义数组，不用担心数组角标越界的问题，自动扩容 2）在js中，数组...
BOM和DOM详解
热门推荐
anythings的专栏
04-25 2万+
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C
JavaScript-bom-dom
Nicole1118的博客
05-05 185
BOM（Broswer Object Model） 方法： 框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用，表示父窗口的window对象 window.opener...
js的BOM
专业大神之路
03-21 1144
BOM（Browser Object Model），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功...
JavaScript基础教程——入门必看篇
10-22
3. **组成部分**：JavaScript由ECMAScript（规定语法标准）、BOM（浏览器对象模型，用于操作浏览器特性）和DOM（文档对象模型，用于操作HTML元素）三部分组成。 JavaScript的基本结构是在HTML中插入`<script>`标签...
JavaScript----DOM基础知识（二）——节点关系
yufanhui的博客
07-11 352
JavaScript----DOM基础知识（二）--节点我们知道DOM将HTML或XML文档描绘成了一个具有层次化的节点树，节点又分为几种不同的类型，每种类型用来记录文档中不同的信息，而每个节点又都拥有各自的特点、属性、方法，而且也与其他节点存在着关系。证实这种节点与节点之间的关系，构成了层次。文档元素是文档的外层元素，文档中的其他所有元素都包含在文档元素中。每个文 档只能有一个文档元素。在 HT...
JavaScript基础教程：ECMAScript、DOM与BOM详解
本资源是一份关于JavaScript基础的详细教程，主要针对初学者和进阶开发者，涵盖的核心知识点包括： 1. **JavaScript组成**：讲解了JavaScript语言的两大核心部分——ECMAScript（解释器和翻译的基础，定义了...
前端基础入门三大核心之JS篇：BOM基础探索 —— 窥视window对象的奥秘【含代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-29 1070
window对象是前端开发者绕不开的一环，它既是基础也是进阶的起点。本文只是掀开了它神秘面纱的一角，实际开发中还有更多细腻之处值得我们去探索。你在使用window对象时遇到过什么有趣或棘手的问题？有没有什么独到的技巧愿意分享？欢迎在评论区留言，让我们一起碰撞思想的火花，共筑更坚固的前端基石。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
JS - BOM/DOM
半夏半暖半倾城的博客
06-22 243
BOM/DOM//所有全局的变量都是window的属性 var str = "张三"; console.log(str); console.log(window.str); function test() { var age = 10; } test(); console.log(age);                 //不能访问到函数内部的变量//所有全局的函数都是window的...
BOM_DOM
SunshineBoy的博客
05-06 380
1. BOM编程 1.1 List item 全称 Browser Object Model，浏览器对象模型。 JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。 为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。 1.2 BOM 对象 1.3 window 对象 Window 对...
JS的BOM DOM讲解
2401_83232280的博客
04-01 692
Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以⽅便的操作浏览器中的各个对象。是js提 供的，⽤来访问⽹⻚⾥所有 内容的(标签,属性,标签的内容)2. dom树: html通过浏览器加载到内存⾥⾯形成了⼀颗dom 树, 我们就可以操作dom树节点(获得节点, 添加节点, 删除 节点)在注册⻚⾯添加籍贯,左边是省份的下拉列表,右边是城市的 下拉列表.右边的select根据左边的改变⽽更新数据。
js中的BOM和DOM
2301_76986466的博客
03-23 139
获取地址或者设置地址--console.log(location.href);宽 console.log(window.innerWidth) console.log(innerWidth)2.获取/设置整个url中的数据部分---console.log(location.search)3.获取/设置整个地址中的锚点 console.log(location.hash);
JS - DOM,BOM
12-16 361
1- innerText和textContent有兼容性问题 Title fj ml mz mc //1 获取DOM对象 var
BOM 和 DOM_bom dom
2401_84592081的博客
04-26 838
到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为 ECMAScript，DOM，BOM。BOM（Browser Object Model）是指浏览器对象模型 ，作用是通过js代码操作浏览器DOM （ Document Object Model）是指文档对象模型，作用是通过js代码操作标签。通过它访问HTML文档的所有元素。
客户端js（BOM&DOM）
dkh_321的博客
09-26 1954
一.BOM 1.认识BOM 什么是BOM 浏览器对象模型， Brower Object Model。   为什么需要BOM 我们的html，css都是在浏览器中进行解析的。 当我们想要实现一些特殊的效果，希望html和css的样式能够动态的改变。 js是一门浏览器端的脚本语言。 我们需要让js和html,css之间架起一个桥梁。就js能够与浏览器进行交互。在这种情况下：BOM就出
BOM&DOM
2018.
01-10 839
BOM&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;DOM1 DOM1.1 DOM概述1.2 DOM树1.3 查询1.4 修改1.5 增加/删除2 BOM 1 DOM 1.1 DOM概述 DOM: Document Object Model专门操作网页内容的API标准； W3C统一所有浏览器操作网页内容的API，几乎所有浏览器100%兼容DOM API，用js操作网页内容只能通过DOM API 包括：增删改查+事件绑定 1.2 DO..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值