DOM获取元素

DOM 介绍

文档对象模型（Document Object Model，简称DOM），是 [W3C]组织推荐的处理可扩展标记语言，W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM是W3C组织制定的一套处理html和xml文档的规范，所有的浏览器都遵循了这套标准。可以理解为是一套操作文档的工具箱，通过它可以方便的操作文档。

DOM可以做什么

• 获取文档内容并控制

• 设置标签属性

• 设置标签样式

• 动态创建元素

DOM树

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面

• 几个专有名词 文档 节点 元素

  • 文档：一个页面就是一个文档，DOM中使用document表示

  • 节点：网页中的所有内容，在文档树中都是节点（标签节点、属性节点、文本节点、注释节点）node

  • 元素：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示 标签节点又叫做标签元素

获取元素

• getElementById

  • <div id="container">我是一个div</div>
    <script>
        var con = document.getElementById('container')
    </script>

  • 因为我们的文档页面从上往下加载，所以先得有div标签 所以我们的script写到div标签的下面

  • get 获得 element 元素 by 通过 采用的是驼峰命名法

  • 参数id是大小写敏感的字符串

  • 返回的是一个元素对象或者是null空对象

• getElementsByTagName

  • <div id="container">我是一个div</div>
    <span>我是一个span标签</span>
    <script>
        var con = document.getElementsByTagName('div')
        var spans = document.getElementsByTagName('span')
    </script>

  • 返回的是 获取过来元素对象的集合，以伪数组的形式存储的 tag标签

  • 我们想要依次打印出里面的元素对象 我们可以采取遍历的方式

  • element.getElementsByTagName() 可以得到这个元素里面的某些标签

• H5 新增的方法

  • getElementsByClassName

    • <div class="box">盒子</div>
      <div class="box">盒子</div>
      <div id="nav">
          <ul>
              <li>首页</li>
              <li>产品</li>
          </ul>
      </div>
      <script>
          var boxs = document.getElementsByClassName('box');
      </script>

    • getElementsByClassName('选择器') 根据类名获取某些元素集合 选择器前面不用加符号

  • querySelector

    • <div class="box">盒子</div>
      <div class="box">盒子</div>
      <div id="nav">
          <ul>
              <li>首页</li>
              <li>产品</li>
          </ul>
      </div>
      <script>
      var firstBox = document.querySelector('#nav');
      </script>

    • querySelector('.box') 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav li

  • querySelectorAll

    • <div class="box">盒子</div>
      <div class="box">盒子</div>
      <div id="nav">
          <ul>
              <li>首页</li>
              <li>产品</li>
          </ul>
      </div>
      <script>
      var allBox = document.querySelectorAll('.box');
      </script>

    • querySelectorAll() 返回指定选择器的所有元素对象集合

• 获取body和html两个特殊元素

  • 获取body元素

    • var bodyEle = document.body;

    • 这个script标签放到body里面 放在title下面就是null 找不到body

  • 获取html元素

    • var htmlEle = document.documentElement;

    • 不是简单的 var htmlEle = document.html 这是错误的写法