虽然现在有着很多优秀的框架,但归根结底我们依然得掌握好DOM知识来针对项目某些情况来使用原生操作,从而达到降低代码的堆积,提高性能,提高页面流畅的目的.
节点层次
Node类型
DOM1级定义了一个Node接口,由DOM中所有节点类型实现,除了IE外,其他浏览器都可以访问到这个类型,Javascript中所有的节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法.
每个节点都有一个nodeType属性,用于表明节点的类型,以下只列出常见的节点类型
节点类型
- Node.ELEMENT_NODE(1)
- Node.ATTRIBUTE_NODE(2)
- Node.TEXT_NODE(3)
- Node.CDATA_SECTION_NODE(4)
- Node.COMMENT_NODE(8)
将节点的nodeType属性与上面字符串或者对应数字(建议)比较便可确知对应的节点类型
nodeName和nodeValue属性
要了解节点的具体信息,可以使用这两个属性,不过这两个属性的值取决于节点的类型,所以使用之前最好做一下节点类型的检测
- 元素节点:nodeName返回标签名,nodeValue返回null
- 属性节点:nodeName返回属性名,nodeValue返回属性值
- 文本节点:nodeName始终返回#text,node返回文本内容
节点关系
- childNodes
每个节点都有一个childNodes属性,保存着一个NodeList对象,是一种类数组对象,保存着一组子节点,并且length属性,特点是可以基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在NodeList对象中
注意:节点的childNodes包含了节点内的所有节点类型(不包括属性节点),而且标签内的换行和空格都会被当成一个文本包含在childNodes属性中
- parentNode
每个节点都有一个parentNode属性,该属性指向文档树种的父节点,因此,包含在childNodes列表中的所有节点都有相同的父节点,他们的parentNode属性都指向同一个节点
- previousSibling 和nextSibling属性
childNodes列表中的每个父节点相互之间都是同胞节点,可以通过每个节点的previousSibling和nextSibling属性访问同一列表的其他节点
- firstChild 和lastChild属性
在父节点下使用这两个属性可以分别获取childNodes列表下的第一个和最后一个节点.为部分需求操作提供的极大的便利
- hasChildNodes()
这个方法非常简单实用,在节点包含一或多个子节点的情况下返回true,而无需查询childNodes的length大小来判断
- ownerDocument
所有节点都有的最后一个属性是ownerDocument,该属性指向整个文档的文档节点,不用层层回溯到顶端
操作节点
- appendChild(新增的节点)
接收一个新增节点作为参数 ,用于向childNodes列表的末尾添加一个节点,并返回新增的节点
- insertBefore(要插入的节点,作为参照的节点)
插入节点后,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回,如果参照节点是null,那么insertBefore()和appendChild()是等同的
- replaceChild(要插入的节点,要替换的节点)
要替换的节点将由这个方法返回并从文档树种移除,同时由要插入的节点占据其位置
- removeChild(要删除的子节点)
这个方法接收一个参数,即要移除的节点,并且被方法返回
前面介绍的四个操作方法操作的都是某个节点的子节点,要使用必须先取得父节点,
在父节点上调用这些方法,否则会导致错误.
其他方法(所有类型节点都有)
- cloneNode(布尔值)
用于创建调用这个方法的节点的一个完全相同的副本,插入布尔值为true则表示深度复制,复制节点和其整个节点树,否则为浅复制 ,只复制节点本身,复制后返回的节点文本属于文档所有,但成为一个"孤儿",需要添加到文档树中
注意:cloneNode()方法不会复制添加到DOM节点中的Javascript属性或者事件处理程序等
- normalize()
处理文档树中的文本节点,如果在节点的后代节点中找到空文本节点,则删除它,如果找到相邻的文本节点,则将它们合并为一个文本节点
Document类型
Javascript是通过Document类型表示文档,在浏览器中document对象是HTMLDocument的一个实例
表示整个页面,而且document对象也是window对象的一个属性,因此可以作为全局对象来访问
Document节点具有以下特征
- nodeType的值为9
- nodeName: "#document"
- nodeValue: null
- parentNode: null
- ownerDocument: null
- 其子节点可能是一个DocumentType,Element,ProcessingInstruction或Comment
从document节点中取得页面标签
- document.documentElement指向HTML页面中的<html>元素
- document.body指向<body>元素
- document.doctype可以取得对<!DOCTYPE>的引用
- document.title 包含<title>元素中的文本
从document节点中取得页面的请求信息
- document.URL为地址栏中显示的URL
- document.domain为页面的域名
- document.referrer为连接到当前页面的那个页面的URL
从document节点中查找元素
- document.getElementById("mydiv")
- document.getElementsByTagName("img"),返回一个HTMLCollection对象,和NodeList对象类似,并且拥有一个方法namedItem()可以传入元素的name特征来取得集合中的项,可以通过document.getElementsByTagName("*")获取全部元素
- document.getElementsByName():这个方法会返回有给定name特征的所有元素,通常用来获取单选按钮.
- document.anchors:包含文档中所有带name特性的a元素
- document.forms:包含文档中所有的form元素
- document.images:包含文档中所有的img元素
- document.links:包含文档中所有带有href特性的a元素
DOM一致性检测
由于DOM分为多个级别,因此检测浏览器实现了DOM的哪些部分就十分有必要,doucment.implemention属性就是为此提供相应的信息和功能的对象,与浏览器对DOM的实现直接对应
DOM1级只为document.implementation规定一个方法hasFeature()
接收两个参数:①要检测的DOM功能的名称②版本号
方法返回是否支持的布尔值
如
var hasXmlDom = document.implmentation.hasFeatrue("XML","1.0")
文档写入
- document.write(写入字符串):将输出流写入到网页
- document.writeln(写入字符串):将输出流写入到网页并换行
注意:必要时候要加转义字符\ - document.open()和document.close()分别用于打开和关闭网页的输出流,如果是在页面加载期间使用write()或writeln()方法,则不需要用到这两个方法,调用write或writeln方法时和结束时,浏览器会隐式调用这两个方法
Element类型
判断元素标签的最佳实践:
if(element.tagName.toLowerCase() == "div"){ //在此执行某些操作 }
HTML元素
每个HTML元素都有下列标准特性:
- id
- title
- lang :语言代码
- dir :语言方向
- className :class特性
以上均可以通过作为该元素节点的属性在javascript中获取或修改
获取和修改特性
- getAttribute(特性名称)
不仅可以取得节点的默认特性也可以取得自定义特性(根据HTML5规范,自定义属性应该加上data-前缀以便验证),返回对应特性值
注意:传入style特性后返回的是包含的CSS文本,而通过属性来访问style则返回一个对象,因为一系列的问题原因,平时开发只使用对象的属性来获取特性,而只有在取得自定义特性值的情况下,才会使用getAttribute()方法
- setAttribute(特性名称,特性值)
如果特性存在,则用特性值进行修改,若不存在,则新建特性并赋予特性值,该方法不仅可以操作HTML特性也可以操作自定义特性,而使用对象属性设置的自定义特性则不会自动成为元素的特性
- removeAttribute(要删除的特性名称)
这个方法用于彻底删除元素的特性,不仅清除特性的值也会从元素中完全删除特性
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型,elment.attributes实质是该元素节点的所有属性节点的结合,称为NamedNodeMap,并且拥有它自己的特殊方法:
- getNamedItem(name) 返回nodeName属性等于name的节点,即返回属性名对应的属性节点
- removeNamedItem(name):删除该属性节点
- setNamedItem(node) :向列表中添加属性节点,以nodeName为索引
- item(po): 返回位于数字Pos位置处的节点
创建元素
- document.createElement(元素标签名)
该方法可以传入完整的元素标签如
var div = document.createElement("div id=\"myNewDiv\" class = \"box\"></div>");
注意:这种形式创建的动态元素有很多已知的问题,若要创建一些跟别的元素或者存在相关事件处理的元素,不推荐用这种方法,如iframe标签 input标签 有name相同的单选按钮等
元素的子节点
从上面就可以发现,用元素节点的childNodes遍历其子元素节点会出现一些换行和空格等形成了文本节点的问题,这意味着在执行某项操作之前,都要检查一下nodeType属性,如:
for(var i = 0,len=element.childNodes.length;i<len;i++){ if(element.childNodes[i].nodeType == 1){ //执行某些操作 } }
Text类型
- nodeValue和data属性:均可以用来访问Text节点包含的文本
- appendData(text)
- deleteData(offset,count)
- insertData(offset,text)
- replaceData(offset,count,text)
- splitText(offset)
- substringData(offset,count)
- length属性返回文本字符的数目
创建文本节点
document.createTextNode(要插入节点中的文本)
作为参数的文本将按照HTML或XML的格式进行编码
规范化文本节点
即上面提及的normalize()方法
分割文本节点
与normalize()方法相反的splitText(pos)方法,将一个文本节点分成两个文本节点
DocumentFragment类型
在所有的节点类型中,只有DocumentFragment在文档中没有对应的标记,DOM规范规定文档片段是一种"轻量级"的文档,可以包含和控制节点.虽然不能把文档片段直接添加到文档中,但可以将它作为一个"仓库"来使用,即可以在里面保存将来可能添加到文档中的节点
创建文档片段
使用document.createDocumentFragment(),返回一个文档片段对象,继承了Node的所有方法,可以往里面堆积节点,然后一次性添加到文档树中,减低浏览器的渲染次数
Attr类型
不常单独使用,不过多描述
Comment类型 ,CDATASection类型 ,DocumentType类型
不常单独使用,不过多描述
