1.DOM简介

1.1什么是DOM

  • 文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML
    )的标准编程接口。
  • W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

1.2DOM树

DOM简介以及简单应用_javascript

  • 文档:一个页面就是-个文档, DOM中使用document表示
  • 元素:页面中的所有标签都是元素, DOM中使用element表示
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node示
  • DOM把以上内容都看做是对象

2.获取元素

2.2、01-getElementByld获取元素

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

2.3根据标签名获取

  • 使用getElementsByTagName0方法可以返回带有指定标签名的对象的集合。
<body>
    <ul>
        <li>知否知否，影视等你好久1</li>
        <li>知否知否，影视等你好久2</li>
        <li>知否知否，影视等你好久3</li>
        <li>知否知否，影视等你好久4</li>
        <li>知否知否，影视等你好久5</li>

    </ul>
    <script>
        //返回的是获取过来元素对象的集合以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //遍历li里的元素
        for(var i=0; i<lis.length;i++)
        {
            console.log(lis[i]);
        }
    </script>
</body>
  • 还可以获取某个元素（父元素）内部所有指定标签的子元素
element.getElementsByTagName('标签名');
  • 注意：父元素必须是单个对象（必须指明是哪一个元素对象）,获取的时候不包括父元素自己

    • DOM简介以及简单应用_标签名_02

2.4通过HTML5新增的方法获取

DOM简介以及简单应用_前端_03


DOM简介以及简单应用_html_04

2.5获取特殊元素（body,html）

获取body元素

DOM简介以及简单应用_标签名_05

获取html元素

DOM简介以及简单应用_html_06