DOM

什么是DOM？

    http://www.runoob.com/htmldom/htmldom-access.html
       通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

1.获取元素

 <script>
        //根据id获取元素，因为id是唯一的，所以只返回一个dom对象
        var temp1 = document.getElementById('btnShow');
        //name是可以重复的，所以返回一个dom对象数组
        var temp2 = document.getElementsByName('btnShow');
        
        //访问属性
        temp1.value = '显示当前时间';

2.事件

   在元素上注册事件
        <input type="button" id="btnShow1" value="显示1" onclick="alert(this.value);"/>
        <br/>
        动态注册：
        <input type="button" id="btnShow2" value="显示2"/>

        <script>
            //推荐使用这种方式注册事件
            //好处：实现了代码分离（html与js）;可以使用this
            document.getElementById('btnShow2').onclick= function() {
                alert(this.value);
            }
        </script>

3.加载完成事件

 <script>
        //页面中的所有节点加载完成后，会触发此事件
        onload = function () {
            //当节点存在后，找到并注册点击事件
            document.getElementById('span1').onclick = function() {
                alert('ok');
            };
        };
    </script>

4.动态操作元素

 <script>
        onload = function() {
            //追加图片
            document.getElementById('btnImg').onclick = function() {
                //创建img对象
                var img = document.createElement('img');
                //通过属性src指定要显示的图片
                img.src = 'images/bird1.png';
                //在div中追加图片对象
                document.getElementById('divContainer').appendChild(img);
            };
            //追加文本框
            document.getElementById('btnText').onclick = function() {
                //创建input对象
                var input = document.createElement('input');
                //设置属性
                input.type = "text";
                //加入div中
                document.getElementById('divContainer').appendChild(input);
            };
            //追加超链接
            document.getElementById('btnA').onclick = function() {
                //创建a对象
                var a = document.createElement('a');
                //设置属性
                a.href = '10Event.html';
                a.innerHTML = '点击显示';
                //加入div中
                document.getElementById('divContainer').appendChild(a);
            };
            
            //删除所有元素
            document.getElementById('btnRemove').onclick = function() {
                //获取所有子元素
                var childs = document.getElementById('divContainer').childNodes;
                //遍历子元素，逐个删除
                for (var i = childs.length-1; i >=0; i--) {
                    document.getElementById('divContainer').removeChild(childs[i]);
                }
            };
        };
    </script>