javascript操作DOM对象

访问节点

使用getElement系列访问指定节点

getElementByid()：返回按id属性查找的第一个对象引用

getElementByName()

getElenentByTagName()

 

根据层次关系访问节点属性

节点属性parentNode:返回节点的父节点

               childNodes：返回子节点集合

                firstChild：返回节点的第一个子节点，最普遍的用法是梵文该元素的文本节点

                lastChild：返回节点的最后一个子节点

                nextSibling：下一个节点

                previousSibling：上一个节点

element属性  firstElementChild返回第一个子节点

                      lastElementChild返回最后一个子节点

                      nextElementSibLing下一个节点

                      preciousElementSibling上一个节点

节点信息

nodeName:节点名称

nodeValue：节点值

nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

 

 

操作节点

操作节点属性getAttribute

创建和插入节点

createElement(tgName)     创建一个标签为tagName的新元素

A.appendChild(B)         把B节点追加至A节点的末尾

insertBefore(A,B)     把A节点插入到B节点之前

cloneNode(deep)   复制某个指定节点

deep的值有true和false

true是复制本身加所有子节点

false是只复制自己本身

删除和替换节点

removeChild(node)    删除指定节点

replaceChild(newNode,oldNode)   用其他节点替换指定节点

1.改变样式的属性

style属性：

语法：HTML元素.style.样式属性＝"值";

示例：

document.getElementById(" wrap ").style.color="# fff ";

document.getElementById(" wrap ").style. backgroundColor ="#ccc ";

className属性

语法：HTML元素.className="样式名称“;

2.获取元素的样式

语法：HTML元素.style.样式属性;

示例：alert(document.getElementById("cartList").style.display);

语法：document.defaultView.getComputedStyle(元素,null).属性

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

语法：HTML元素. currentStyle.样式属性;

示例：alert(document.getElementById("cartList").currentStyle.display);

3.HTML中元素属性应用

offsetLeft  :返回当前元素左边界到它上级元素的左边界的距离，只读属性

offsetTop  :返回当前元素左边界到它上级元素的上边界的距离，只读属性

offestHeight :返回元素的高度

offsetWidth :返回元素的宽度

offsetParent :返回元素的偏移容器，即对最近的动态定位的包含元素的

scrollTop  :返回匹配元素的滚动条的垂直位置

scrollLeft  :返回匹配元素的滚动条的水平位置

clientWidth :返回元素的可见宽度

clientHeight :返回元素的可见高度