【JavaScript】DOM进阶

港控/mmm° 2022-07-14 07:20 182阅读 0赞

**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看做一棵树：

![Center][]

**操作节点：**

树结构中的元素有时被称为节点或节点对像。与使用方法操作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著。

![Center 1][]

**感谢您的阅读！**

[Center]: /images/20220714/0c9854a4337446c2949769a2e70edf46.png
[Center 1]: /images/20220714/9572f82a6a224619b4d86b3082c271cc.png