BOM,DOM常见操作和DHTML

阅读文本大概需要 5 分钟。

BOM

(Browser Object Model)浏览器对象模型,控制浏览器的一些行为。

window 对象

代表一个HTML文档。

属性

页面导航的 5 个属性 self,parent,top,opener,frames

方法

弹出对话框 3 个: alert,confirm,prompt

页面定时器:setInterval,clearInterval,setTimeout,clearTimeout

窗口打开关闭:open,close

History

浏览器的历史记录。

属性

length

方法

forward 前进,back 后退,go 前进/后退

Location

浏览器地址栏:跳转,刷新

属性

href,改变当前页面位置

方法

reload 刷新

DOM

(Document Object Model)文档对象模型让 JS 和 HTML,css 结合。可以使用 JS 来控制他们。

原理

将页面中所有内容,都封装成了对象。

Dom中的五类对象

Document 文档(重点)

Element 元素(重点)

Attribute 属性

Text 文本

Commons 注释

以上五类对象抽取了一个父类: Node

自身属性

nodeType,nodeName,nodeValue

导航属性

父找儿:firstChild, lastChild, childNodes

儿找父:parentNode (重要)

找兄弟:nextSibling, priviousSibling

获取 Element 的方式(重点)

从 Document 中获得 ELement

1.getElementById

2.getElementsByTagName

3.getElementsByClassName

4.getElementsByName

从 Element 中获得ELement

1.getElementsByTagName

2.getElementsByClassName

DOM中的事件

给 Element 对象添加一个 Function 类型的属性。那么这个Function 的运行时机与属性的名称有关。例如: 属性名触发时机

onClick 单击

ondblclick 双击

onload 当加载完毕

onchange 当内容改变

onblur 当失去焦点

onfocus 当得到焦点

在事件中我们想要获得事件的详情,那么我们需要拿到 Event(侦探)对象。获得事件函数是由浏览器在对应时机调用的,浏览器在调用的时候,已经将 Event 传给我们了。对于我们来讲,接受下就可以了。

属性

keyCode 按键的编码

button 鼠标按键的编码

clientX/clientX 鼠标所在位置的x,y轴坐标

方法

preventDefault,阻止默认行为。例如在点击 submit 按钮时,表单提交就是默认动作。

stopPropergation,停止事件的继续传播。例如在嵌套的 DIV 中,点击里面的 div,同时也会触发外层 div 的 onclick 事件。如果不想触发外层使用该方法。

Dom中常见操作

创建元素: document.createElement

添加: element.appendChild ==> 添加到末尾

element.insertBefore ==> 指定添加位置

removeAttribute 删除属性

removeChild 删除子节点

replaceChild 改元素

setAttribute 改属性

getAttribute 查属性值

getElementById

getElementsByTagName

getElementsByClassName

getElementsByName

DHTML技术

由微软提出,Dynamic HTML 动态网页技术。整合了 HTML CSS Javascript DOM 4个技术。可以理解为对 DOM 对象的增强: 增加了一些新的属性和方法,让我们开发更加便捷。

例如

一个元素的class属性,我们想改变, 我们使用setAttribute("class","类名")可以。但是 DHTML 提供了更方便的操作,className 属性。

最后,希望大家有所收获。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180609G1OE4R00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动