文本节点属性节点获取元素样式操作元素类名

html5小趴菜

已于 2023-02-01 08:44:17 修改

阅读量68

点赞数

文章标签： javascript 前端 html Powered by 金山文档

于 2023-01-17 21:47:36 首次发布

本文链接：https://blog.csdn.net/mx0102/article/details/128720418

版权

该文详细介绍了如何使用JavaScript操作DOM，包括获取和设置元素的innerHTML和innerText，处理元素的属性节点如getAttribute、setAttribute和removeAttribute，以及H5的自定义属性dataset。此外，还涉及到了元素的样式操作，如获取行内样式和计算样式，以及如何操作元素的类名通过className和classList属性。

摘要由CSDN通过智能技术生成

文本节点(标签内的文字)

innerHTML

innerText

<body>
    <div id="box">
        <!-- <p>
            <span>各位, 早上好~~~</span>
        </p> -->
</body>
        <script>
        var oDiv = document.querySelector('#box')
        console.log(oDiv.innerHTML)
        oDiv.innerHTML = '<p><span>各位, 早上好~~~这个文本是通过JS来设置的</span></p>'
        console.log(oDiv)
        
        oDiv.innerText = '<p><span>各位, 早上好~~~这个文本是通过JS来设置的</span></p>'
        console.log(oDiv.innerText)
<script>

value

<body>
<div>
      
    <button>点击</button>

    <select>
        <option value="10选项">10</option>
        <option value="20选项">20</option>
        <option value="30选项">30</option>
        <option value="40选项">40</option>
    </select>
</body>
<script>
        // 获取元素
        var btn = document.querySelector('button')
        var selectBtn = document.querySelector('select')
     btn.onclick = function () {
  var res = selectBtn.value;
            console.log(res);
        }

属性节点(标签上的属性)

获取元素的属性节点getAttribute

修改元素的属性节点setAttribute

删除元素的某些属性removeAttribute

<body>
    <div class="box" a="QF001"></div>
  </body>
 <script>
        // 0. 获取元素
         var oDiv = document.querySelector('.box')
        var oDiv = document.getElementsByClassName('box')[0]

        /**
         *  1. 获取元素的某些属性
         *      语法: 元素.getAttribute('要查询的属性名')
         *      返回值: 查询到属性时返回对应的属性值, 没有查询到时直接返回 null
        */
         console.log(oDiv.getAttribute('a'))
         console.log(oDiv.getAttribute('class'))
         console.log(oDiv.getAttribute('b'))

        /**
         *  2. 修改元素的某些属性
         *      语法: 元素.setAttribute('对应的属性名', '对应的属性值')
         *      注意: 如果元素没有对应的属性名, 那么相当于是新增一个属性
        */
         oDiv.setAttribute('a', 'QF999')
         oDiv.setAttribute('b', 'qwer')
         oDiv.setAttribute('class', 'new_box')
         console.log(oDiv.getAttribute('a'))

        /**
         *  3. 删除元素的某些属性
         *      语法: 元素.removeAttribute('要删除的属性名')
        */
        oDiv.removeAttribute('class')
        oDiv.removeAttribute('a')

h5自定义属性 dataSet

         <div data-a="100"></div>


 var oDiv = document.querySelector('div')

        // 1. 访问元素的 dataset 属性       查询
         console.log(oDiv.dataset.a) // 100

        // 2. 增加一个 h5 自定义属性
        oDiv.dataset.age = 18   // 标签中没有这个自定义属性, 所以是新增
        oDiv.dataset.a = 'QF666'    // 标签中有这个自定义属性, 相当于做了修改操作

        // 3. 删除
         delete oDiv.dataset.a

        console.log(oDiv)

获取元素样式

行内样式


    <div class="box" style="background-color: red;"></div>

 // 0. 获取元素
        var oDiv = document.querySelector('.box')
// 1. 获取元素样式
         console.log(oDiv.style.width)
         console.log(oDiv.style.height)
console.log(oDiv.style.background-color)    
// 直接这样写相当于写了一个 oDiv.style.background - color, 这是一个错误写法


         console.log(oDiv.style['background-color']) // 中括号语法
         console.log(oDiv.style.backgroundColor) // 驼峰命名

        // 2. 设置元素样式
         oDiv.style.width = 666 + 'px'   // oDiv.style.width = '666px'
         oDiv.style.backgroundColor = 'red'

获取非行内样式

        console.log(window.getComputedStyle(oDiv).width)
        console.log(window.getComputedStyle(oDiv).backgroundColor)

         window.getComputedStyle(oDiv).width = 800 + 'px' // 不允许修改, 会有报错

操作元素类名

className

        /**
         *   className
         *      专门用来操作元素的 类名
         * 
         *  语法: 元素.className
         * 
         *  我们也可以给他重新赋值, 来达到修改元素的类名
        */
   var oDiv = document.querySelector('.box')
       oDiv.className = 'new_box'
       console.log(oDiv.className)
// 追加
        oDiv.className += ' box1'
        console.log(oDiv);

classList

 <div class="a b c d e f"></div>

// 获取元素
        var box = document.querySelector('div')

// classList 
        console.log(box.classList);

        // 添加一个类名
        box.classList.add('box4')

        // 删除
         box.classList.remove('a')

        // 切换
        box.classList.toggle('box5')
        box.classList.toggle('box5')