资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/DOM和BOM

DOM和BOM

WelliJhon / 3004人阅读

摘要：和概念文档对象模型。作用操作页面中的元素。顶级对象是就是指或者文件。侧重于展示数据，侧重于存储数据，写的是代码，遵循的是的规范。页面中所有的内容都是节点标签节点，属性节点，文本节点。所以，对象值这种写法是错误的。

DOM和BOM DOM 概念

DOM:Document Object Model 文档对象模型。

DOM作用：操作页面中的元素。

顶级对象是document 就是指HTML或者XML文件。

HTML侧重于展示数据，XML侧重于存储数据，XHTML写的是HTML代码，遵循的是XML 的规范。

每一个HTML文件都可以看成是一个文档对象，里面所有的标签的层次关系都可以看成是一个树形结构图，树状图。

页面中所有的内容都是节点：标签节点，属性节点，文本节点。IE8中会忽略空白节点

节点属性

nodeType 如果是标签，值为1；如果是属性，值为2；如果是文本，值为3

nodeName 如果是标签，值为大写标签名字；如果是属性，值为小写属性名字；如果是文本，值为#text

nodeValue 如果是标签，值为 null ；如果是属性，值为属性值；如果是文本，值为文本内容

页面中的标签，标签就是元素，元素就可以看成是对象，标签也是节点。

节点比元素大。

根元素：页面中最外边的标签

文档元素：文档中的第一个元素，HTML文档元素就是< html>

绑定和解绑

第一种写法

对象.on+"事件名字"=事件处理函数

对象.on+"事件名字"=null

第二种写法

对象.addEventListener("事件名字",命名函数,false);

对象.revemoEventListener("事件名字",命名函数的名字,false);

第三种写法

对象.attachEvent("事件名字",命名函数);

对象.detachEvent("事件名字",命名函数的名字);

事件冒泡

元素A中嵌套了另一个元素B，里面元素B和外面元素A注册了相同的事件，如果里面元素B的事件触发了，外面的元素A的该事件也会自动的触发。

阻止事件冒泡的两种方法 window.event.cancelBubble=true 或者是 e.stopPropagation();

事件的三个阶段

事件捕获阶段，事件目标阶段，事件冒泡阶段

事件阶段有一个属性，这个属性是需要通过事件参数对象.eventPhase来获取的

属性的值是：1->捕获阶段2->目标阶段3->冒泡阶段

e.type获取的是当前触发该事件的事件类型

false值由内向外，一般采用false

dv3===2===click

dv2===3===click

dv1===3===click

true值由外向内

dv1===1===click

dv2===1===click

dv3===2===click

DOM级别

DOM0 初级阶段

DOM1 规定了节点的类型Node，一般使用DOM1

DOM2 新增了一些方法，但是很多浏览器并不支持

DOM3 大多数浏览器都没有支持

全局变量和隐式全局变量

全局变量不会被删除，隐式全局变量会被删除

innerText和innerHTML

设置文本内容的时候，用两个都一样

设置标签内容的时候

innerText设置标签内容，显示的是标签+文本，标签实际上是转义出来了

innerHTML设置标签内容，显示的是效果

如果想要设置文本，用谁都可以，如果想要有标签效果，用innerHTML

获取标签中的文本内容，使用innerText和innerHTML都可以，如果获取的是元素中的标签和文本内容，应该使用innerHTML

innerText和textContent

innerText：谷歌支持，低版本火狐不支持，高版本火狐支持，IE8支持

textContent：谷歌支持，火狐支持，IE8不支持

浏览器不支持某属性时，该属性的类型是undefined

className

html标签中的class属性，在js 中是关键字，不能直接使用。所以， 对象.class="值"; 这种写法是错误的。应该这么写：对象.className="值";

对象.style.属性名="值"; div.style.backgroundColor="red";

对象.className="值"; div.className="cls";

自定义属性

获取自定义属性的值 对象.getAttribute(“属性的名字”); 返回值是该属性的值

设置自定义属性的值 对象.setAttribute(“属性的名字”,”值”);

removeAttribute，getAttribute，setAttribute三个方法不仅可以操作元素的自定义属性及值，还可以操作元素的自带属性

隐藏方式
设置样式

如果样式的属性是在style属性中设置的，是可以直接获取的

如果样式的属性是在style标签中设置的，不能直接获取

获取节点元素12个
创建元素的三种方式

第一种document.write

第二种 对象.innerHTML=”标签代码及内容”

第三种 document.creatElement

定时器 setInterval()

参数：代码

参数：时间----1000毫秒---1秒

返回值：该定时器的id值

执行过程：当页面加载完毕后，过了一段时间才执行里面的代码，再过一段时间再次里面的代码，反复执行

clearInterval(timeId);//清理定时器

setTimeout()

参数：代码

参数：时间----1000毫秒---1秒

返回值：该定时器的id值

执行过程：当页面加载完毕后，过了一段时间才执行里面的代码，再过一段时间再次里面的代码，只执行一次

clearTimeout(timeId2);//清理定时器

三大系列 offset系列

offsetLeft：元素相对左边的横坐标

offsetTop：元素相对上面的纵坐标

offsetWidth：元素的宽度，有边框

offsetHeight：元素的高度，有边框

offset系列获取的值都是数字类型

