DOM模型

最新推荐文章于 2022-07-06 23:52:07 发布

aguangs

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量95

点赞数

分类专栏： XML 文章标签： BBS HTML XML Blog

本文链接：https://blog.csdn.net/aguang110/article/details/83763129

版权

XML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

转自:

http://www.scriptwebs.com/blog/post/287.html

DOM模型(Document Object Module,即文档对象模型)

结点的类型

在XML（HTML）文档中，不仅每个闭合的标记是一个结点，而且闭合标记中的文本、标记内的属性也都是结点，分别称为元素结点、文本结点和属性结点

<span >何永</span>,整个内容构成了标记为span的元素结点，id="a"组成了一个属性结点，而"何永"这段文本构成了一个文本结点。这里的属性和文本结点都可以看作是元素结点的子节点。

处理DOM中的结点

在DOM模型中引用一个结点的方式

1、document.getElementById(); //引用指定ID的结点

2、document.getEleMentsByTagName() //引用指定标记名称的结点

间接引用结点

1、引用子结点：每个结点都有一个childNodes集合属性，类型是数组对象，表示该结点的所有子结点的集合

document.childNodes[0]; //引用HTML文档的根结点

document.childNodes[0].childNodes[0] //引用<head>结点

document.childNodes[0].childNodes[1] //引用<body>结点

2、引用父结点

element.parentNode

3、引用兄弟结点

element.nextSibling; //引用上一个兄弟结点

element.previousSibling //引用下一个兄弟结点

获取结点信息

1、使用ndeName属性获取结点的名称

Node.nodeName;

元素结点：返回标记的名称，如<span></span>;返回"span"

属性结点：返回属性名称，如id="a",返回"id"

文本结点：返回文本的内容

2、使用nodeType属性获取结点类型

Node.nodeType;

元素结点：返回1

属性结点：返回2

文本结点：返回3

3、使用nodeValue属性获取结点的值

Node.nodeValue;

文本结点：返回文本内容（仅适用于文本结点）

4、使用hasChildNodes()方法判断给定结点是否有子结点

Node.hasChildNodes();

有子结点：返回True

没子结点:返回false

处理属性结点：属性结点作为一个特殊的结点，是依赖元素结点而存在

1、获取和设置属性结点的值

事实上每个属性结点都是元素结点的一个属性

元素结点.属性名称

如<img src="bg.gif" alt="" />

2、使用setAttribute()方法添加一个属性

elementNode.setAttribute(attributeName,attributeValue);

elementNode:要添加属性的结点

attributeName:要添加的属性名称

attributeValue:要添加的属性值

3、使用getAttribute()方法获取一个属性值

elementNode.getAttribute(attributeName)

改变文档的层次结构

使用document.createElement方法创建元素结点

document.createElement(elementName);

创建一个<div>结点

var divElement = document.createElement("div");

使用document.createTextNode方法创建文本结点（同上）

使用appendChild方法添加结点

创建结点后，可以用appendChild方法将其添加到文档层次结构中

parentElement.appendChild(childEleMent);

例：<dl >

        <dt>dt1</dt>

        <dd>dd1</dd>

      </dl>

      <!--

      var dla = document.getElementById("dla");

      var dd = document.createElement("dd");

      var tn = document.createTextNode("dd2");

      dd.appendChild(tn); //将创建的文本结点作为<dd>的子结点

      dla.appendChild(dd);

      //--