第三章-JavaScript操作DOM对象

本章简介；

DOM（文档对象模型）是一个通过和JavaScript进行交互的API。

它为文档提供了一个层次化的节点树，开发人员可以通过这个节点树访问、添加、修改、删除这个节点树的某一个部分。

本章通过JavaScript操作DOM可以改变文档的内容和展现形式，实现页面的各种效果。

本章单词：

parentNode 父节点

childNodes 子节点集合

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点

createElement 创建节点

appendChild 添加子节点

insertBefore 指定节点前插入节点

cloneNode 复制节点

removeChild 移除子节点

replaceChild 替换子节点

3、1 DOM操作

DOM是Document ObjectModel 的缩写，即文档对象模型，是基于文档编程的一套API。

这个规范允许访问和操作HTML页面中的每个单独元素。

使用JavaScript操作分为三个方面：

1、 DOM-Core

DOM-Core不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档。

2、 HMT-DOM

使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HTML-DOM属性，它提供了一些更为简单的标记描述各种HTML元素的属性，它的应用范围没有DOM-Core广泛，仅适用处理HTML文档。

3、CSS-DOM

CSS-Dom 是针对CSS 的操作，在JavaScript中，CSS-DOM技术主要作用是获取和设置 style的各种CSS属性.

3、2 节点和节点关系

DOM是以树状结构组织的HTML文档，一个HTML文档是由各个不同的节点组成的，

根据DOM概念：

整个文档是一个文档节点

每个HTML标签是一个元素节点

每个HTML属性是一个属性节点

包含在HTML元素中的文本是文本节点

注释属于注释节点

3、3 访问节点

使用DOM-core 访问HTML文档的节点共有两个方式

1、使用 getElement 系列方法

document.getElementsByTagName("");
document.getElementById("");
document.getElementsByName("");

2、使用层次关系访问节点

ParentNode 父节点

ChildNodes 子节点集合

FirstChild 第一个子节点

LastChild 最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点

3、4 节点信息

节点是DOM层次结构中的任何数据类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性

NodeName 节点名称

NodeValue 节点值

NodeType 节点类型

3、5 操作节点

在网页开发中，如果想要动态的改变网页内容、动态的删除网页中的一些内容、动态的改变网页的内容样式、这些都需要对网页中的节点进行操作。

1、操作节点的属性

var name = document.getElementsByTagName("body");
    name.setAttribute("border","5px");
    name.getAttribute("border")

2、创建和插入节点

//创建新节点 img
 var img =document.createElement("img");
 //把img 追加到 name节点中
 name.appendChild(img);
 //把img 插入到 name 节点前面
 name.insertBefore(img,name);
 //复制节点,参数为true则复制此节点及其节点，若为flase则只复制此节点
var newimg = img.cloneNode(true);

3、删除和替换节点

   //删除节点
name.removeChild("img");
    //替换节点
name.replaceChild(newimg,img);

3、6 操作节点样式

CSS在页面中应用的非常频繁，使用这些样式可以实现页面中不同样式的特效，但是这些都是静态的。

在JavaScript中，有两种方法可以动态的改变样式的属性：

1、 style属性

在HMTL-DOM中，style 是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问style对象

document.getElementsByTagName("body").style.color="red";
document.getElementsByTagName("body").style.fontSize="25px";

2、 className属性

在HMTL-DOM中，className属性可以设置或返回元素的class样式。

document.getElementsByTagName("body").className="写好的类样式名字";

3、7 获取节点样式

在JavaScript中可以使用style属性获取样式的属性值

document.getElementsByTagName("body").style.color;

但是这样只能获取内联样式的属性值，无法获取内部样式表或外部样式表中的属性。

3、7 获取元素位置

使用 currentStyle 或getComputedStyle()可以获取元素的属性值，即可以获取元素在网页中的位置。

本章总结：

1、DOM操作分为DOM-Core、HTML-DOM、和CSS-DOM三个方面

2、在HTML中查找节点的方法有getElement 系列方法，也可以用层次关系

3、设置节点属性值的的标准方法是 getAttribute（）和 setAttribute（）。

4、学会创建，删除，追加，替换，插入，复制等操作节点的方法。

5、可以改变样式的两种方法是使用 style属性和 className 属性

第三章-JavaScript操作DOM对象

猜你喜欢