<div class="cnblogs_code">
el = document.getElementById('root' console.log(el);
<span style="color: #008000">//<span style="color: #008000"> 遍历dom
<span style="color: #0000ff">function<span style="color: #000000"> dealNode(el) {
<span style="color: #0000ff">var childNodes =<span style="color: #000000"> el.childNodes;
[].slice.call(childNodes).forEach((node)=><span style="color: #000000">{
<span style="color: #0000ff">if(node.nodeType == 1<span style="color: #000000">){
<span style="color: #008000">//<span style="color: #008000">节点元素的属性
<span style="color: #0000ff">var nodeAttrs =<span style="color: #000000"> node.attributes;
console.log(nodeAttrs);
[].slice.call(nodeAttrs).forEach((attr) =><span style="color: #000000"> {
<span style="color: #0000ff">var attrName =<span style="color: #000000"> attr.name;
<span style="color: #0000ff">if<span style="color: #000000">(isDeretive(attrName)){
<span style="color: #0000ff">var exp =<span style="color: #000000"> attr.value;
<span style="color: #0000ff">var dir = attr.name.substring(2<span style="color: #000000">);
console.log('指令类型'<span style="color: #000000">,dir);
console.log('指令的值'<span style="color: #000000">,exp);
<span style="color: #0000ff">if(dir == 'if' && (exp=='false'<span style="color: #000000">)){
node.parentNode.removeChild(node);
}
}
});
}
</span><span style="color: #008000">//</span><span style="color: #008000">节点深层遍历</span>
<span style="color: #0000ff">if</span>(node.childNodes &&<span style="color: #000000"> node.childNodes.length){
dealNode(node);
}
})
}
dealNode(el);
</span><span style="color: #0000ff">function</span><span style="color: #000000"> isDeretive(attr) {
</span><span style="color: #0000ff">return</span> attr.indexOf('r-') == 0<span style="color: #000000">;
}</span></pre>