JavaScript DOM操作基础：节点类型与元素查找方法详解

<div title="属性节点">测试Div</div>

     var box=document.getElementById('box');           //获取id为box的元素节点
     alert(box);

   window.onload=function(){
        //这里存放当网页所有内容都加载完毕后，再执行的代码
    };

   window.onload=function(){
        var box=document.getElementById('box');                //预加载html后执行

        alert(box);
    };

   if(document.getElementById){     //判断是否支持getElementById
        alert('但前浏览器支持getElementById');
    }

 window.onload=function(){
     if(document.getElementById){
               var box=document.getElementById('box');
               alert(box);
      }else{
               alert('浏览器不兼容，请更换浏览器');
      }
};

document.getElementById('box').tagName;         //获取这个元素节点的标签名 输出DIV

document.getElementById('box').innerHTML;       //获取这个元素节点里面的文本（包含HTML标签）

window.onload=function(){
    var box=document.getElementById('box');
    alert(box.id);                   //获取这个元素节点id属性的值，注意；不是属性节点
    alert(box.title);                //获取title属性的值
    alert(box.style);              //获取style属性对象
    alert(box.style.color);     //获取style属性对象中的color属性的值
    alert(box.className);   //获取class属性的值   
};

var box=document.getElementById('box');

box.id="KKK";

box.innerHTML="玩转<strong>JS</strong>";         //赋值，可以解析HTML，不是单独的文本（包含HTML标签）。

document.getElementsByTagName('*');              //获取所有元素

window.onload=function(){
     var li=document.getElementsByTagName('li');    //参数传递一个标签名即可
     alert(li);                             //返回一个数组集合，HTMLCollection
     alert(li.length);                  //返回数组的个数
     alert(li[0]);                        //HTMLliElement，返回数组的第一个
     alert(li.item(0));                //返回数组的第一个
     alert(li[0].tagName);        //输出第一个LI标签
     alert(li[0].innerHTML);    //输出第一个<li>标签的文本：即1
};

window.onload=function(){
   //获取body节点对象
   var body=document.getElementsByName('body')[0];
   alert(body);            //返回HTMLBodyElement对象，body节点
};

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta/>
  <title>DOM基础</title>  
 </head>
 <body>
    <div  id="box" title="标题" class="pox" style="color:red">测试Div</div>
    <input name="test" type="checkbox" value="测试" checked="checked">
          <ul>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
 </body>
 <script type="text/javascript" src="demo.js"></script>
</html>

window.onload=function(){
      var input=document.getElementsByName('test')[0];
      alert(input.value);                      //输出：测试
      alert(input.checked);                 //输出：true
};

window.onload=function(){
   var box=document.getElementById('box');
   alert(box.bbb);                            //自定义，W3C不合法，只有IE浏览器支持
   alert(box.getAttribute('style'));    //非IE返回的是style字符串，IE返回的是对象，这里有个不兼容的问题
   alert(box.getAttribute('bbb'));     //自定义，所有浏览器都兼容
};

window.onload=function(){
   var box=document.getElementById('box');
   box.setAttribute('title','标题');                     //创建一个属性和属性值
   box.setAttribute('align','center');                    //设置居中
   box.setAttribute('bbb','ccc');                       //设置自定义的属性和值
};

window.onload=function(){
   var box=document.getElementById('box');
   box.removeAttribute('style');        //移除属性
};