DOM小插曲

2018-03-17 本文已影响12人 fenerchen

去掉空白孩子文本

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>

 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>

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）