JavaScript操作DOM对象

目录

 

一.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	鼠标按钮被按下