DOM

Jason199
52 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

 DOM

Document Object Model 文档对象模型

      一套操作页面元素的属性和方法

了解 DOM

    DOM 是以树状结构存在的内容

       DOM 的顶级是 document 表示当前文档

      在 PC 端, document 上面还有一个 window

对 DOM 的操作

      从 document ~ 各种标签, 文本, 属性, 样式 的操作

获取 DOM 元素

        通过 JS 获取到页面中的元素, 进行操作

         1. 非常规标签

            1-1. html

              document.documentElement

            1-2. head

             document.head

            1-3. body

            document.body

  2. 常规标签

            不是不能获取非常规标签, 只是一般不这么用

            2-1. getElementById()

              使用方法: 查找范围.getElementById('id 名称')

            查找范围: document 或者一个 元素

            2-2. getElementsByTagName()

              使用方法: 查找范围.getElementsByTagName('标签名')

            2-3. getElementsByClassName()

             使用方法: 查找范围.getElementsByClassName('类名')

            2-4. getElementsByName()

            使用方法: 查找范围.getElementsByName('元素 name 属性的值')

            2-5. querySelector()

              使用方法: 查找范围.querySelector('选择器')

    2-6. querySelectorAll()

              使用方法: 查找范围.querySelectorAll('选择器')

            特点: 5 和 6 IE 低版本不支持

           

元素的属性

      id / class / style / src / type / name / href / border / ... 叫做原生属性

        style 是属性名, 这个属性的作用就是给元素设置内联样式

      index / abc / aaa / ... 自定义属性

        不是标签原生自带的属性, 是我们自己随便书写的一个属性

      data-xxx 开头的属性

        我们都叫做 H5 自定义属性

操作元素属性

        使用 JS 语法操作标签上的三种属性

          1. 原生属性

            直接操作

          元素.属性名

          2. 自定义属性

          setAttribute()

        getAttribute()

        removeAttribute()

          3. H5 自定义属性

        元素.dataset.xxx

 原生属性

        使用方法: 元素.属性名

          读: 元素.属性名

            获取元素该属性的值

      写: 元素.属性名 = '值'

          设置该元素的该属性的值

        注意: class 除外, 操作 类名使用 元素.className

 // 1. 原生属性    //给 div 设置一个 id 属性    div.id = 'box'    // 读取 div 身上的 id 属性     console.log(div.id)    console.log(div)    // 给 input 设置一下 type 属性   inp.type = 'password'    inp.value = 'hello world'

自定义属性

      不能直接点语法操作

        三种方法

          1. setAttribute('属性名', '属性值')

            给元素标签上设置属性

          2. getAtrribute('属性名')

            获取元素上的属性的值

          3. removeAttribute('属性名')

          删除元素上的属性

      特点:

          1. 可以操作自定义属性, 可以操作原生属性

          2. 不管你设置什么数据类型, 当你再次从标签上拿到的时候, 都是字符串

  // 设置自定义属性   
  div.setAttribute('index', 100)   
  div.setAttribute('id', 'box')  
  // 获取自定义属性     
  var str = div.getAttribute('index')  
  console.log(str)
  // 删除自定义属性 
  div.removeAttribute('abc')

   //html部分
   <div data-a="100"></div>
  <input type="text">
  <img src="" alt="">  
  //js部分var div = document.querySelector('div')； 
  var inp = document.querySelector('input')； 
  var img = document.querySelector('img')；

DOM 是 js 比较重要的部分，由于这里涉及到 html 和 css 的操作，所以一定要努力学习好这里，后面我会讲到 DOM 是如何操作父元素以及其他元素的 ，希望能够帮助到大家更好的理解 DOM.

avatar
文章
阅读
粉丝