javascript高程学习——DOM（一）

最新推荐文章于 2023-08-19 11:52:53 发布

孤城瘾

最新推荐文章于 2023-08-19 11:52:53 发布

阅读量274

点赞数

分类专栏： javascript学习

本文链接：https://blog.csdn.net/weixin_43939379/article/details/90341109

版权

javascript学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

由于作者需要进行一些些项目的参加，所以先来学习DOM操作，之前的基础知识暂时没进行学习安排。

DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员进行添加，移除和修改页面的某一部分。

1.节点层次

DOM可以将任何HTML和XML的文档描绘成一个有多个节点构成的结构，这个层次结构可以被叫做文档树。节点之间的各种关系可以用传统的家族关系来描述，相当于把文档树比作家谱。

比如下面一段代码的节点层次表示为

<html>
		<head>
			<title>Sample page</title>
		</head>
		<body>
			<p>Hello Word!</p>
		</body>
</html>

上面代码的文档层次关系、

文档节点是每个文档的根节点。在这个?中文档节点只有一个子节点，就是HTML元素，该元素被称作文档元素。文档元素是文档的最外层结构。（每个文档只能有一个文档元素）

在HTML中文档元素始终都是元素。
在XML中，没有预定义的元素，文档元素可以是任何元素

每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性通过特性节点表示，文档类型通过文档类型节点来表示，注释类型通过注释节点来表示。

Node类型

每一个节点都有一个nodeType属性，用于表明节点的类型。节点类型一共有12种，每一个节点都必属于其中的一个。在这里我们只讲解其中常用的几个节点类型。

在讲解之前我们必须知道这些节点通常具有的属性

属性：1、nodeType ，表示节点类型
规则： 1 -->Element类型 , 3 -->Text类型, 8 -->Comment类型 , 9 -->Document类型
2. childNodes ，表示子节点集合，可以使用slice方法将NodeList转换为数组
3、nodeName , 取决于节点类型，如果是元素类型，值为元素的标签名
4、nodeValue , 取决于节点类型，如果是元素类型，值为null
5、parentNode，指向文档树中的父节点
6、previousSibling，兄弟节点的前一个节点
7、nextSibling，兄弟节点的下一个节点
8、firstSibling，childsNode列表中的第一个节点
9、ownerDocument，指向表示整个文档的文档节点
10、hasChildNodes，包含一个或多个节点时，返回true

接下来我们来讲下如何访问保存在NodeList（类数组对象，用于保存一组有序的节点）中的节点——可以使用方括号，也可以使用items()方法。

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

操作节点

增

最常用的方法是appendChild()，该方法的作用是向childNodes的列表的末尾添加一个节点。添加完成后，appendChild会返回一个新增的节点。
在这里插入图片描述

其次，如果传入的节点已经是原来文档树的一部分了，那么传入的操作会将该节点从原来的位置转移到新位置。

如果在调用时传入的是父元素的第一个子节点，那么该节点就会成为父元素的最后一个子节点。

//someNode 有多个节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild);
alert(returnedNode == someNode.lastChild)；

插

插入某一个节点与新增加一个节点的区别就是新节点是否在最后，当然增加也是一种特殊的插入节点的方式。
如果想要把节点放在childNodes列表中某个特定的位置上，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会成为参照节点的前一个同胞节点（类似与兄弟元素）

//插入后成为最后一个子节点
var returnedNode = someNode,insertBefore(newNode,null);
alert(new == someNode.lastChild);
// 插入后成为第一个节点
var returnedNode = someNode.insertBefore(newNode,someNode,firstChild);
alert(newNode == newNode);
alert(newNode == someNode.firstChild);
// 插入到最后一个子节点前面
var returnedNode = someNode.insertBefore(newNode,someNode.firstNode);
alert(newNode == someNode.childNode[someNode.childNodes.length-2]);

改

前面所讲的两种方式都是只插入节点并不会移除节点，接下来要讲的方法是替换节点：使用replaceChild()方法移除原有节点并将新的节点插入在原来节点的位置，它使用的参数是：要插入的节点和要替换的节点。

// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.fristchild);
//替换最后一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.lastNode);

虽然被替换，但是该节点还是属于文档的，但是在文档中已经没有了它的位置。

删

修改节点时提到了移除原有节点，那么如何移除原有节点呢？
我们可以使用removeChild()方法。这个方法接受一个参数，就是即将要被移除的节点。

//移除第一个子节点
var  formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除嘴都一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);