DOM----文档对象模型

最新推荐文章于 2024-06-17 19:17:52 发布

qq_41675286

最新推荐文章于 2024-06-17 19:17:52 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/qq_41675286/article/details/80466353

版权

DOM是语言中立的API,用于访问和操作HTML和XML文档。DOM1级将HTML和XML文档形象地看作一个层级化地节点树，可以使用Javascript来操作这个节点树，进而改变底层文档地外观和结构。
DOM操作往往是Javascript程序中开销最大的部分，因访问NodeList导致的问题最多。NodeList对象是“动态的”，这就意味着每次访问NodeList对象，都会执行一次查询。有鉴于此，最好的办法就是尽量减少对DOM的操作。
DOM由各种节点构成：

一、Node节点：

Node是最基本的节点类型，除了IE外，在其它浏览器中都可以访问这个类型。它用于抽象地表示文档中一个独立地部分；所有其它类型都继承自Node.
1、nodeType属性：用于表明节点的类型。
2、nodeName属性和nodeValue属性完全取决于节点的类型。在使用这两个值以前最好用nodeType先检测一下节点的类型，对于元素节点，nodeName中始终保存的都是元素的标签名，而nodeValue的值始终为null.
3、childNodes属性：每一个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中.可以通过方括号，也可以使用item()方法来访问保存在NodeList中的节点。如：

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

NodeList对象有length属性，length属性表示的是访问NodeList的那一刻，其中包含的节点数量。

var count=someNode.childNodes.length;

4、parentNode、previousSibling和nextSibling属性：
每一个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parentNode属性都指向同一个节点。此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其它节点。列表中第一个节点的previousSibling属性值为null,而列表中最后一个节点的nextSibling属性的值同样也为null.
【注】5到8为几个操作节点的方法，也就是说，要使用这几个方法必须先取得父节点（使用parentNode属性）。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生。
5、appendChild():用于向childNodes列表的末尾添加一个节点。appendChild()返回的是新增的节点。
【注】如果在调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。
6、insertBefore():可以把节点放在childNodes列表中某个特定的位置上。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null,则insertBefore()与appendChild()执行相同的操作。
7、replaceChild():替换节点。该方法接受两个参数：一是要插入的节点，二是要替换的节点。要替换的节点将由这个方法返回并从文档树中被移出，同时由要插入的节点占据其位置。被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。
8、removeChild():移除节点。该方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值。通过removeChild()移除的节点仍然为文档所用，只不过在文档中已经没有了自己的位置。
【注】9、10是所有类型节点都有的两个方法
9、cloneNode()方法：用于创建调用这个方法的节点的一个完全相同的副本。该方法只接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。因此，这个节点副本就成为了一个“孤儿”，除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中。
10、normalize():这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或dom的操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。*

二、Document类型：

Document类型表示整个文档，是一组分层节点的根节点。在js中，document对象是Document的一个实例。使用document对象，有很多种方式可以查询和取得节点。
1、Document节点具有以下特征：
<1>nodeType的值为9；
<2>nodeName的值为”#document”;
<3>nodeValue的值为null;
<4>parentNode的值为null;
<5>ownerDocument的值为null;
<6>其子节点可能是一个DocumentType(最多一个）、Element(最多一个）、ProcessingInstruction或Comment.
2、有两个内置的访问其子节点的快捷方式:第一个documentElement属性，该属性始终指向HTML页面中的元素。另一个是通过childNodes列表访问文档元素，但是通过documentElement属性则能更快捷、更直接地访问该元素。以下面这个简单的页面为例：

<html>
    <body>    
    </body>
</html>

这个页面经过浏览器解析后，其文档中只包含一个子节点，即元素。可以通过documentElement或childNodes列表来访问这个元素：

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

3、Document对象还有一个body属性，直接指向元素：

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

4、Document对象还有一个doctype属性，直接指向元素：

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

【注】5-8为与文档信息有关的几个属性
5、title:通过这个属性可以取得当前页面的标题，也可以修改当前标题并反应在浏览器的标题栏中。

// 取得文档标题
var originalTitle=document.title;
//设置文档标题
document.title="New page title";

接下来的三个属性都与网页请求有关
6、URL:包含完整的URL(即地址栏中显示的URL)
7、domain:只包含页面的域名。
8、referrer:保存着链接到当前的那个页面的URL.
9、getElementById():用来取得元素。该方法接受一个参数：要取得的元素的id,如果找到相应的元素则返回该元素，如果不存在带有相应id的元素，则返回null.如果页面中多个元素的id值相同，getElementById()只返回文档中第一次出现的元素。
10、getElementsByTagName:用来取得元素。这个方法接受一个参数，即要取得元素的标签名，而返回的是包含多个元素的NodeList.在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个动态的集合，该对象与NodeList非常类似。例如，下列代码会取得页面中所有的元素，并返回一个HTMLCollection.

var images=document.getElementsByTagName("img");

上面这行代码会将一个HTMLCollection对象保存在images变量中。与NodeList对象类似，可以使用方括号语法或item()方法来访问HTMLCollection对象中的项，而这个对象中元素的数量可以通过其length属性取得，如下面例子所示

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

HTMLCollection对象还有一个方法，叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项。如：

<img src="myimage.gif" name="myImage">

那么通过如下方式从images中取得这个元素

var myImage=images.namedItem("myImage");

对命名的项还可以使用方括号语法来访问，如：

var myImage=images["myImage"];

11、getElementsByname():只有HTMLDocument类型才有的方法，这个方法会返回一个带有给定name特性的所有元素。最常使用getElementsByName()方法的情况是取得单选按钮；为了确保发送给浏览器的值正确无误，所有单选按钮必须具有相同的name特性。如下面的例子所示：

<ul>
   <li><input type="radio" value="red" name="color" id="colorRed">
          <label for="colorRed">Red</label></li>
  <li><input type="radio" value="green" name="color" id="colorGreen">
          <label for="colorRed">Green</label></li>

 <li><input type="radio" value="blue" name="color" id="colorBlue">
          <label for="colorRed">Blue</label></li>

   </ul>

如上边这个例子所示，其中所有单选按钮的name特性值都是”color”,但它们的id可以不同。id的作用在于将元素应用到每个单选按钮，而name特性则用以确保三个值中只有一个被发送给浏览器，这样，我们就可以使用如下代码获取所有单选

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

与getElementsByTagName()类似，getElementsByName()方法也会返回一个HTMLCollection,但是，对于这里的单选按钮来说，namedItem()方法则只会取得第一项（因为每一项的name特性都相同）。
除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象，为访问文档常用的部分提供了快捷方式。如下
12、document.anchors,包含文档中所有带name特性的标签。
13、document.links,包含文档中所带有href特性的标签。
关于文档写入的几个方法：
14、write()和writeIn（）方法都接受一个字符串参数，即要写入到输出流中的文本，write()会原样写入，而writeIn()则会在字符串的末尾添加一个换行符（\n).
15、open()和close()方法分贝别用于打开和关闭网页的输出流。如果是在页面加载期间使用write()或writeIn()方法，则不需要用到这两个方法。