DOM 获取元素，设置样式

1.节点树

2.节点种类：元素节点、文本节点、属性节点。

3.元素节点方法

　　document.getElementById(); //通过id获取节点，id是唯一

　　document.getElementsByTagName(); //通过元素名获取，返回元素节点结合（类数组）

　　　　  <ul>
            <li>我是1</li>
            <li>我是2</li>
            <li>我是3</li>
        </ul>
        <script>
            var box=document.getElementsByTagName('li');
            alert(box);//[object HTMLCollection]
            alert(box.length);//3
            alert(box[0].innerText);// 我是1
        </script>

　　document.getElementsByName(); //通过相同的name属性获取，返回元素节点集合（类数组）

　　注：ie只支持本身合法的name属性，如input上写的name，不合法的ie不兼容

　　　　 <ul>
            <li name="item">我是1</li>
            <li name="item">我是2</li>
            <li name="item">我是3</li>
        </ul>
        
        <input type="text" name="test" value="11" checked="false"/>
        <input type="text" name="test" value="22"/>
        
        
        <script>
            
            var box=document.getElementsByName('item');
            alert(box.length); //3   ，ie不支持
            alert(box[2].innerText);     // 我是3  ，ie不支持,报错
            
            var b=document.getElementsByName('test');
            alert(b.length);   //2    ie支持
            alert(b[0].value); //11   ie支持
        </script>

document.getElementsByClassName(); //通过class名获取元素，返回元素集合，此方法不是W3c标准的方法，ie8及以下不支持

　　　　 <ul>
            <li class="lis" name="item">我是1</li>
            <li class="lis" name="item">我是2</li>
            <li class="lis" name="item">我是3</li>
        </ul>        
        <script>
            
            var box=document.getElementsByClassName('lis'); //ie8及以下不支持
            alert(box.length);//3
            alert(typeof box);//object
            alert(box[1].innerText);//我是2
        </script>

4.获取属性、设置属性、移除属性

<div id="box" class="mybox" title="标题" style="color:blue;100px;height:50px;border:1px solid #ccc;">内容</div>
                
<script>
            
            var box=document.getElementById('box');

　　　　　　　　　　alert(box.tagName);//DIV ，获取标签名
　　　　　　　　　　alert(box.innerHTML);//内容

//获取、设置id
            alert(box.id);
            alert(box.id="doit")

            //获取、设置title
            alert(box.title);
            alert(box.title="doit");
            
            //获取、设置class
            alert(box.className);
            alert(box.className="doit");
            
            //获取、设置样式
            alert(box.style.color);
            alert(box.style.color="red");
            alert(box.style.width="500px");
            alert(box.style.border="2px dashed orange");
</script>

getAttribute(); 该方法也用于获取元素某个属性的值，它和上面直接获取的方法有一定区别

setAttribute();方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身存在，那么就会覆盖

<script>
            
            var box=document.getElementById('box');
            alert(box.className); //都支持
            alert(box.getAttribute('class')); //ie7不支持，返回null; ie8及chrome，Firefox支持
            alert(box.getAttribute('className'));//ie7支持，ie8及chrome，Firefox不支持,返回null
</script>

<div id="box" class="mybox" title="标题" style="color:blue;100px;height:50px;border:1px solid #ccc;">内容</div>
                
        <script>
            
            var box=document.getElementById('box');
            
            box.setAttribute('style','color:red'); //原html写了style，这里覆盖了原本的style样式，
            box.setAttribute('style','border:1px solid #f00');//覆盖上面的style
            box.setAttribute('style','500px');//再覆盖上面的style，到这步表示div的样式 style只写了width
            box.setAttribute('align','center');
　　　　　　　box.setAttribute('id','abc');

　//在IE7 及更低的版本中，使用setAttribute()方法设置class 和style 属性是没有效果的，虽然ie8解决了这个bug，但还是不建议使用

</script>

removeAttribute(); 用于移除属性，ie6不支持

<div id="box" class="mybox" title="标题" style="color:red;100px;height:50px;border:1px solid #ccc;">内容</div>
                
        <script>
            
            var box=document.getElementById('box');
            box.removeAttribute('class');
            box.removeAttribute('title');
            box.removeAttribute('style');
            
        </script>