javascript教程系列31 :DOM概述

1 JavaScript 三个组成部分

核心（ECMAScript）欧洲计算机制造商协会 描述了JS的语法和基本对象。

文档对象模型（DOM） 处理网页内容的方法和接口

浏览器对象模型（BOM） 与浏览器交互的方法和接口

2 DOM (文档对象模型)

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。

目的其实就是为了能让js操作html元素而制定的一个规范。

3 DOM 树

4 节点（Node）

由结构图中我们可以看到，整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。

标签中的文字则是文字节点。

标签的属性是属性节点。

一切都是节点……

 5 获取节点

-操作节点，必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素 document.getElementById("demo");

通过标签名找到 HTML 元素 document.getElementsByTagName("div")

通过类名找到 HTML 元素 document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

6 DOM 访问关系

 DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问.

父兄访问节点方法:

父节点 parentNode

兄弟节点 nextSibling nextElementSibling previousSibling previousElementSibling

子节点 firstChild firstElementChild lastChild lastElementChild

所有子节点 childNodes children

代码实例:

1.box1是box的父节点
   var box2 = document.getElementsByClassName("box2")[0];
   var box2 = document.getElementById("box2")
   console.log(box2.parentNode);

   //2.nextElementSibling下一个兄弟节点
   console.log(box2.nextElementSibling);

   //firstElementChild第一个子节点
   console.log(box2.parentNode.firstElementChild);

   //所有子节点
   console.log(box2.parentNode.childNodes);
   console.log(box2.parentNode.children);