首页 >web前端 >js教程 >关于DOM知识的详细介绍

关于DOM知识的详细介绍

零下一度
零下一度原创
2017-06-26 11:52:461285浏览

DOM

我们知道,JavaScript是由ECMAScript + DOM + BOM组成的。ECMAScript是JS中的一些语法,而BOM主要是浏览器对象(window)对象的一些相关知识的集合。而DOM,则是文档对象相关的知识的集合。

我们知道,HTML和JS之间的交互是通过事件实现的。而DOM是针对HTML(XML)文档的一个API。因此,如果我们想实现与用户的交互,那么就需要使用DOM提供的API,获取HTML元素,然后在该元素上绑定相应的事件,实现与用户的交互。所以,对DOM的理解和掌握就显得相当重要。

本文章主要基于《JavaScript高级程序涉及(三)》中的DOM相关章节,对DOM的主要知识作出一个梳理,并穿插我个人的一些理解。

节点层次

写过HTML代码的地球人应该都知道,我们需要给每一个元素添加缩进,然后在书写相关的HTMl标签和内容,最后显示在网页上。因此这种嵌套的HTML代码和内容就构成了节点层次。

对ECMAScript理解的地球人应该都知道,JS中的每一个对象都是基于一个引用类型创建的,而引用类型可以是JS原生提供的引用类型(Array、Function、RegExp、Object等),也可以是自定义的引用类型(通过new关键字调用引用类型(也可以叫构造函数))。而所有对象都是Object的实例对象,都可以继承Object.prototype上的属性和方法

而在DOM中,也同样有这样类似的机制。在DOM中,最顶层的类型是Node类型,其他所有节点都可以继承Node类型下的属性和方法。而Node类型实际上就相当于JS中的Object构造函数。

既然如此,那就线看看Node类型下有哪些属性和方法

Node类型

  • 属性(在某个特定的节点通过继承的方式调用以下属性)

    • nodeType

    • nodeName

    • nodeValue

    • ·············

    • childNodes(指针,指向NodeList对象)

    • parentNodes

    • nextSibling

    • previousSibling

    • firstChild

    • lastChild

    • ownDocument(每个节点都只能属于一个Document节点)

  • 方法(在某个特定的节点通过继承的方式调用以下方法)

    • ··· 查找节点 ···

    • 查找元素的方法位于Document类型中

    • ························

    • ··· 插入节点 ···

    • appendChild(ele)

    • insertBefore(ele, target)

    • ························

    • ··· 删除节点 ···

    • removeChild(ele)

    • ························

    • ··· 替换节点 ···

    • replaceChild(ele, target)

    • ························

    • ··· 复制节点 ···

    • cloneNode(boolean) true: 表示深复制, false: 表示浅复制

    • ························

    • ··· 处理文档节点 ··· 很少用~

    • normalize()

Node类型上的属性和方法也就那么多了,再啰嗦一次,所有的其他节点都可以继承Node类型上的属性和方法

Document类型

JS通过Document类型表示文档。document对象是HTMLDocument的一个实例,表示整个HTML页面。同时,document对象也是window对象下的一个属性,因此可以将其作为全局对象来访问。

  • 属性

    • document.documentElement (表示HTML元素),同时可以通过document.childNodes[1]获取HTML元素

    • document.body (表示body元素)

    • document.head (表示head元素)

    • document.compatMode (表示浏览器采用哪种渲染方式,'CSS1Compat'表示标准模式, 'BackCompat'表示混杂模式)

    • document.charset (表示文档中实际使用的字符集,也可用来指定新字符集)

    • document.dataset (表示通过dataset访问自定义属性,如document.dataset.myname)

    • document.docType (表示 元素), 存在浏览器兼容性问题

    • document.title (表示 < title > 元素)

    • ··· 网页请求 ···

    • document.URL (获取URL地址)

    • document.domain (获取URL中的域名,pathname)

    • document.attributes (获取某个节点的属性,返回NamedNodeMap对象,与NodeList类似)

  • 方法

    • ··· 查找元素 ···

    • document.getElementById(id) 返回该元素

    • document.getElementsByTagName(classname) 返回包含零个或多个元素的HTMLCollection对象,与NodeList对象相似

    • document.getElementsByName(ele)返回带有给定name属性的元素,同样返回HTMLCollection对象

    • document.getElementsByClassName(className) 返回所有匹配的NodeList对象 (可在Document类型、Element类型上调用该方法)

    • document.querySelector(selector) selector表示CSS选择符 返回与该模式匹配的第一个元素,如果没有找到,返回null (Document类型, DocumentFragment类型, Element类型都可以调用此方法)

    • document.querySelectorAll(selector) selector表示CSS选择符 返回一个匹配成功的NodeList对象 (Document类型, DocumentFragment类型, Element类型都可以调用此方法)

    • ··· 创建元素 ···

    • document.createElement() (创建好的元素处于游离状态,需要通过appendChild插入)

    • ··· 创建文本节点 ···

    • document.createTextNode() (创建好的元素处于游离状态,需要通过appendChild插入)

    • ··· 确定元素大小 ···

    • document.getBoundingClientRect()

Element类型

  • 属性

    • id

    • title

    • lang

    • className

  • 方法

    • getAttribute(ele) 获取某个属性

    • setAttribute(name, value) 设置某个属性

    • removeAttribute(ele) 移除某个属性

    • getElementsByTagName(ele) 获取标签名为ele的元素

Text类型

  • 属性

    • nodeValue | data (访问Text节点中的文本)

DocumentFragment类型

用途:离线操作DOM元素,避免DOM节点大量的重排和重绘,造成性能问题

  • 方法

    • document.createDocumentFragment() (表示创建文档片段)

NodeList对象

理解 NodeList 及其“近亲”NamedNodeMap 和 HTMLCollection,是从整体上透彻理解 DOM 的关键所在。这三个集合都是“动态的”;换句话说,每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息。从本质上说,所有NodeList 对象都是在访问 DOM 文档时实时运行的查询。

元素大小

偏移量(offset dimension)

要想知道某个元素在页面上的偏移量,将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent的相同属性相加,如此循环直至根元素,就可以得到一个基本准确的值。以下两个函数就可以用于分别取得元素的左和上偏移量。

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

客户区大小(client dimension)

要确定浏览器视口大小,可以使用 document.documentElement 或 document.body(在IE7 之前的版本中)的clientWidth 和 clientHeight。

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

滚动大小(scroll dimension)

·················

确定元素大小

document.getBoundingClientRect()方法, 返回一个矩形对象。包含4个属性:left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。

以上是关于DOM知识的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn