您的位置：首页 > Web前端 > JavaScript
js常用DOM操作

2015-06-19 11:31 651 查看
在博客园看到了苏夏写的常用DOM整理文章，地址：http://www.cnblogs.com/cabbagen/p/4579412.html，然后抽时间都试了一下这些常用的DOM操作。在这里记录一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用dom</title>
<script>
window.onload = function(){
function $(id){ //获取id元素
return typeof id === 'string' ? document.getElementById(id) : id;
}
//取得节点
var box = $('box'); //得到id名为box的元素节点
var div = document.getElementsByTagName('div'); //得到所有标签为div的元素节点集合
var name = document.getElementsByName('our'); //得到name为our的元素
//var cls = document.getElementsByClassName('box'); //ie8及以下不支持
//var clsdiv = document.querySelectorAll('#box,#boxs'); //找到所有id为box和boxs的元素数组集合querySelector只能找到第一个，ie8以上才支持

//遍历节点
var ul = $('ul');
var lis = ul.children; //取得ul下的直系子元素li
var lis1 = getFirst(ul); //在火狐下它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
function getFirst(ele){ //通过childNodes封装得到第一个子元素
for(var i=0;i<ele.childNodes.length;i++){
if(ele.childNodes[i].nodeType == 1){
return ele.childNodes[i];
}
}
};
var lisFirst = firstChild(ul);  //也可以这样获取到第一个子元素，比较方便
var lisLast = lastChild(ul); //也可以这样获取到最后一个子元素，比较方便
function firstChild(node){ //封装得到第一个子元素
return node.firstElementChild || node.firstChild;
};
function lastChild(node){ //封装得到最后一个子元素
return node.lastElementChild || node.lastChild;
};
function prev(node){ //得到上一个元素
return node.previousElementSibling || node.previousSibling;
};
function next(node){ //得到下一个元素
return node.nextElementSibling || node.nextSibling;
};
var parent = $('con').parentNode; //得到id为con的元素的父节点也就是得到了id为box的元素节点

//获取节点信息
var nodeName = $('box').nodeName; //获取元素或者属性节点的标签名称 结果是：DIV
var nodeValue = $('con').childNodes[0].nodeValue; //获取文本节点的内容 结果是：文本节点内容
var innerHTML = $('inner').innerHTML; //获取并设置元素节点的内容 结果是：文本节点内容<span>123</span> 可能会包含HTML标签
var innerText = innerText($('inner')); //获取并设置元素节点的纯文本内容不包含标签结果是：文本节点内容123 (ie用innerText，ff用textContent)
function innerText(node){
return node.textContent || node.innerText;
};
for(var i=0;i<lis.length;i++){
var index = lis[i].getAttribute('index'); //获取属性节点的值
lis[i].setAttribute('index', i); //设置属性节点的值
};
var nodeType = $('ul').attributes[0].nodeType; //获取节点的类型 元素节点： 1；属性节点： 2；文本节点： 3；文档节点： 9；注释节点： 8；

//操作节点
var input = document.createElement('input'); //创建元素节点
var textNode = document.createTextNode('你们好'); //创建文本节点
var attrNode = document.createAttribute('index'); //创建属性节点
attrNode.value = '123';
$('box').setAttributeNode(attrNode);
//$('box').remove(); //删除节点 在ie中 .removeNode(true)
$('ul').removeChild($('ul').children[0]);
document.body.appendChild(textNode); //插入节点
var clone = $('con').cloneNode([true]); //克隆节点 传入true为深度复制，会把内容也复制过来
document.body.appendChild(clone);
$('box').replaceChild(input, $('con')); //替换节点
function addClass(element,className) { //添加class
element.className += className;
};
function removeClass(element,removeClassName) { //移除class
var classStr = element.className;
element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,'');
}
addClass($('box'), ' haha ei');
removeClass($('box'), 'haha');
}
</script>
</head>
<body>
<div id="box" class="box wo" name="our">
<div id="con">文本节点内容</div>
</div>
<div id="boxs" class="box" name="our"></div>
<div id="inner">文本节点内容<span>123</span></div>
<ul id="ul">
<li index="0"></li>
<li index="1"></li>
<li index="2"></li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航