JavaScript高级程序设计8--DOM

最新推荐文章于 2024-02-28 10:51:22 发布

木槿花开lalala

最新推荐文章于 2024-02-28 10:51:22 发布

阅读量302

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zl_best/article/details/53613704

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中处理DOM的方法，包括normalize()函数用于优化文本节点，以及Document对象和Element类型的详细特性。Document对象提供了如getElementById()、getElementsByTagName()等方法来获取页面元素，而Element类型则涉及HTML元素的访问和操作，如特性获取与设置、文本内容的修改等。

摘要由CSDN通过智能技术生成

DOM（文档对象模型）是用于访问和操作HTML和XML文档的API，DOM1级将HTML和XML文档形象的看作一个层次化的节点树，可以使用JavaScript来操作这个节点树，进而改变底层文档的外观和结构。
一、节点层次
以下面的HTML为例：

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

它对应的DOM层次结构为：

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

//为了确保浏览器兼容性，将nodeType属性与数字值进行比较
if (someNode.nodeType == 1) {	//适用于所有浏览器
	alert("Node is an element");
	value1 = someNode.nodeName;	//nodeName的值是元素的标签名
	value2 = someNode.nodeValue;	//值始终为null
}

节点关系
childNodes属性：其中保存着一个Nodelist对象，Nodelist是一种类型组对象，用于保存一组有序的节点，它是随DOM结构动态变化的。

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

parentNode属性：该属性指向文档树中的父节点，包含在childNodes列表中所有节点都具有相同的父节点，通过使用每个节点的previousSibling和nextSiling可以访问它的前一个或后一个兄弟。
hasChildNodes()：该方法在节点包含一或多个子节点的情况下返回true。
ownerDocument属性：该属性指向表示整个文档的文档节点。
具体节点间关系如下图：

操作节点
appendChild()：用于向childNodes列表的末尾添加一个节点，并返回新增的节点。
insertBefore()：接收两个参数（要插入的节点和作为参照的节点），返回被插入的节点。
replaceChild()：接收两个参数（要插入的节点和要替换的节点），并返回要替换的节点。
removeChild()：接收一个参数，即要移除的节点，并返回要移除的节点。
cloneNode()：用于创建这个方法的节点的一个完全相同的副本，接收一个布尔值参数，为true时执行深复制，复制节点及其整个子节点树，为false时执行浅复制，只复制节点本身。
注意：IE在此存在一个bug，即它会复制事件处理程序。

normalize()：处理文档树中的文本节点，如果找到了空文本节点，则删除它，如果找到相邻的文本节点，则将它们合并为一个文本节点。

2.Document类型
document对象是HTMLDocument的一个实例，表示整个HTML页面。
文档的子节点
Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment.

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

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

注意：浏览器对document.doctype的支持以及处理位于<html>外部的注释存在很大的差异。
文档信息

title属性：包含着<title>元素中的文本。
URL属性：包含页面完整的URL（即地址栏中显示的URL）。
domain属性：只包含页面的域名。
referrer属性：保存着链接到当前页面的那个页面的URL。

注意：只有domain是可以设置的，通过将每个页面的document.domain设置为相同的值，这些页面可以互相访问对方包含的JavaScript对象。
查找元素

getElementById()：接收一个参数，即要取得的元素的ID。
getElementByTagName()：接收一个参数，即要取得元素的标签名，返回包含零或多个元素的NodeList。
getElementByName()：返回带有给定name特性的所有元素。

DOM一致性检测
document.implementation属性：检测浏览器实现DOM的相应信息和功能的对象。
DOM1级为其提供了hasFeature()方法：接收两个参数（要检测的DOM功能及版本号）。
文档写入

write()、writeln()：接收一个字符串参数，写入到输出流中的文本。
open()、close()：分别用于打开和关闭网页的输出流。

3.Element类型
Element类型用于表现XML或HTML元素，提供了对元素、子节点及特性的访问。
HTML元素
HTMLElement类型直接继承自Element并添加了一些属性：

id：元素在文档中的唯一标识符。
title：有关元素的附加说明信息，一般通过工具提示条显示出来。
lang：元素内容的语言代码，很少使用。
dir：语言的方向，值为"ltr"或"rtl"，也很少使用。
className：与元素的class特性对应，即为元素指定的CSS类。

取得特性
操作特性的DOM方法主要有三个：

getAttribute()：接收一个参数，即特性名，如"id","class"等。
setAttributr()：接收两个参数（要设置的特性名和值）。
removeAttribute()：用于彻底删除元素的特性，接收一个参数即特姓名。

attributes属性
元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，这个对象拥有下列方法：

getNamedItem(name)：返回nodeName属性等于name的节点；
removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；
setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引；
item(pos)：返回位于数字pos位置处的节点；

创建元素
document.createElement()：只接受一个参数，即要创建元素的标签名。
元素的子节点
不同浏览器遍历子节点时有不同的差异，因此在执行某项操作以前，通常都要先检查一下nodeType属性，如下所示：

for (var i=0, len=element.childNodes.length; i<len; i++){
	if (element.childNodes[i].nodeType ==1){	//nodeType=1表示是元素节点
		//执行某些操作
	}
}

4.Text类型
操作text节点中的文本方法有：

append(text)：将text添加到节点的末尾；
deleteData(offset, count)：从offset指定的位置开始删除count个字符；
insertData(offset, text)：在offset指定的位置插入text；
replaceData(offset, count, text)：用text替换从offset指定的位置开始到offset+count为止处的文本；
splitText(offset)：从offset指定的位置将当前文本节点分成两个文本节点；
substringData(offset, count)：提取从offset指定的位置开始到offset+count为止处的字符串；

创建文本节点
document.createTextNode()：接收一个参数，即要插入节点中的文本。
规范化文本节点
normalize()：将相邻文本节点进行合并的方法。
分割文本节点
splitText()：将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值，原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本，这个方法返回一个新文本节点。
5.comment类型
document.createComment()：创建注释节点；
6.CDATASection类型
CDATASection类型：只针对XML的文档，表示的是CDATA区域。
7.DocumentType类型
8.DocumentFragment类型
9.Attr类型
二、DOM操作技术
1.动态脚本
创建动态脚本有两种方式：插入外部文件和直接插入JavaScript代码。

<script type="text/javascript" src="client.js"></script>


function loadScript(url){
	var script=document.createElement("script");
	script.type="text/javascript";
	script.src=url;
	document.body.appendChild(script);
}
loadScript("client.js");

2.动态样式
<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。

<link rel="stylesheet" type="text/css" href="styles.css">


function loadStyles(url){
	var link=document.createElement("link");
	link.rel="stylesheet";
	link.type="text/css";
	link.href=url;
	var head=document.getElementsByTagName("head")[0];
	head.appendChild(link);
}
loadStyles("styles.css");