目录
一.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属性是一个属性节点
--注释属于注释节点
![](https://i-blog.csdnimg.cn/blog_migrate/6dc47e8f9f342675186bb7c304da5cba.jpeg)
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属性
属性名称 | 描述 |
---|---|
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.样式属性=“值”
类别 | 属性 | 描述 |
---|---|---|
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 | 鼠标按钮被按下 |