Javascript高级程序设计（一）DOM和BOM之DOM篇

一个完整的JavaScript实现应该由下列三个不同的部分组成：

（1）核心（ECMAScript）
（2）文档对象模型（DOM）
（3）浏览器对象模型（BOM）

（一）DOM（Document Object Model）

1.DOM概念

（1）文本对象模型，是针对XML，HTML的应用程序编程接口。
（2）DOM把整个页面映射成一个多层节点结构。也就是树状结构。
（3）借助DOM提供的接口，可以轻松的删除，添加，替换和修改任何节点。
（4）在 DOM中 , 每一个元素都是节点。

整个文档是一个文档节点。
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。

常见节点类型：
常见节点类型
nodeName和nodeValue属性

要了解节点的具体信息,可以使用这两个属性,不过这两个属性的值取决于节点的类型


nodeName和nodeValue属性
关系节点
  • 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,该属性指向整个文档的文档节点,不用层层回溯到顶端
举例：

<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来获得 <p> 元素的 ownerDocument 的节点类型。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=x.ownerDocument.nodeType;//9
}
</script>

</body>
</html>
注意：firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，（除IE）

所以为了准确地找到相应的元素（其他浏览器）
firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling

浏览器兼容：var test = div1.nextElementSibling || div1.nextSibling;
操作节点

  • appendChild(新增的节点)
    接收一个新增节点作为参数 ,用于向childNodes列表的末尾添加一个节点,并返回新增的节点

  • insertBefore(要插入的节点,作为参照的节点)
    插入节点后,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回,如果参照节点是null,那么insertBefore()和appendChild()是等同的

  • replaceChild(要插入的节点,要替换的节点)
    要替换的节点将由这个方法返回并从文档树种移除,同时由要插入的节点占据其位置

  • removeChild(要删除的子节点)
    这个方法接收一个参数,即要移除的节点,并且被方法返回

    前面介绍的四个操作方法操作的都是某个节点的子节点,要使用必须先取得父节点

其他方法(所有类型节点都有)

  • cloneNode(布尔值)
    用于创建调用这个方法的节点的一个完全相同的副本,插入布尔值为true则表示深度复制,复制节点和其整个节点树,否则为浅复制 ,只复制节点本身,复制后返回的节点文本属于文档所有,但成为一个"孤儿",需要添加到文档树中
    注意:cloneNode()方法不会复制添加到DOM节点中的Javascript属性或者事件处理程序等

  • normalize()
    处理文档树中的文本节点,如果在节点的后代节点中找到空文本节点,则删除它,如果找到相邻的文本节点,则将它们合并为一个文本节点

<!DOCTYPE html>
<html>
<body>

<p id="demo">点击按钮添加文本，点击另一个按钮来正规化元素。</p>

<button onclick="addTextNode()">添加文本节点</button>

<button onclick="normPara()">对段落进行正规化</button>

<script>
function addTextNode()
{
var y=document.createTextNode("请再次点击。");
var x=document.getElementById("demo");
x.appendChild(y);
var z=document.getElementById("cc");
z.innerHTML=x.childNodes.length;
}

function normPara()
{
var x=document.getElementById("demo");  
x.normalize();
var z=document.getElementById("cc");
z.innerHTML=x.childNodes.length;
}
</script>

<p>上面的段落有 <span id="cc">1</span> 个子节点。</p>

</body>
</html>
举例

HTML的DOM树节点包括:

  1. 元素节点：上图中<html>、<body>、<p>都是元素节点即标签

  2. 文本节点：向用户展示的内容，如<li>...</li>中的javascript、Dom、CSS等文本。

  3. 属性节点：元素属性，如<a>标签的链接属性

Document对象：

当浏览器载入 HTML 文档, 它就会成为 document 对象。

Document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

总结：
(1)Document 对象是 Window 对象的属性，可通过 window.document 属性对其进行访问。
(2)Javascript是通过Document类型表示文档,在浏览器中document对象是HTMLDocument的一个实例，表示整个页面,而且document对象也是window对象的一个属性,因此可以作为全局对象来访问

从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.getElementsByClassName("class"):获取类名相同的元素，Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法
  • document.getElementsByName():这个方法会返回有给定name特征的所有元素,通常用来获取单选按钮.
  • document.anchors:包含文档中所有带name特性的a元素
  • document.forms:包含文档中所有的form元素
  • document.images:包含文档中所有的img元素
  • document.links:包含文档中所有带有href特性的a元素
文档写入
  • document.write(写入字符串):将输出流写入到网页
  • document.writeln(写入字符串):将输出流写入到网页并换行
    注意:必要时候要加转义字符\
  • document.open()和document.close()分别用于打开和关闭网页的输出流,如果是在页面加载期间使用write()或writeln()方法,则不需要用到这两个方法,调用write或writeln方法时和结束时,浏览器会隐式调用这两个方法

Element类型

判断元素标签的最佳实践:
if(element.tagName.toLowerCase() == "div"){ //在此执行某些操作 }

HTML元素

每个HTML元素都有下列标准特性:

获取和修改特性

  • getAttribute(特性名称attributename)
    参数：需要获得的属性值的属性名称；
    不仅可以取得节点的默认特性也可以取得自定义特性(根据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)使用指定文本来替换此节点以及所有相邻的文本节点,W3C标准，浏览器不支持
  • splitText(offset)
  • (offset,count)从节点提取数据
    length属性返回文本字符的数目
创建文本节点

document.createTextNode(要插入节点中的文本)
作为参数的文本将按照HTML或XML的格式进行编码

规范化文本节点

normalize()方法

分割文本节点

与normalize()方法相反的splitText(pos)方法,将一个文本节点分成两个文本节点

DocumentFragment类型

在所有的节点类型中,只有DocumentFragment在文档中没有对应的标记,DOM规范规定文档片段是一种"轻量级"的文档,可以包含和控制节点.虽然不能把文档片段直接添加到文档中,但可以将它作为一个"仓库"来使用,即可以在里面保存将来可能添加到文档中的节点

创建文档片段

使用document.createDocumentFragment(),返回一个文档片段对象,继承了Node的所有方法,可以往里面堆积节点,然后一次性添加到文档树中,减低浏览器的渲染次数

Attr类型
不常单独使用,不过多描述

Comment类型 ,CDATASection类型 ,DocumentType类型
不常单独使用,不过多描述

2.DOM级别

2.1 DOM1级

DOM1级由两个模块组成，DOM核心（DOM Core）和DOM HTML。
DOM核心规定的是如何映射基于XML的文档结构，以便简化堆文档中任意部分的访问和操作。
DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

2.2 DOM2级

DOM2级在原来的DOM基础上又扩充了鼠标和用户界面事件，范围，遍历（迭代DOM文档的方法）等模块，而且通过对象接口增加了对CSS的支持

DOM视图（DOM Views）:定义了跟踪不同文档视图的接口。
DOM事件：描述事件接口；
DOM样式：描述处理基于CSS样式的接口；
DOM遍历与范围：描述遍历和操作文档树的接口；
2.3DOM3级
进一步扩展了DOM，引入了以统一方式加载和保存文档的方法-在DOM加载和保存（DOMLoad and Save）模板中定义
新增了验证文档的方法-在DOM验证（DOM Validation）模板中定义。
DOM3级也对DOM核心进行了扩展，开始支持XML1.0规范，涉及XML Infoset,XPath和XML Base。
注意：DOM0级标准是不存在的，所谓的DOM0级只是DOM历史坐标中的一个参照点。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容