您的位置：首页 > Web前端 > JavaScript

JavaScript:DOM

2016-07-20 23:11 417 查看
DOM(文档对象模型)：是针对HTML和XML文档的一个API。

DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点都拥有各自的特点、数据和方法。节点之间的关系构成了层次，所有的页面都可以分解成由层次和节点构成的树状结构。

举一个例子：

<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World！</p>
</body>
</html>

将上面的文档解析为一个层次结构，如下图：



文档节点是每个文档的根节点。在上面的例子中，文档节点只有一个子节点，即
<html>
，我们称之为文档元素。文档元素是最外层元素，其他所有元素都包含在文档元素中。

Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。Node接口在JavaScript中是作为Node类型实现的。

每个节点都有一个nodeType属性，用于标明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示：

Node.ELEMENT_NODE(1)

Node.ATTRIBUTE_NODE(2)

Node.TEXT_NODE(3)

Node.CDATA_SECTION_NODE(3)

Node.ENTITY_SECTION_NODE(4)

Node.ENTITY_REFERENCE_NODE(5)

Node.ENTITY_NODE(6)

Node.PROCESSING_INSTRUCTION_NODE(7)

Node.COMMENT_NODE(8)

Node.DOCUMENT_NODE(9)

Node.DOCUMENT_TYPE_NODE(10)

Node.DOCUMENT_FRAGMENT_NODE(11)

Node.NOTATION_NODE(12)

利用上面的常量，可以确定一个节点的类型：

// IE不支持
if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("Node is an element");
}

// 适用于所有浏览器
if (someNode.nodeType == 1) {
alert("Node is an element");
}

nodeName和nodeValue属性

要了解节点的具体信息，可以使用nodeName和nameValue。这两个属性的值取决于节点的类型。在使用这两个值以前，最好先检测一下节点的属性：

if (someNode.nodeType == 1) {
value = someNode.nodeName;  // nodeName的值是元素的标签名
}

对于元素节点，nodeName中保存的元素的标签名，而nodeValue则始终为null。

节点关系

节点中的各种关系可以通过家谱来描述。每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一个类数组对象，用于保存一个有序的节点，可以通过位置来访问这些节点。NodeList对象实际是基于DOM结构动态执行查询的结果。


虽然可以通过方括号来访问NodeList的值，而且这个对象也有length属性，但它不是Array的实例。


访问NodeList节点：

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

可以将NodeList对象转换为数组：

var arrayOfNodes = Array.prototype.call(someNode.childNodes, 0);

每一个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，通过previousSibling和nextSibling属性，可以访问同一列表中的其他节点。

if (someNode.nextSibling === null) {
alert("最后一个节点");
} else if (someNode.previousElementSibling === null) {
alert("第一个节点")
}

通过firstChild和lastChild属性可以访问列表中的第一个和最后一个属性。

操作节点

添加节点

// 在NodeList列表的最后添加一个节点
var returnNode = someNode.appendChild(newNode);

// 如果传入的节点已存在，节点会移动到新位置,成为最后一个节点
var returnNode = someNode.appendChild(someNode.firstChild);

// 插入成为最后一个节点
var returnNode = someNode.insertBefore(newNode, null);
// 插入成为第一个节点
var returnNode = someNode.insertBefore(newNode, someNode.firstChild);
// 插入到最后一个节点前面
var returnNode = someNode.insertBefore(newNode, someNode.lastChild);

替换节点

// 替换第一个节点
var returnNode = someNode.replaceChild(newNode, someNode.firstChild);
// 替换第最后一个节点
var returnNode = someNode.replaceChild(newNode, someNode.lastChild);

移除节点

// 移除第一个节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
// 移除最后一个节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

cloneNode方法

所有节点都要cloneNode()方法，cloneNode()方法用于创建调用这个方法的节点的一个完全相同的副本。它接收一个布尔值参数

true：深复制，复制节点机器整个子节点树

false：浅复制，只复制节点本身。复制后的节点属于文档，并没有指定父节点

示例：

var deepList = myList.cloneNode(true);

var shallowList = myList.cloneNode(false);

Document类型

在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此作为全局作用对象来访问。

Document节点具有下列特征：

nodeType的值为9

nodeName的值为“#document”

nodeValue的值为null

parentNode的值为null

ownerDocument的值为null

其子节点可能是DocumentType、Element、ProcessingInstruction或Comment

通过Document对象，不仅可以取得与页面相关的信息，而且还能操作页面的外观及其底层结构。

文档的子节点

Document内置了两个子节点：
documentElement
和
DocumentType
。

documentElement属性始终指向html页面中的
<html>
元素。

var html = document.documentElement;    // 获取对<html>的引用
alert(html === document.childNodes[0]); // true
alert(html === document.firstChild);    // true

document对象还有一个body属性，直接指向
<body>
元素。

var body = document.body;    // 取得对<body>元素的引用

Document另一可能的子节点是DocumentType。通常将标签看成一个与文档其他部分不同的实体，可以通过doctype属性访问。

var doctype = document.doctype; // 获取对<!DOCTYPE>的引用

文档信息

// 获取文档标题
var docTitle = document.title;
// 设置文档标题
document.title = "hello";

// 获取完整url
var url = document.URL;

