javascript-DOM操作

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

 

DOM树介绍

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树。

 

上图可知，在HTML当中，一切都是节点：（非常重要）

• 元素节点：HTML标签。

• 文本节点：标签中的文字（比如标签之间的空格、换行）

• 属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

object节点维护的内容

dom操作的内容

节点查找

直接查找

DOM节点的获取方式其实就是获取事件源的方式

操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s
//其中方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。

即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
document.getElementsByTagName("div1")[0];    //取数组中的第一个元素
document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

特殊情况：数组中的值只有1个。

间接查找

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

             

节点的访问关系，是以属性的方式存在的。

JS中的父子兄访问关系：

这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。

获取父节点

调用者就是节点。一个节点只有一个父节点，调用方式就是

    节点.parentNode

获取兄弟节点

下一个兄弟节点

nextSibling：指的是下一个节点（包括标签、空文档和换行节点）
火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。

IE678版本：指下一个元素节点（标签）。
nextElementSibling：火狐、谷歌、IE9+版本：指的是下一个元素节点（标签）。

版本说明