Javascript操作DOM对象

1、DOM操作
-1.DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1938年,W3C发布了第一级的DOM模范,这个范围允许访问和操作HTML页面中的每个单独元素,如网页的表格、图片、文本、表单元素等。
-2.使用JavaScript操作的DOM是分为三个方面：DOM Core(核心)、HTML—DOM和CSS—DOM。
–2、HTML文档在DOM中是这样规定的。
1.整个文档是一个文档节点。
2.每个HTML标签时一个元素节点。
3.包含在HTML元素中的文本是文本节点
4.每个HTML属性是一个属性节点
5.注释属于注释节点。
–3、使用getElement序列方法访问指定节点
-1.在HTML文档中，访问节点的标准方法就是我们之前学习的getElement系列方法，即getElementByld( )、getElementsByName( )和getElementsByTagName( ),只是它们查找的方法略有不同。
-2.查找方法
getElementByld( ):返回按id属性查找的第个对象的引用。
getElementsByName( ):返回按带有指定名称name 查找的对象的集合，由于一个文档中可能会有多个同名节点(如复选框、 单选按钮),因此返回的是元素数组
getElementsByTagName( ):返回带有指定标签名TagName 查找的对象的集合，由于一个文档中可能会有多个同类型的标签节点(如图片组、 文本输入框)，因此返回元素数组。
–4、根据层次关系访问节点
-1.通过getElementById()、getElementsByName()和getElementsByTagName()这三种方法可查证看HTML文档的中的任何元素，但是这三种方法都会忽略文档的结构,因此在HTML DOM中提供了节点属性,这些属性可遵守文档的结构,在文档的布局进行"短距离地查找元素"。
-2.节点属性
parentNode:返回节点的父节点
childNodes:返回子节点集合,childNodes[i]
firstChild:返回节点的第一个子节点,最普通的用法是访问该元素的文本节点
lastChild:返回节点的最后一个子节点
nextSibling:下一个节点
previousSibling:上一个节点
–5、element属性
-1.在JavaScript中给大家提供一组可兼容不同浏览器的element属性,可以消除这种因空行,换行等出现的无法确定访问到节点的情况。
-2.element属性
firstElementChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild:返回节点的最后一个子节点
nextElementSibling:下一个节点
previousElementSibling:上一个节点
–6、节点信息
-1.节点是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含着关于节点信息某些信息的属性,这些属性如下。
nodeName(节点名称)属性包含某个节点的名称,元素节点的nodeName是标签名称,属性节点dnodeName是属性名称,文本节点的nodeName永远是#text,文档节点的noedName永远是#document。
nodeValue(节点值),对于文本节点，nodeValue属性包含文本，对于属性节点，nodeValue属性包含属性值;nodeVlue属性对于文档节点和元素节点是不可用的。
nodeType(节点类型)属性可返回节点的类型，一个只读属性，如返回的元素节点、文本节点、注释节点等。
-2.节点类型
元素element的NodeType值是1
属性attr的NodeType值是2
文本text的NodeType值是2
注释comments的NodeType值是8
文档document的NodeType值是9
–7、操作节点的属性
-1.HTML DOM提供了获取及改变点属性值的标准方法，如下所示。
getAttention(“属性名”)：用来获取属性的值。
setAttribute(“属性名”,“属性值”)：用来设置属性的值。
–8、创建和插入节点
-1.使用JavaScript操作DOM有很多方法可以创建或增加一个新节点。主要方法如下。
-2.创建节点
createElement(tagName):创建一个标签名为tagName的新元素节点
A.appendChild(B):把B节点追加至A节点的末尾
insertBefore(A,B):把A节点插入B节点之前
cloneNode(deep):复制某个指定的节点
–9、删除和替换节点
使用Core HTML 删除节点的方法如下。
removeChild(node):删除指定的节点
replaceChild(newNode,oldNode):用其他的节点替换指定的节点,newNode是替换的新节点,oldNode是要被替换的节点。
–10、操作节点样式
-1.style属性
在HTML DOM中，style是一个对象，一个代表独立的样式声明，可通过应用样式的文档或元素访问style对象，使用style属性改变样式的语法如下。
语法：
HTML元素.style.样式属性=“值”;
-2.style对象的常用属性
background(背景)：
backgroundColor:设置元素的背景颜色
backgroundImage:设置元素的背景图像
backgroundRepeat:设置是否及如何重复背景图像
text(文本)：
fontSize:设置元素的字体大小
fontWeight:设置字体的粗细
textAlign:排列文本
textDecoration:设置文本的修饰
font：设置同一行字体的属性
color：设置文本的颜色
padding(边距)：
padding:设置元素的填充
paddingTop:设置元素的上填充
paddingBottom：设置元素的下填充
paddingLeft:设置元素的左填充
paddingRight:设置元素的右填充
border(边框)：
border:设置四个边框的属性
borderTop:设置上边框的属性
borderBottom：设置下边框的属性
borderLeft:设置左边框的属性
borderRight:设置右边框的属性
-3.常用事件
onclick:当用户单击某个对象时调用事件
onmouseover:鼠标移到某元素之上
onmouseout:鼠标从某元素移开
onmousedown：鼠标按钮被按下
-4.className属性
在HTML DOM中，className属性可设置或返回元素的class样式，语法如下。
语法：
HTML元素.className=“样式名称”
–11、获取元素位置
-1.HTML中元素的属性
offsetLeft:返回当前元素左边界的距离，只读属性
offsetTop:返回当前元素上边界的距离，只读属性
offsetHeight:返回元素的高度
offsetWidth:返回元素的宽度
offsetParent:返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop:返回匹配元素的滚动条的垂直位置
scrollLeft:返回匹配元素的滚动条的水平位置
clientWidth:返回元素的可见宽度
clientHeight:返回元素的可见高度