// 获取域名
var domain = document.domain;

// 获取来源页面的url
var referrer = document.referrer;

修改title属性的值不会改变
<title>
元素。URL与domain是相互关联的。如果document等于http://www.cnblogs.com/xiaoxiaoyihan,那么document.domain就等于www.cnblogs.com。

查找元素

document中存在两种取得元素的方法：getElementById()和getElementsByTagName()。

getElementById()接收一个参数：要取得的元素的ID。如果找到相应的元素则返回该元素，否则返回null。getElementsByTagName()接收一个参数：要取得的元素的标签名，返回包含零活多个元素的NodeList。

var div = document.getElementById("myDiv");
var images = document.getElementsByTagName("img");
// 获取所有元素
var allElements = document.getElementsByTagName("*");

后面一行代码会将HTMLCollection对象保存在images变量中。与NodeList类似，可以通过item()或方括号访问对象中的项。

alert(images.length);    // 输出图像的数量
alert(images[0].src);    // 输出第一个图像元素的src特性
alert(images.item(0).src);// 输出第一个图像元素的src特性

HTMLCollection对象还有一个方法namedItem()，通过元素的name属性获取集合中的项。

<img src="myImage.jpg" name="myImage"/>

// 从images中获取<img>元素
var myImage = images.namedItem("myImage");

HTMLDocument类型才有的方法：getElementsByName(),返回所有带有指定name特性的所有元素。

var colorNames = document.getElementsByName("color");

Element类型

Element节点特征：

nodeType的值为1

nodeName的值为元素的标签名

nodeValue的值为null

子节点可能值：Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference

访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性。

<div id="myDiv"></div>

var div = document.getElementById("myDiv");
alert(div.tagName);
alert(div.tagName == div.nodeName); // true

HTML元素

所有HTML元素都是由HTMLElement类型或者其子类型表示。它包含了一些属性：

id:元素在文档中的唯一标识符

title：元素附加说明，鼠标移到元素上显示

lang:元素内容的语言代码

dir：语言的方向

className:元素指定的CSS类

var div = document.getElementById("myDiv");

alert(div.id); // myDiv

alert(div.className); // myClass

alert(div.title); // a div

alert(div.lang); // en

alert(div.dir); // ltr

获取特性

操作特性的方法主要有三个：
getAttribute()
、
setAttribute()
和
removeAttribute()
。

var div = document.getElementById("myDiv");
alert(div.getAttribute("id"));    // myDiv
alert(div.getAttribute("class")); // myClass
alert(div.getAttribute("title")); // a div
alert(div.getAttribute("lang"));  // en
alert(div.getAttribute("dir"));   // ltr

此外，还可以自定义特性：

<div id="myDiv" own_attribute="hello"></div>
var ownAttr = div.getAttribute("own_attribute");

设置特性

通过setAttribute()设置特性，它接收两个参数：要设置的特性名和值。

div.setAttribute("id", "otherId");
div.setAttribute("class", "otherClass");
div.setAttribute("title", "some other div");
div.setAttribute("dir", "rtl");

此外，还可以直接赋值：

div.id = "otherId";

attributes属性

Element类型是唯一使用attributes属性的节点。attributes属性包含一个NameNodeMap，它包含以下方法：

getNamedItem(name):返回nodeName属性等于name的节点；

removeNamedItem(name):从列表中移除nodeName属性等于name的节点

setNamedItem(node):向列表中添加节点，以节点的nodeName属性为索引

item(pos):返回位于数字pos位置处的节点

attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而nodeValue是特性的值。

// 获取元素的id特性
var id = element.attributes.getNamedItem("id");
// 使用方括号
var id = element.attributes["id"].nodeValue;

// 设置新值
element.attributes["id"].nodeValue = "newId";

// 删除特性
var oldAttr = element.attributes.removeNamedItem("id");

// 添加新特性
element.attributes.setNamedItem(newAttr);

创建元素

使用createElement()方法可以创建新元素。接收一个参数：要创建元素的标签名。

// 创建一个div元素
var div = document.createElement("div");

// 添加属性
div.id = "newDivId";
div.className = "box";

// 将创建的div元素添加到文档的<body>元素中
document.body.appendChild(div);

Text类型

文本节点包含的是可以照字面解释的纯文本内容。

创建文本节点

// 创建文本节点
var textNode = document.createTextNode("Hello JavaScript");

// 创建一个div元素
var element = document.createElement("div");
// 将文本节点绑定到div元素上
element.appendChild(textNode);

规范化文本节点

为了规范化文本节点，明确哪个文本节点表示哪个字符串，引入了
normalize
方法

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);

var anotherTextNode = document.createTextNode("Wow");
element.appendChild(anotherTextNode);

document.body.appendChild(element);

alert(element.childNodes.length);   //2

element.normalize();

alert(element.childNodes.length);   //1
alert(element.firstChild.nodeValue);//"Hello world!wow"

分割文本节点

Text提供了splitText()方法用于将一个文本节点分割成两个节点，即按照指定的位置分割。

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);

document.body.appendChild(element);

var newNode = element.firstChild.splitText(5);

alert(element.firstChild.nodeValue);    // "Hello"
alert(newNode.nodeValue);               // " world!"
alert(element.childNodes.length);       // 2
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航