(5).attributes属性
属性返回该节点的属性节点集合;
alert(document.getElementById('box').attributes); // =>NamedNodeMap;
(6).忽略空白文本节点
var body = document.getElementsByTagName('body')[0];// 获取body元素节点; alert(body.childNodes.length); // 非IE=7; IE=3; // PS:在非IE中,标准的DOM具有识别空白文本节点的功能,而IE自动忽略了; function filterSpaceNode1(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; } // PS:上面的方法,采用忽略空白文件节点的方法,把得到的元素节点累加到数组里返回; function filterSpaceNode2(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; } // PS:firstChild等方法在获取节点时遇到空白节点,处理方法; function removeWhileNode(nodes){ for(var i=0; i<nodes.childNodes.length; i++){ if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){ nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]); } } return nodes; }
四 节点操作
// DOM不单单可以查找节点,也可以创建节点/复制节点/插入节点/删除节点和替换节点
节点操作方法
方法 说明
write() 这个方法可以把任意字符串插入到文档中;
createElement() 创建一个元素节点;
appendChild() 将新节点追加到子节点列表的末尾;
createTextNode() 创建一个文件节点;
insertBefore() 将新节点插入在前面;
replaceChild() 将新节点替换旧节点;
cloneNode() 复制节点;
removeChild() 移除节点;
(1).write()方法
// write()方法可以把任意字符串插入到文档中去;
document.write('<p>这是一个段落!</p>'); // 解析后文字;
(2).createElement()方法
createElement()方法可以创建一个元素节点;
document.createElement('p'); // [object HTMLParagraphElement];
(3).appendChild()方法
appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上;
var box = document.getElementById('box');
var p = document.createElement('p'); // 创建一个新元素节点<p>;
box.appendChild(p); // 把新元素节点<p>添加子节点末尾;
(4).createTextNode()方法
该方法创建一个文本节点;
var text = document.createTextNode('段落');
p.appendChild(text); // 将文本节点添加到子节点末尾;
(5).insertBefore()方法
// 该方法可以把节点添加到指定节点的前面; box.parentNode.insertBefore(p,box); // 在<div>之前添加一个<p>; box.insertBefore(newNode,null); // 将newNode添加到box自列表的最后节点; //PS:insertBefore()方法可以给当前元素的前面创建一个节点,但没有提供给当前元素的后面创建一个节点; function insertAfter(newElement,targetElement){ // 得到父节点; var parent = targetElement.parentNode; // 如果最后一个子节点是当前元素,那么直接添加即可; if(parent.lastChild === targetElement){ parent.appendChild(newElement); }else{ // 否则,在当前节点的下一个节点之前添加;达成在当前节点后面添加节点的需求; parentNode.insertBefore(newElement,targetElement.nextSibling); } }
(6).replaceChild()方法
该方法可以把节点替换成指定的节点;
box.parentNode.replaceChild(p,box); // 把<div>换成了<p>;
(7).cloneNode()方法
// 该方法可以把子节点复制出来;复制后返回的节点副本属于文档所有,但并没有为它指定父节点;
// 参数为true:执行深复制,就是复制节点及其整个子节点树;
// 参数为false:执行浅复制,只复制节点本身;
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); // 获取第一个子节点,true表示复制内容;
box.appendChild(clone); // 添加到子节点列表末尾;
(8).removeChild()方法
该方法删除指定节点;
box.parentNode.removeChild(box);
小结:在下一章~
您可能感兴趣的文章: