学习笔记：javascript 关于DOM

今天学习了DOM(文档对象模型)，以下是相关笔记：

比如，在HTML页面中有这样一行代码

<div id="a">淘宝</div>

节点分为三种：

1.标签节点  （比如 div）

2.文本节点   （比如 淘宝）

3.属性节点    （a）

需要把getElementById()写到html文件的最后面，或者可用onLoad 事件，具体如下：

window.onload=function(){
alert(window.document.getElementById('a'));
};

alert(a.tagName);    //获取元素节点的标签名

alert(a.innerHTML);  //获取元素节点里的文本

下面用到的HTML页面的代码如下：

<div class="testclass" id="box" style="color:olive; font-size:24px;">
 <p>淘宝官网</p>
 <p>百度一下</p>
 <p>新浪微博</p>
</div>
<span>ends</span>

 var box=window.document.getElementById('testId');
  alert(box.childNodes.length);               // 第一个节点所有浏览器均认为是空白内容#text
      alert(removeWhiteNode(box).childNodes.length);
    
//移除空白节点   //这里的函数竟让没用
    
    function removeWhiteNode(node){
          for(var i=0;i<node.childNodes.length;i++){
               if(node.childNodes[i].nodeType===3 &&/^s+$/.test(node.childNodes[i].nodeValue)){
                   node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
               }
              }
              return node;
        }
        
        document.write('<p>woyaotianjiede</p>');//之前的会被覆盖掉

      box.appendChild(p);
    
    var test=document.createTextNode('hushuode');
    //p.appendChild(test);                      //这里是三种添加方式
    //box.appendChild(test);
    //document.getElementByTagName('body')[0].appendChild(p);

//在div 之后span之前添加

    box.parentNode.insertBefore(p,box);
    
    insertAfter(p,box);
    function insertAfter(newElement,targtElement){
          var parent=targtElement.parentNode;
          parent.insertBefore(newElement,targtElement.nextSibling);
         // parent.appendChild(newElement,targtElement);
        }

添加单选框

var bo=document.getElementsByTagName('body')[0];
    var input=document.createElement('input');
    input.setAttribute('type','radio');
    bo.appendChild(input);