剑指前端（前端入门笔记系列）——DOM（基本组成与操作）

程序员文章站 2022-03-20 21:08:52

DOM——基本组成与元素节点的获取 DOM——基本组成与元素节点的获取 DOM是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。他给文档提供了一种结构化的表达方式，可以改变文档的内容和呈现方式，我们最关心的是，DO ......

dom——基本组成与操作

　　dom是针对html和xml文档的一个api（应用程序编程接口）。dom描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。他给文档提供了一种结构化的表达方式，可以改变文档的内容和呈现方式，我们最关心的是，dom把网页和脚本以及其他的编程语言联系了起来。所谓的dom是以家族的形式描述html（父子节点和兄弟节点），那么，什么是dom呢？我们可以从这几点解析一下：

dom是document object model的缩写，简称文档对象模型（文档、模型）。这个对象就是document

dom的结构（页面的结构）：树状结构，家族结构

dom的组成（成员）：节点

dom是js操作页面的一个入口对象

dom可以将任何html和xml文档描绘成一个多层节点构成的结构

dom结构中的每一个成分称为一个节点，节点分为几种不同的类型，每种类型都拥有各自不同的特点、数据和方法。每个节点与其他节点存在某种关系，所以节点之间的关系构成了层次。文档节点是每个文档的根节点。<html>元素是文档节点的子节点，被称为文档元素，每个文档只能有一个文档元素

每一段标记都可以通过树中的一个节点来表示：元素通过元素节点来表示，特性通过特性通过特性节点来表示，文档通过文档节点来表示，而注释通过注释节点来表示，总能共有十二种类型，这些类型都继承自一个基类型。

html中，文档元素始终是<html>元素

xml中，没有预定义的元素，因此任何元素都可能成为文档元素

node类型

　　dom定义了一个node接口，该接口由dom中的所有节点类型实现，这个node接口在javascript中是作为node类型来实现的；除了ie以外，在其他所有浏览器中都可以访问到这个类型。javascript中的所有节点类型都继承自node类型，因此所有节点都共享着相同的基本属性和方法。

常量

每个节点都有一个nodetype属性，用于表明节点类型。节点类型由在node类型中定义的下列12个数值常量来表示：

node.element_node 　　 //元素节点对应的常量，对应数字值1
node.attribute_node 　　　　 //属性节点对应的常量，对应数字值2
node.text_node 　　 //文本节点对应的常量，对应数字值3
node.cdata_section_node 　　 //cdata区段对应的常量，对应数字值4
node.entity_reference_node 　　 //实体引用元素对应的常量，对应数字值5
node.entity_node 　　 //实体对应的常量，对应数字值6
node.processing_instruction_node 　　 //表示处理指令对应的常量，对应数字值7
node.comment_node 　　 //注释节点对应的常量，对应数字值8
node.document_node 　　 //最外层的根节点对应的常量，对应数字值9
node.document_type_node 　　 //<!doctype………..>对应的常量，对应数字值10
node.document_fragment_node 　　 //文档碎片节点对应的常量，对应数字值11
node.notation_node 　　 //dtd 中声明的符号节点对应的常量，对应数字值12

属性

自身信息

nodetype属性（节点的类型）

因为nodetype属性有两种值，所以确定节点的类型有两种方式：

第一种是直接通过对应的常量进行比较判断，但在ie中无效：

<div id="box"></div>
<script type="text/javascript">
var obox = document.getelementbyid("box");
if(obox.nodetype == node.element_node){
    console.log("元素节点");
}else {
    console.log("不是元素节点");
}
</script>

第二种是通过对应的数字值进行比较判断，这种方式适用于所有浏览器：

<div id="box"></div>
<script type="text/javascript">
    var obox = document.getelementbyid("box");
    if(obox.nodetype == 1){
        console.log("元素节点");
    }else {
        console.log("不是元素节点");
    }
</script>

也就是常量和数字值是可以互换的，只不过数字值可以兼容各个浏览器。

nodename（节点名字）、nodevalue（节点值）

要了解节点的具体信息，可以使用这两个属性。这两个属性完全取决于节点的类型。下面列出一些基本的对照表。

节点关系

文档中的节点之间都存在这样或那样的关系，文档树就好比族谱，存在父子关系和兄弟关系。

- 父子关系

childnode属性（执父索子）

　　该属性中保存着一个nodelist对象。这是一个类数组对象，用于保存一组有序的节点，说是类数组，那么里面的元素当然是用数组的方式来读取，而且它也有一个length属性，但它并不能称为一个真正的array实例。下面的例子展示了如何访问保存在nodelist中的节点——可以通过方括号，也可以通过item()方法。当然，因为索引访问的方式类似于数组，所以开发人员更青睐于方括号来获取。

<div id="box">
    <p>段落1</p>
    <p>段落2</p>
    <!--注释123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var obox = document.getelementbyid("box");
    var firstchild_1 = obox.childnodes[0];
    var firstchild_2 = obox.childnodes.item(0);
    var count = obox.childnodes.length;
    console.log("所有子节点：" , obox.childnodes);
    console.log("第一个子节点：" , firstchild_1);
    console.log("第一个子节点：" , firstchild_2);
    console.log("子节点的数量：" , count);
</script>

　　这个类数组会把空格和换行当成文本节点保存起来，所以除去三个段落标签和一个注释标签，它还保存了五个由空格和换行组成的文本节点。这个例子是在一个节点有子节点的情况下，所以有必要提供一个检测函数haschildnodes()来判断一个节点是否有子节点，如果有的话，它返回true，反之为false，这比查询childnodes列表的length属性有效多了。

parentnode属性（执子索父）

我们都知道一个父亲可以有多个亲生儿子，但是儿子却只能有一个亲生父亲。所以childnode属性返回的是一个包含了多个节点的类数组，而parentnode属性只返回一个节点。

<div id="box">
    <p class="p1">段落1</p>
    <p>段落2</p>
    <!--注释123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var op= document.getelementsbyclassname("p1")[0];
    var parent = op.parentnode;
    console.log("父节点为：" , parent);
</script>

- 兄弟关系

除了操作父子关系用到的属性，每个节点还提供了操作兄弟关系的属性。

previoussibling属性（前一个兄弟节点）、nextsibling属性（后一个兄弟节点）

<div id="box">
    <p class="p1">段落1</p>
    <span></span>
    <h1>段落2</h1>
    <!--注释123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var op= document.getelementsbyclassname("p1")[0];
    var presibling = op.previoussibling;
    var nextsibling = op.nextsibling;
    console.log("前一个兄弟节点为：" , presibling);
    console.log("后一个兄弟节点为：" , nextsibling);
</script>

特殊的，第一个节点的previoussibling属性和最后一个节点的nextsibling属性都为null

总结

（1）dom由各种类型的节点组成

（2）每种节点都有其对应的属性值（类型、名字以及值）

（3）每个节点都可以由其他节点用父子关系和兄弟关系检索并获取

上一篇：并查集学习笔记

下一篇： composer中常用命令

剑指前端（前端入门笔记系列）——DOM（基本组成与操作）

剑指前端（前端入门笔记系列）——DOM（元素节点）

剑指前端（前端入门笔记系列）——DOM（属性节点）

剑指前端（前端入门笔记系列）——数组（方法）

剑指前端（前端入门笔记系列）——Math对象