JavaScript操作DOM对象

DOM操作
分类：DOM Core、HTML-DOM、CSS-DOM
节点和节点关系：根节点、父节点、子节点、兄弟节点
访问节点：
使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、 getElementsByTagName()
根据层次关系访问节点：
根据节点属性：（可识别空格）
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
根据元素属性（不识别空格）
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
示例：
var img = document.getElementById(“fruit”);
alert(img.parentNode.innerHTML);//网页所有内容
alert(img.parentNode.innerText);//文本内容
var body = document.getElementsByTagName(“body”)[0];
alert(body.childNodes[1].innerHTML);//没有紧挨着第一个为空格
alert(body.childNodes[5].innerText);
alert(body.firstChild.nextSibling.innerHTML);
alert(body.firstElementChild.innerHTML);//按元素搜索节点
alert(body.firstElementChild.nextElementSibling.innerHTML);
alert(body.lastElementChild.innerHTML);
alert(body.lastElementChild.innerText);
节点信息：
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
节点类型和对应的值：
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

示例：
body.childNodes：body下面的所有子节点
for (var i = 0; i < body.childNodes.length; i++) {
if (body.childNodes[i].nodeType == 1) {
alert(body.childNodes[i].innerHTML+“111111”);
}else if (body.childNodes[i].nodeType == 3) {//空格是文本 alert(body.childNodes[i].nodeValue+“33333”);
}
}
操作节点
操作节点属性
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
示例：
img src="" width=“200px” height=“200px” id=“book”/>
<input type=“button” id=“btn” value=“操作属性” /
var book=document.getElementById(‘book’);
var btn=document.getElementById(‘btn’);
btn.οnclick=function(){
book.setAttribute(“src”,“img/012.jpg”);
book.setAttribute(“title”,“我是鸟”);
创建和插入节点
createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
示例：
var a=document.createElement(‘a’);
var body=document.getElementsByTagName(‘body’)[0];
a.setAttribute(“href”,“http://www.baidu.com”);
a.style.textDecoration=‘none’;
a.style.color=’#000’;
a.className=‘baidu’;//可以在css中点出来单独设定
a.innerHTML=‘百度’;
body.appendChild(a);
//克隆节点
// a.cloneNode(true);
//插入到按钮前
// var copy1=a.cloneNode(true);
// body.insertBefore(copy1,btn);
删除和替换节点：
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点
示例：
body.remove(book);//删除所有
body.removeChild(book);//删除子节点
操作节点样式
style属性
HTML元素.style.样式属性＝"值"
示例：
var a=document.createElement(‘a’);
var body=document.getElementsByTagName(‘body’)[0];
a.setAttribute(“href”,“http://www.baidu.com”);
a.style.textDecoration=‘none’;
a.style.color=’#000’;
className属性
HTML元素.className=“样式名称”
可以在html中或者css中.样式名称进行设置
获取元素的样式
语法：HTML元素.style.样式属性;
示例：
alert(document.getElementById(“cartList”).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);
获取元素位置
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
语法示例：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;