JavaScript DOM对象操作

DOM操作分类

DOM core(DOM核心操作)

​ DOM core定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。

HTML-DOM

使用JavaScript和DOM为HTML文档写脚本时，有许专属的HTML-DOM属性。

CSS-DOM

CSS-DOM是针对CSS的操作

节点与节点之间的关系

• 整个文档是一个文档节点。
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的的文本是文本节点。
• 每个HTML属性是一个属性节点
• 注释属于注释节点

节点信息

每个节点都拥有包含节点某些信息的属性

• nodeName(节点名称)

  nodeName属性含有某个节点的名称，元素 节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text。文档节点的nodeName永远是#document。

• noneValue(节点值)

  对于文本节点，nodeValue属性包含文本，对属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。

• noneType(节点类型)

  nodeType属性可返回节点的类型

元素类型	节点类型
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

访问节点

通过getElement系列方法访问指定节点

• getElementById()方法: 返回按属性查找到的第一个对象的引用。
• getElementsByName()方法L: 按指定名称name查找对象的集合。由于一个文档中可能对有多个同名节点，所以返回的是元素数组。
• getElementsByTagName()方法 返回指定标签名称TagName查找对象集合。由于一个文档中可能对有多个同类型的标签节点，所以返回的是元素数组。

通过节点的层次关系访问节点

​ 属性：

属性类型	描述
parentNode	返回当前节点的父节点
childNodes	返回子节点集合
firstChild	返回节点的第一个子节点，通常用于访问文本节点
lastChild	返回节点的最后一个节点
nextSibling	返回下一个节点
previousSibling	返回上一个节点

在JavaScript中提供了一组可以兼容不同浏览器的element属性，可以消除因为换行或者空行无法准确访问到节点的情况。

element属性：

属性类型	描述
firstElementChild	返回节点的第一个子节点，通常用于访问文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	返回指定节点的下一个兄弟节点
previousElementSibling	返回指定节点的上一个兄弟节点

设置元素样式

style属性设置样式

​ 在HTML DOM中，style是一个对象，代表一个单独的样式声明，可通应用样式的文档或者元素访问style对象，语法如下:

HTML 元素.style.样式属性='值';

样式属性

text(文本):

​ fontSize : 设置元素的字体大小

​ fontWeight : 设置字体的粗细

​ textAlign : 排列文本

​ color : 设置文本的颜色

​ textDecoration : 设置文本的修饰

background(背景)

​ backgroundColor : 设置元素的背景颜色

​ backgroundImage : 设置元素背景图像

​ backgroundRepeat : 设置图和重复背景图片

padding(边距)

​ padding : 设置元素的填充

​ paddingTop : 设置元素上填充

​ paddingBottom : 设置元素下填充

​ paddingLeft : 设置元素左填充

​ paddingRight : 设置元素右填充

border(边框)

​ border : 设置四个边框的属性

​ borderTop : 设置上边框的属性

​ borderBottom : 设置下边框的属性

​ borderLeft : 设置组左边框的属性

​ borderRight : 设置右边框的属性

ClassName属性设置样式

​ 在HTML DOM中 ，ClassName属性可设置或返回元素中的class样式

HTML 元素.className='样式名称';

获取元素的样式

getComputedStyle() 这个方法接收两个参数，需要获取样式的属性值

document.defaultView.getComputedStyle(元素,null).属性 

currentStyle对象，它包含了所有元素的style对象的特征和任何未被覆盖的CSS规则的style特征

HTML 元素.currentStyle.样式属性