DOM

DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，

从而可以使用javascript对网页进行各种操作(比如增删内容)。

浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。

（把他当成一个文件夹结构来理解就好了）

DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型

1.Node类型

NodeType	Named Constant
1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE
4	CDATA_SECTION_NODE
5	ENTITY_REFERENCE_NODE
6	ENTITY_NODE
7	PROCESSING_INSTRUCTION_NODE
8	COMMENT_NODE
9	DOCUMENT_NODE
10	DOCUMENT_TYPE_NODE
11	DOCUMENT_FRAGMENT_NODE
12	NOTATION_NODE

**三种常用类型：**
节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

 if ( someNode.nodeType == Node.ELEMENT_NODE ){ 
    alert (" Node is an element .＂);    
}

（网上每一篇都有这个例子，然后我发现这个例子是红宝书的）

2.节点类型：

节点类型	描述	子元素
Document	表示整个文档（DOM 树的根节点）	Element (max. one) ProcessingInstruction Comment DocumentType
DocumentFragment	表示轻量级的 Document 对象，其中容纳了一部分文档。	ProcessingInstruction Comment Text CDATASection EntityReference
DocumentType	向为文档定义的实体提供接口。	None
ProcessingInstruction	表示处理指令。	None
EntityReference	表示实体引用元素。	ProcessingInstruction Comment Text CDATASection EntityReference
Element	表示 element（元素）元素	Text Comment ProcessingInstruction CDATASection EntityReference
Attr	表示属性。	Text EntityReference
Text	表示元素或属性中的文本内容。	None
CDATASection	表示文档中的 CDATA 区段（文本不会被解析器解析）	None
Comment	表示注释。	None
Entity	表示实体。	ProcessingInstruction Comment Text CDATASection EntityReference
Notation	表示在 DTD 中声明的符号。	None

于是我们随便开个网页试一下：

<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>报名表</title> 
</head>

<body>
    <h1 id="table">报名表</h1>
    <form action="demo-form.php">
        <input type="submit" value="提交">
    </form>

    <p>欢迎大家加入</p>
</body>
<script>
    if (table.nodeType == Node.ELEMENT_NODE) {
        alert("this is an element");
    }
</script>

</html>

再加两行来看看效果：

　　var txt = table.firstChild;
    console.log(txt.nodeType,txt.nodeName,txt.nodeValue)

效果如下

出处：https://www.cnblogs.com/FatTiger4399/p/16728107.html

栏目列表

首页 > temp > JavaScript教程 >

第一百零一篇:DOM节点类型

DOM

1.Node类型

2.节点类型：