offsetWidth（offsetHeight）获取的元素本身的宽（高）+元素边框的宽（高）

如果父级元素脱离文档流，子级元素此时的offsetLeft获取的是相对父级元素的pading+自己的margin

如果元素自己脱离文档流，此时的offsetLeft获取的事自己的left+自己的margin

scroll系列

scrollLeft：向左卷曲出去的横坐标

scrollTop：向上卷曲出去的纵坐标

scrollWidth：内容实际的宽度，没有内容就是元素的宽度，没有边框

scrollHeight：内容实际的高度，没有内容就是元素的高度，没有边框

client系列

clientX：可视区域的横坐标

clientY：可视区域的纵坐标

clientWidth：可视区域的宽

clientHeight：可视区域的高

BOM 概述

浏览器中的顶级对象window，页面中的顶级对象document

页面中所有的内容都是window的，变量是属于window的，函数是属于window的。

因为页面中所有的内容都是window，所以，window是可以省略不写的。

系统对话框

alert() //不同浏览器中的外观是不一样的

confirm();//true确定,false取消

prompt() //不推荐使用

窗口对象

Window.open() 打开窗口

参数1:地址(内部的地址,外部的地址)

参数2:打开的方式：self 是在当前的页面中打开，blank是在新的选项卡中打开

参数3:好多的代码

window.close() 关闭窗口

Window.location对象

location相当于浏览器地址栏，可以将url解析成独立的片段

Window.navigator对象

window.navigator 的一些属性可以获取客户端(浏览器)的一些信息：

userAgent用户当前浏览器信息

platform用户系统信息（不准确）

Window.history对象

历史记录管理：

后退：history.back() history.go(-1)

前进：history.forward() history.go(1)

操作之后生成历史记录

云服务器 GPU云服务器 dom0和dom2 使用Javascript和DOM BOM bom编码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113870.html

相关文章

  • kmdjs和循环依赖

    摘要：从很早的版本就开始，是支持循环依赖的。比如下面的代码会被编译成要支持循环依赖其实有个要求，就是。不是的循环依赖是无解的循环依赖。所以在初始化阶段，这样的循环依赖是被允许的，因为都是。 循环依赖 循环依赖是非常必要的，有的程序写着写着就循环依赖了，可以提取出一个对象来共同依赖解决循环依赖，但是有时会破坏程序的逻辑自封闭和高内聚。所以没解决好循环依赖的模块化库、框架、编译器都不是一个好库、...

    AlienZHOU 评论0 收藏0

  • JavaScript的组成 | DOM/BOM

    摘要：中主要关注的就是，对象的主要功能就是处理网页内容。中文翻译模型，如果你把这个词从中抽离出来，看下面的图片是不是就很好理解。年月制定的标准，由两大部分组成核心和。扩展鼠标和用户界面事件范围遍历，增加了对支持。 往期回顾 在上一期的《JavaScript的组成 | 核心-ECMAScript 》☜里，我们有说到JavaScript 是由三大部分组成，分别是：核心ECMAScript、文档对...

    worldligang 评论0 收藏0

  • 谈谈浏览器里的JavaScript

    摘要：而与最大的区别在于与浏览器沟通的窗口，不涉及网页内容。完全依赖于浏览器厂商实作本身无标准规范，而有着所制定的标准来规范。而透过选取出来的节点，我们可以通过操作属性来变更它的文字。在许多的网页前端教学或是文章书籍当中，你可能常常听到这样的说法：「HTML、CSS 与JavaScript 是网页前端三大要素」，其中： HTML 负责资料与结构 CSS 负责样式与呈现 JavaScript 负责...

    CastlePeaK 评论0 收藏0

  • JavaScript学习总结（三）BOM和DOM详解

    摘要：有级级级共个级别。事件类型事件类型鼠标事件键盘事件事件事件处理器执行代码的程序在事件发生时会对事件做出响应。在标签中使用事件处理器的语法是标签事件处理器代码事件处理程序事件就是用户或浏览器自身执行的某种动作。 DOM介绍 D（文档）可以理解为整个Web加载的网页文档，O（对象）可以理解为类似window对象只来的东西，可以调用属性和方法，这里我们说的是document对象，M（模型）可...

    littlelightss 评论0 收藏0

  • 《JavaScript 闯关记》之简介

    摘要：浏览器只是实现的宿主环境之一，其他宿主环境包括和。年月，版发布，成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言，绝大多数现代网站都使用了 JavaScript，并且所有的现代 Web 浏览器（电脑，手机，平板）均包含了 JavaScri...

    baihe 评论0 收藏0

  • 做一名精致的JavaScripter 01：JavaScript简介

    摘要：精致从细节做起。标准会在每年的月发布一次，作为当年的正式版本，便是年发布的正式版本。支持情况各大浏览器对的支持情况浏览器支持情况对的支持情况支持情况。在浏览器中基于实现的已经成为的重要组成部分。 精致从细节做起。前端的工作也有一段时间了，大大小小的前端框架都有接触过，越是深入学习越是感觉之前的学习过于粗糙，基础不够扎实，于是准备近期把JavaScript的基础知识点梳理一下，查缺补漏，...

    张巨伟 评论0 收藏0

发表评论

登陆后可评论

0条评论

WelliJhon

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<