【JavaScript】DOM进阶

来源：互联网发布：windows7摄像头软件编辑：程序博客网时间：2024/06/05 15:48

DOM进阶

一、DOM是什么？

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

它提供了一种访问和修改HTML文档内容的方法。DOM是万维网联盟（W3C）定义的一种标准。大部分的互联网浏览器以各种形式实现了DOM并且获得了不同程度的成功。和很多其他标准，特别是那些与web编程相关的标准一样，DOM已经发展了多年。它有三个规范，即所谓的DOM级别，第四个规范正在制定中。

DOM级别：

DOM0级（遗留DOM）：

主要集中在对表单元素的访问，不过也加入了对链接和图像的访问。

DOM层级1到3：

1998年，W3C将DOM层级1作为规范发布。和0级一样，层级1也受所有主流浏览器以各种形式支持。DOM层级2在2000年正式发布。各种浏览器对DOM层级2的支持有很大不同。最后，DOM层级3在2004年编制，在主流浏览器中有不同程度的支持。不过，对所有DOM层级的支持都碎浏览器及版本的不同而不同。

把DOM看做一棵树：

操作节点：

树结构中的元素有时被称为节点或节点对像。与使用方法操作DOM元素的方式一样，也可以使用方法操作那些反映父子和兄弟关系的节点。例如可以利用appendChild()方法在一个已有的父节点上添加节点。

二、DOM基础

获取元素：

1.通过ID获取

getElementId()获取HTML文档的一个特定元素并且返回一个对它的引用。为了获取元素，它必须有一个id属性。

<!DOCTYPEhtml><html>   <head>      <metacharset="UTF-8">      <title>HelloWorld</title>   </head>   <body>      <p>Here'ssome text.</p>      <p>Here'smore text.</p>      <p>Linkto the <a id="w3link"href="http://www.w3.org">W3</a></p>   </body></html>

<a>元素有了一个id属性，可以使用getElementById()方法获取它，如下：

var a1 = document.getElementById("w3link");

2.通过标签名获取

当只获取一个或几个元素时，getElementId()方法工作的很好，但是当需要同时获取超过一个元素时，可能getElementByTagName()方法更合适。

getElementByTagName()以数组或者列表的格式返回指定标签类型的所有元素。

var a1 = document.getElementById("w3link");

3.HTML集合

Document.anchors一个包含所有<A>元素的组（有name属性的元素）

Document.forms 包含文档中所有<FORM>元素的组

Document.images 包含所有<IMG>元素的组

Document.links包含所有具有href属性的<A>及<AREA>元素的组

4.处理兄弟节点

childNodes属性包含一组由给定元素的孩子组成的节点。类似数组，但不是数组类型。

下面获取第一个孩子并将其放入childOne变量：

var childOne =document.getElementById("mydiv").childNodes[0];

parentNode属性可获取父节点，nextSibling和previousSibling遍历一组子结点。如果没有兄弟，则该属性返回null。

firstChild和lastChild属性分别包含给定元素的第一个孩子和最后一个，没有孩子时，这些属性都是null。

操作属性：

元素的属性可以通过JavaScript获取和设置。

1.获取：getAttribute()

var a1= document.getElementById("w3link");alert(a1.getAttribute("href"));

2.设置：setAttribute()

a1ertAttribute("href","http://www.microsoft.com");

创建元素：

我们没有受到与页面上已有元素交互的限制，可以使用DOM为文档添加元素。

1.添加文本：使用t.createElement、createTextNode、.appendChild创建一个元素。

为文档创建或添加一个元素：

var newelement = document.createElement("p");

变量newelement有了一个对新元素的引用。为了使元素可见，需要将元素添加到文档上，使用appendChild()方法将一个元素添加到文档：

document.body.appendChild(newelement);

但是，如果<p>元素没有任何文本呢？appendChild()元素也可以帮忙，它可以和createTextNode()方法联合起来使用。

newelement.appendChild(document.createTextNode("HelloWorld"));

2.添加元素并设置ID：

使用jQuery创建一个元素，设置ID将是一个在元素上使用attr()函数的简单事情。

删除元素：

removeChild()方法可以从文档中删除任何元素：

<!DOCTYPEhtml><html>   <head>      <metacharset="UTF-8">      <title>Del</title>   </head>   <body>      <scripttype="text/javascript"> for (var i=0; i<3; i++) {         varelement = document.createElement("p");         element.setAttribute("id","element"+ i);         document.body.appendChild(element);         element.appendChild(document.createTextNode("HelloWorld,I'm Element " + i+"."));                              }      varremoveel = document.getElementById("element1");      document.body.removeChild(removeel);      </script>   </body></html>

下面是用jQuery编写的，使用remove()函数删除元素，代码简单了很多：

<!DOCTYPEhtml><html>   <head>      <metacharset="UTF-8">      <title>Del</title>      <scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>   </head>   <body>      <scripttype="text/javascript">      for(var i = 0; i < 3;i++){      $("body").append("<pid=/"element" + i + ">Hello World,I'm Element " + i +".</p>");      }      $("#element1").remove();      });      </script>   </body></html>

总结：

推荐书籍：《JavaScript从入门到精通》Steve Suehring著。

感谢您的阅读！

0 0