js-Dom

简介

DOM：Document Object Model （文档对象模型）

节点

HTML 文档中的所有内容都是节点

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

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性是属性节点

• 注释是注释节点

document对象

常用属性

名称	说 明
referrer	返回载入当前文档的**URL**
URL	返回当前文档的**URL**

document常用方法

名称	说 明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

节点的属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

操作节点

操作节点的属性

名称	描述
getAttribute("属性名")	获取属性值
setAttribute("属性名","属性值")	设置属性值

创建和插入节点

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

操作节点样式

改变style属性

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

改变className属性

 document.getElementById("cart").className="cartOver";
 document.getElementById("cartList").className="cartListOver";

获取元素的样式

document.getElementById("cartList").display
document.getElementById("cartList").currentStyle.display