去掉空白孩子文本
html
<div class='d' id="bb" >
<ul class='ff aa'>
<li class="x" >好dd</li>
<li>的</li>
</ul>
<input type="text" name='ad' value='dd'>
</div>
js
var node=document.getElementsByTagName('div')[0].childNodes;
console.log(node.length)//5
获取div元素下的孩子节点，发现输出长度为5.（IE浏览器8及以下版本输出长度为3）之所以为5，是因为浏览器把div与ul之间的空白、ul与input之间的空白、input与div之间的空白也算上了。
如何去掉这些空白，只保留真正的孩子元素节点呢？睁大眼睛了，哈哈
- 方法1,使用正则表达式，检测空白文本，忽略掉
function filterSpaceNode(nodes) {
var ret = []; //新数组
for (var i = 0; i < nodes.length; i ++) {
//如果识别到空白文本节点，就不添加数组
if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
//把每次的元素节点，添加到数组里
ret.push(nodes[i]);
}
return ret;
}
/^\s+$/.test(nodes[i].nodeValue)表示强制从nodes[i].nodeValue内容的头部开始匹配，尾部结束，头尾中间，全是空格。
nodes[i].nodeType == 3表示，文本节点是类型是3，元素节点类型为1，属性节点类型是2.
- 方法2,使用正则表达式，检测空白文本，移除。
function filterSpaceNode(nodes) {
for (var i = 0; i < nodes.length; i ++) {
if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
//得到空白节点之后，移到父节点上，删除子节点
nodes[i].parentNode.removeChild(nodes[i]);
}
}
return nodes;
}
使用children 属性，可以直接得到有效节点长度，
node.children.length
dom节点操作
- write（）吧任意字符串插入到文档中
document.write('<p>这是一个段落！</p>')'; - createElement(),创建一个元素节点
document.createElement('div'); - appendChild()讲新节点添加到某个节点的子节点列表的末尾上。
var box = document.getElementById('box'); //获取某一个元素节点
var p = document.createElement('p'); //创建一个新元素节点<p>
box.appendChild(p); //把新元素节点<p>添加子节点末尾
- createTextNode()创建文本节点
var text = document.createTextNode('段落'); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾
createElement 在创建一般元素节点的时候，浏览器的兼容性都还比较好。但在几个特殊标签上，比如iframe、input 中的radio 和checkbox、button 元素中，可能会在IE6,7以下的浏览器存在一些不兼容。
var input = null;
if (BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7) {
//判断IE6,7，使用字符串的方式
input = document.createElement("<input type=\"radio\" name=\"sex\">");
} else {
//标准浏览器，使用标准方式
input = document.createElement('input');
input.setAttribute('type', 'radio');
input.setAttribute('name', 'sex');
}
document.getElementsByTagName('body')[0].appendChild(input);
- insertBefore(a,b)把节点a,插入到b前面
box.parentNode.insertBefore(p, box);在父节点的环境下插入。
根据已有知识，封装一个insertAfter()方法。
function insertAfter(newElement, targetElement) {
//得到父节点
var parent = targetElement.parentNode;
//如果最后一个子节点是当前元素，那么直接添加即可
if (parent.lastElementChild=== targetElement) {
parent.appendChild(newElement);
} else {
//否则，在当前节点的下一个节点之前添加
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
- replaceChild(a,b)把b换成a
box.parentNode.replaceChild(p,box); //把<div>换成了<p>·
- cloneNode()方法
cloneNode()方法可以把子节点复制出来。
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); //获取第一个子节点，true 表示复制内容
box.appendChild(clone); `//添加到子节点列表末尾
-
removeChild()方法
removeChild()方法删除子节点
box.parentNode.removeChild(box);//删除指定节点
感
dom中的方法汇总
H5增加了
getElementsByClassName()方法用法
document.getElementById('box'); //获取id 为box 的元素节点,其他类似
用法
document.getElementById('box').tagName; //DIV
document.getElementById('box').nodeName; //DIV
document.getElementById('box').innerHTML; //测试Div,div中的内容
用法
document.getElementById('box').id; //获取id
document.getElementById('box').id = 'person'; //设置id.
document.getElementById('box').nodeType; //1，元素节点
var box = document.getElementById('box'); //获取一个元素节点
alert(box.childNodes.length); //获取这个元素节点的所有子节点
alert(box.childNodes[0]); //获取第一个子节点对象
针对上述层次节点属性，对于不同浏览器（IE9之前版本）在使用childNodes和firstChild属性等时的行为不一致，（空白文档节点认为是孩子）。规范又重新定义了一组属性，利用这些属性，不必担心空白文本节点，可以很方便的查找DOM元素了。
| 属性 | 功能 |
|---|---|
| childElementCount | 返回子元素的个数（不包括文本节点的注释） |
| firstElementChild | 指向第一个子元素，firstChild的元素版 |
| lastElementChild | 指向最后一个子元素，lastChild元素版 |
| previousElementSibling | 指向前一个同辈元素，previousSibling版本 |
| nextElementSibling | 指向后一个同辈元素，nextSibling版本 |
html
<body>
<div class='d' id="bbd" >
<ul class='ff aa'>
<li class="x" id="bb">好dd</li>
<li>的</li>
</ul>
<input type="text" name='ad' value='dd' checked="checked">
</div>
</body>
js
var div=document.querySelector('#bbd');
var oldLen=div.childNodes.length;
var newLen=div.childElementCount;
console.log(oldLen+':'+newLen);//5:2
过去跨浏览器查找遍历元素的孩子
var div=document.querySelector('#bbd');
function searchChildren(element){
var i,
len,
children=[],
child=element.firstChild;//元素的整体代表，例如ul.ff.aa
while(child!=element.lastChild){//也可使用while（child）
if(child.nodeType===1){
children.push(child);//若只要元素节点名，则将child.nodeName;入栈
}
child=child.nextSibling;
}
return children;
}
console.log(searchChildren(div));//[ul.ff.aa, input]
现在使用新增规范，代码会更简洁
var div=document.querySelector('#bbd');
function searchChildren(element){
var i,
len,
children=[],
child=element.firstElementChild;//元素的整体代表，例如ul.ff.aa
while(child){
children.push(child);//若只要元素节点名，则将child.nodeName;入栈
child=child.nextElementSibling;
}
return children;
}
console.log(searchChildren(div));//[ul.ff.aa, input]
HTML5
getElementsByClassName('类名’)
接受一个参数，该参数为包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入类名的顺序不重要。
var classList=document.getElementsByClassName('aa ff bb');
console.log(classList);//HTMLCollection(2) [ul.ff.aa.bb, li.ff.aa.bb]
classList属性（Firefox3.6+ chrome）
通过classname属性，添加、删除、替换类名。className中是一个字符串，我们想要删除某个类名，比较麻烦，请看：
html
<div class='ff aa bb gg' id="bbd" ></div>
要删除bb类名，老式操作。
var className=document.getElementById('bbd').className;
// console.log(className)//'ff aa bb gg'
function removeClassName(className,needRemove){
var len=className.length,
classNameArr=className.split(/\s+/);//字符串拆成数组
for(let i=len;i>0;i--){
if(classNameArr[i]===needRemove){
classNameArr.splice(i,1);//删除该元素
break;
}
}
className=classNameArr.join(' ');//把数组元素用空格连城字符串
return className;
}
console.log(removeClassName(className,'bb'))//ff aa gg
使用classList属性下的方法，在做删除，显得极为简单，首先了解一下相关方法
| 方法 | 功能 |
|---|---|
| add(value) | 将给定的字符串添加到列表中，若值已经存在，就不添加了。 |
| contains(value) | 列表中是否存在给定的值，存在返回true，否则返回false |
| remove(value) | 从列表中删除给定的字符串 |
| toggle(value) | 如果列表中已经存在给定的值，删除它，否则添加他 |
现在只需一行
var div=document.getElementById('bbd');
div.classList.remove("bb")
console.log(div.className)//ff aa gg
tagName和nodeName属性的区别
tagName只能在元素标签上使用，而nodeName则可以在所有的节点上使用。nodeName比tagName的应用范围更广
//html
<p id="description">描述</p>
//js
var d = document.getElementById('description');
console.log(d.childNodes[0].nodeValue)//描述
console.log(d.childNodes[0].nodeName)//#text
console.log(d.childNodes[0].tagName)//undefined
console.log(d.tagName)//P
console.log(d.nodeName)//P
参考资料：JS（3）
网友评论