DOM(文档对象模型)

最新推荐文章于 2023-09-05 09:26:32 发布

neverland-7

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量973

点赞数

分类专栏： javascript学习笔记文章标签： javascript dom 节点层次 DOM操作技术 node

本文链接：https://blog.csdn.net/neverland_7/article/details/25311667

版权

节点层次

DOM可以将任何html或xml文档描绘成一个由多层节点构成的结构。

<html>
  <head>
     <title>文档</title>
  </head>
  <body>
     <p>Hello World!</p>
  </body>
</html>

这样的一个结构，可以用下面的树形图来表示：

dom

javascript中所有节点都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性，用于表明节点类型，可用以下12个数值常量来表示：

nodeType	等价命名常量
1	Node.ELEMENT_NODE
2	Node.ATTRIBUTE_NODE
3	Node.TEXT_NODE
4	Node.CDATA_SECTION_NODE
5	Node.ENTITY_REGERENCE_NODE
6	Node.ENTITY_NODE
7	Node.PROCESSIONG_INSTRUCTION_NODE
8	Node.COMMENT_NODE
9	Node.DOCUMENT_NODE
10	Node.DOCUMENT_TYPE_NODE
11	Node.DOCUMENT_FRAGMENT_NODE
12	Node.NOTATION_NODE

其中比较重要的是：1（元素）、2（属性）、3（文本）、8（注释）、9（文档）。

注意：IE中没有公开Node类型的构造函数，所以使用常量不能跨浏览器兼容，所以建议如需试用，建议试用数值值来进行操作。

如判断一个节点是否是元素：

if(someNode.nodeType==1){
     //code
}

Node类型还定义了所有节点类型都包含的特性和方法：

特性/方法	类型/返回类型	说明
nodeName	String	节点的名字。返回值取决于节点类型。
nodeValue	String	节点的值。返回值取决于节点类型。
nodeType	Number	节点类型
childNodes	NodeList	保存子节点的类数组对象。能够实时反映DOM结构的变化。
parentNode	Node	元素的父节点。
previousSibling	Node	指向前一个兄弟节点，如果该节点是第一个节点，则为null。
nextSibling	Node	指向后一个兄弟节点，如果该节点是最后一个节点，则为null。
firstChild	Node	指向childNodes返回的列表中的第一个节点。
lastChild	Node	指向childNodes返回的列表中的最后一个节点。
hasChildNodes()	Boolean	当节点包含一个或多个子节点时，返回true。
ownerDocument	Document	表示整个文档的文档节点。