JavaScript操作DOM对象

一、DOM

1.DOM是Document Object Model的缩写，即文档对象模型。
2.节点和节点关系：

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

3.使用getElement系列方法访问指定节点:

• getElementById():返回id属性查找的第一个对象的引用
• getElementsByName():返回带有指定名称name查找的对象的集合
• getElementSByTagName():返回带有指定标签名的对象的集合

4.根据层次关系访问节点：

• parentNode:返回节点的父节点
• childNodes：返回子节点集合
• firstChild:返回节点的第一个子节点
• lastChild:返回节点的最后一个子节点
• nestSibling:下一个节点
• previousSibling:上一个节点

5.操作节点的属性：

• getAttribute(“属性名”):用来获取属性的值 如果属性不存在则返回nulll
• setAttribute(“属性名”,“属性值”):用来设置属性的值

6.创建和插入节点：

• createElement(tagName):创建一个标签名为tagName的新元素节点
• A.appendChild(B):把B节点追加至A节点的末尾
• insertBefore(A,B):把A节点插入B节点之前
• cloneNode(deep):复制某个指定的节点 值为true复制当前节点和节点所有的子节点，值为false只复制当前节点

7.删除和替换节点：

• removeChild(node):删除指定的节点
• replaceChild(newNode,oldNode):用其他的节点替换指定的节点

8.操作节点样式：

• HTML元素.style.样式属性=“值”;

document.getElementById(\"titles\").style.color=\"#ff0000\";document.getElementById(\"titles\").style.fontSize=\"25px\";

• HTML元素.className=“样式名称”;

document.getElementById(\"cart\").className=\"cartOut\";

9.获取元素的样式

• HTML元素.style.样式属性(只能获取内联样式的属性值)

alert(document.getElementById(\"cartList\").display);

• HTML元素.currentStyle.样式属性(只支持IE浏览器)

alert(document.getElementById(\"cartList\").currentStyle.display);

• document.defaultView.getComputedStyle(元素,null).属性(IE浏览器不支持)

var cartList=document.getElementById(\"cartList\");alert(document.defaultView.getComputedStyle(cartList,null).display);