DOM操作属性

DOM操作属性
我们各种获取元素的方式获取到页面中的标签以后
我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

    1.innerHTML: 获取元素内部的 HTML 结构
    <div>
    <p>
        <span>hello</span>
    </p>
    </div>
    <script>
    获取内部的HTML结构
    var div = document.querySelector('div')

    获取后可以设置元素的内容
    div.innerHTML = '<p>hello</p>'
    var res = div.innerHTML = '<p>hello</p>'
    console.log(res);
    /script>

    2. innerText
    获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）


    3.getAttribute：获取元素的某个属性（包括自定义属性）
    例如：
    <div a="100" class="box"></div>
    <script>
        var div = document.querySelector('div')
        console.log(div.getAttribute('a')) // 获取到的就是100
        console.log(div.getAttribute('class')) // 它获取到的就是box
    

    4. setAttribute ：给元素设置一个属性（ 包括自定义属性）

    例如，我现在要设置这个div的属性
        <div></div>
        <script>
        var div = document.querySelector('div')
        div.setAttribute('a', 100)
        div.setAttribute('class', 10000)
        console.log(div);
       它的结果就是
       <div a="100" class="10000"></div>



    5. removeAttribute  直接移除掉某个属性，和上面的用法一样。
    自定义属性 就是 为了 方便我们区分元素/给元素做个标记
    dv.setAttribute('index',1)  (修改/设置属性)
    参数1 是要设置的属性名  参数2 是要设置的属性值  

    console.log(dv.getAttribute('index'))
    参数是要获取的那一个属性的属性名

    dv.removeAttribute('index')
    参数是要移除的那一个属性的属性名


    6. style
    div.style.属性
    专门用来给元素添加 css 样式的，添加的都是行内样式

    例如：
    <div></div>
    我现在要给它修改属性了
    <script>
      var div = document.querySelector('div')
         div.style.width = "100px"
      div.style.height = "100px"
      div.style.backgroundColor = "pink"
      console.log(div) 


    7.className  :专门用来操作元素的 类名的
    例如： 
    <div class="box"></div>

    <script>
      var div = document.querySelector('div')
         div.className = 'test'
      console.log(div) 
    <script>
    结果就是 ：<div class="test"> </div>
    在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