Mutation Observer API
概述 Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动,这个 API 都可以得到通知。 概念上,它很接近事件,可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是,它与事件有一个本质不同:事件是同步触发,也就是说,DOM 的变动立刻会触发相应的事件;Mutation Observer ...
CSS 操作
CSS 与 JavaScript 是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本节介绍如何通过 JavaScript 操作 CSS。 HTML 元素的 style 属性 操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAt...
Text 节点和 DocumentFragment 节点
Text 节点的概念 文本节点(Text)代表元素节点(Element)和属性节点(Attribute)的文本内容。如果一个节点只包含一段文本,那么它就有一个文本子节点,代表该节点的文本内容。 通常我们使用父节点的firstChild、nextSibling等属性获取文本节点,或者使用Document节点的createTextNode方法创造一个文本节点。 // 获取文本节点 var textN...
属性的操作
HTML 元素包括标签名和若干个键值对,这个键值对就称为“属性”(attribute)。 <a id="test" href="http://www.example.com"> 链接 </a> 上面代码中,a元素包括两个属性:id属性和href属性。 属性本身是一个对象(Attr对象),但是实际上,这个对象极少使用。一般都是通过元素节点对象(HTMlElemen...
Element 节点
Element节点对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。 元素节点的nodeType属性都是1。 var p = document.querySelector('p'); p.nodeName // "P" p.nodeType // 1 Element对象继承了Node接口,因此Node的属性和方...
Document 节点
概述 document节点对象代表整个文档,每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。 document对象有不同的办法可以获取。 正常的网页,直接使用document或window.document。 iframe框架里面的网页,使用iframe节点的contentDocument...
ParentNode 接口,ChildNode 接口
节点对象除了继承 Node 接口以外,还会继承其他接口。ParentNode接口表示当前节点是一个父节点,提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点,提供一些相关方法。 ParentNode 接口 如果当前节点是父节点,就会继承ParentNode接口。由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment)拥...
NodeList 接口,HTMLCollection 接口
节点都是单个对象,有时需要一种数据结构,能够容纳多个节点。DOM 提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection。 这两种集合都属于接口规范。许多 DOM 属性和方法,返回的结果是NodeList实例或HTMLCollection实例。主要区别是,NodeList可以包含各种类型的节点,HTMLCollection只能包含 HTML 元素节点。 NodeLis...
Node 接口
所有 DOM 节点对象都继承了 Node 接口,拥有一些共同的属性和方法。这是 DOM 操作的基础。 属性 Node.prototype.nodeType nodeType属性返回一个整数值,表示节点的类型。 document.nodeType // 9 上面代码中,文档节点的类型值为9。 Node 对象定义了几个常量,对应这些类型值。 document.nodeType === Node....
DOM 概述
DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。 浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有...

最近评论
  • wanglijun: 22
Copyright © 低调揭秘 冀ICP备15025246号-1 版权声明 免责条款 隐私政策 合作互助 关于我们