目录

 

一.DOM操作

(一).DOM操作分类

(二).节点和节点的关系

(三).访问节点

 (四).节点信息

二.操作节点

(一)操作节点的属性

(二).创建和插入节点

(三).删除和替换节点

(四).操作节点样式

一.DOM操作

dom是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口，1998年，W3C发布了第一级的DOM规范，规范允许访问和操作HTML页面中的每个单独元素，如网页的表格，图片，文本，表单元素等，由于大部分主流的浏览器都执行了这个标准，因此基本解决了浏览器的兼容问题。

使用javascript操作DOM时分为三个方面，DOMCore（核心），HTML——DOM和CSS-Dom.通过这些标准，开发人员可以让网页真正拖动起来，动态的增加，修改，删除数据，使用户与计算机的交互更加便捷，交互也更加丰富。

(一).DOM操作分类

使用Javascript操作DOM时通常分为三类，DOM Core（核心）,HTML-DOM 和Css-DOM

(二).节点和节点的关系

DOM是以树状结构组织的HTML文档，HTML文档中的每个标签或元素都是一个节点。

--整个文档是一个文档节点

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

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

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

--注释属于注释节点

1.使用父（parent）,子(child)和同胞(sibing)等术语来描述这些节点的层级关系.父节点拥有子节点，同级子节点被称为同胞或兄弟节点。

--在节点树中，顶部节点被称为根（root）。

--每个节点都有父节点，除了根（它没有父节点）。

-- 一个节点可以拥有任意数量的子节点。

-- 同胞节点是拥有相同父节点的节点。

(三).访问节点

使用DOM Core访问HTML文档的节点主要有两种方式：

--使用getElement系列方法访问指定节点，

--根据节点的层次关系访问节点。

1.使用getElement系列方法访问指定节点：

访问节点的标准方法就是用getElement 系列，

--getElementById():返回按id属性查找的第一个对象的引用。

--getElementsByName():返回按带有指定名称name查找的对象的集合，返回的是元素数组。

--getElementsByTagName():返回带有指定标签名Tag Name查找的对象的集合，返回的是元素数组。

2.根据层次关系访问节点

节点属性(节点[包含元素，文本，属性，注释])
	
属性名称
			
描述
		
parentNode
			
返回节点的父节点
		
chiildNodes
			
返回子节点集合 childNoeds[i]
		
fistChild
			
返回节点的第一个子节点，最普遍的用法是访问该元素的文本信息
		
lastChild
			
返回节点的最后一个子节点
		
nextSibing
			
下一个节点
		
previousSibling
			
上一个节点
		
在Javascript中有一组可兼容不同浏览器的element属性

element属性(节点<标签元素>)
	
属性名称
			
描述
		
fistChildElementChild
			
返回节点的第一个子节点，最普遍的用法是访问该元素的文本信息
		
lastElementChild
			
返回节点的最后一个子节点
		
nextElementSibing
			
下一个节点
		
previousElementSibing
			
上一个节点
		
 (四).节点信息

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

--nodeName（节点名称）

--nodeValue（节点属性）

--nodeType   (节点类型)

节点类型
	
节点类型
			
NodeType值
		
元素element
			
1
		
属性attr
			
2
		
文本text
			
3
		
注释comments
			
8
		
文档document
			
9
		
二.操作节点

(一)操作节点的属性

--getAttribute(“属性名”) 用来获取属性的值 ,当属性不存在则getAttribute（）返回null。

--setAttribute(“属性名，属性值”) 用来设置属性的值 。

(二).创建和插入节点

使用javascript 操作DOM有很多方法可以创建或增加一个新节点

创建和插入节点
	
名称
			
描述
		
createElement(tagName)
			
创建一个标签名为tagName的新元素节点
		
A.appendChild(B)
			
把B节点追加至A节点的末尾
		
inserBefore(A,B) //使用父节点插入
			
把A节点插入B节点之前
		
cloneNode(deep)
			
复制某个指定的节点
		
(三).删除和替换节点

名称
			
描述
		
removeChild(node)
			
删除指定的节点
		
replaceChild(newNode,oldNode)
			

			
用其他的节点替换指定的节点
			
		
方法replaceChild(newNode,oldNode)中的两个参数，newNode是替换的新节点,oldNode是要被替换的节点

(四).操作节点样式

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

--使用style属性

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

1.style语法
    HTML元素.style.样式属性=“值”

style属性的常用属性
	
类别
			
属性
			
描述
		
background（背景）
			
backgroundColor
			
设置元素的背景色
		
backgroundImage
			
设置元素的背景图像
		
backgroundRepeat
			
设置元素的背景图像是否重复
		
text(文本)
			
fontSize
			
字体的大小
		
fontWeight
			
字体的粗细
		
textAlign
			
排列文本
		
textDecotation
			
文本的修饰
		
font
			
设置同一行字体的属性
		
color
			

			
设置文本的颜色
			
		
padding(边距)
			
padding 
			
内边距
		
边框
			
border
			
边框属性
		
 

 

 

 

 

 

 

 

 

 

 

 

 

--使用className属性

1.语法
     HTML元素.className="样式名称"

获取元素的样式

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

1.语法
    HTML元素.style。样式属性;(获取内联样式)

事件

常用的事件
	
名称
			
描述
		
onclick
			
点击事件
		
onmouseover
			
鼠标移动到某元素之上
		
onmouseout
			
鼠标从某元素之上移开
		
onmousedown
			
鼠标按钮被按下