掌握DOM：HTML与JavaScript操作文档对象模型详解-优快云博客

DOM

什么是DOM？
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

① 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口。

② 对于HTML，DOM使得HTML形成一棵DOM树，包括文档、元素、节点。我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型。

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

获取元素(document getElementById)

使用getElementById()方法可以获取带有ID的元素对象
根据标签名获取获取大量的标签
通过getElementTagName() 方法可以返回带有指定标签名的对象的集合

还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName(‘标签名’)
注意父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己。


    <div id = 'time' style="width: 100px;height: 100px;">张三</div>

    <ul>
        <li>春风吹又生1</li>
        <li>春风吹又生2</li>
        <li>春风吹又生3</li>
        <li>春风吹又生4</li>
        <li>春风吹又生5</li>
    </ul>

    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <script>
        //因为我们的文档页面从上往下加载，所以先得有标签 所以我们script写到标签下面
        //get 获得 element 元素 by 通过 驼峰命名法
        //参数 id是大小写敏感的字符串
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //console.dir  打印我们返回的元素对象 更好的查看里面是属性和方法
        console.dir(timer);

        //根据标签名获取  获取大量的标签  getElementsByTagName()
        //返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        //因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
        //得到的元素对象是动态的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //我们想依次打印里面的元素对象我们可以采用遍历的方式
        for(var i = 0;i < lis.length;i++){//12webAPIs.html:88 HTMLCollection(5) [li, li, li, li, li]
            console.log(lis[i]);
        }
        //3.如果页面中只有一个<li> 返回的还是伪数组
        //4.如果页面中没有这个元素返回的空的伪数组。HTMLCollection []
        //5. element.getElementsByTagName('标签名')
        // var ol = document.getElementsByTagName('ol');//[ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol')
        console.log(ol);
    </script>