js学习（DOM-节点操作）

操作DOM（Documeent Object Model 文档对象模型）

节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstchild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

Element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

nextSibling属性与nextElementSibling属性的区别： 

nextSibling属性返回元素节点之后的节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；

nextElementSibling属性只返回元素节点之后的元素节点（不包括文本节点、注释节点）；

注意: 空格、回车也会看作文本，以文本节点对待。

操作节点属性（设置属性、获取属性、删除属性）

设置属性：setAttribute()方法添加指定的属性，并为其赋指定的值

语法：element.setAttribute(添加的属性的名称,添加的属性值)

示例：

document.getElementById("changePic").setAttribute("src","image/change.jpg");

获取属性：getAttribute() 方法返回指定属性名的属性值

语法：element.getAttribute(需要获得属性值的属性名称)

示例：

alert(document.getElementById('changePic').getAttribute('src'));

删除属性：removeAttribute() 方法删除指定的属性

语法：element.removeAttribute(移除的属性的名称)

示例：

document.getElementById("changePic").removeAttribute("src","image/change.jpg");

创建&插入

名称	描述
document.createElement(“元素名”)	创建元素节点
document.createTextNode(“文本”)	创建文本节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

创建节点：

   var  div  =  document.createElement("div");

         div.innerHTML =  "这是我的一段内容";

插入节点：

     var  div  =  document.createElement("div");

         div.innerHTML =  "这是我的一段内容";

         app.appendChild(div)

 

 

 

 

删除&替换

名称	描述
父节点.removeChild( 子节点)	删除指定的节点
父节点.replaceChild( newNode, oldNode)	用其他的节点替换指定的节点

style属性

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

示例：

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

className属性

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

示例：

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

获取元素的样式

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

示例：

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

获取元素位置

属性	说明
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

 

示例：

var sTop=document.documentElement.scrollTop||document.body.scrollTop;

适应不同浏览器