JS进阶之DOM

---

layout: post
title: "JS进阶之DOM"
date: 2016-05-31 13:28:27 +0800
comments: true
categories: [JavaScript]

---

这段时间开始实习，拿到手一个项目。都没什么时间写博客了，在写这个项目的实际过程中，发现对JS还是很陌生了。所以决定在空余时间提升下JS。在过了一遍基本的之后看到DOM的时候发现这个东西不太好懂，就觉得写个博文。

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

  
I love JavaScript
  
 JavaScript使网页显示动态效果并实现与用户交互功能。
  

将HTML代码分解为DOM节点层次图：

image

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点： 上图中、、

   等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如
3. ...
中的JavaScript、DOM、CSS等文本。
4. 属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"。

节点属性:

image

遍历节点树：

image

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

image

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型

**nodeName 属性: **节点的名称，是只读的。

• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 是属性的名称
• 文本节点的 nodeName 永远是 #text
• 文档节点的 nodeName 永远是 #document

nodeValue 属性：节点的值

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本自身
• 属性节点的 nodeValue 是属性的值

nodeType 属性:节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9