Dom获取属性操作

网站装修工

已于 2022-06-30 10:14:01 修改

阅读量1.1k

点赞数

分类专栏： webapi 文章标签：前端

于 2022-06-29 20:11:03 首次发布

本文链接：https://blog.youkuaiyun.com/liubibaoo/article/details/125528138

版权

webapi 专栏收录该内容

4 篇文章

订阅专栏

本文主要介绍了DOM操作中的属性操作，包括使用document.querySelector和querySelectorAll选择元素，innerText与innerHTML的区别，元素属性的修改，样式属性操作，className与classList的使用，表单元素属性的控制，自定义属性的获取，以及定时器的间歇函数在顺序轮播图中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.document.querySelector

2.document.querySelector

3. innerText 和 innerHTML

DOM（Document Object Model——文档对象模型）是浏览器提供的一套专门用来操作网页内容的功能

DOM树描述网页内容关系的名词文档树直观的体现了标签与标签之间的关系

DOM对象 : 游览器根据html标签生成的JS对象

所有标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

1.document.querySelector

匹配的是第一个元素如果没有匹配到，则返回null。

可以直接操作修改

语法:

2.document.querySelector

获取到的是一个伪数组 ,没有获取到是一个空数组伪数组里面的元素才是我们要的DOM对象

之所以是伪数组,因为不能添加删除里面的内容

需要通过数组的下标进行修改

语法 :

列如 :

3. innerText 和 innerHTML

只针对与双标签

innerText 只针对文本 ,不解析标签

innerHTML 针对文本又可以解析标签

4.操作元素属性

1.操作常用属性

语法 :

<body>
    <a href="http://www.baidu.com">百度</a>
    <script>
        const a = document.querySelector('a')
        console.log(a);
        a.href = 'http://www.mi.com'
        a.innerHTML = '小米'
    </script>
</body>

2.操作样式属性

如果属性有-连接符，需要转换为小驼峰命名法

赋值的时候，需要的时候不要忘记加css单位

语法 :

<body>
    <div class="box">hello</div>
    <script>
        const box = document.querySelector('.box')
        box.style.color = 'red'
        box.style.height = '200px'
        box.style.width = '200px'
        // -用小驼峰书写
        box.style.backgroundColor = 'green'
        box.style.textAlign = 'center'

    </script>
</body>

3.className 操作

DOM对象.className = '类名' 不要加点

注意: 使用会把之前的类名覆盖 ,要想保留需要把之前的元素带上

语法:

<style>
        .red {
            color:green;
            font-size: 40px;
        }
        .box {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box">hello</div>
    <script>
        const box = document.querySelector('.box')
        box.className = 'box red'
    </script>

4.classList 操作

语法:

5. 操作表单元素属性

语法 :

复选框

input checked属性值勾选上为设置为 true

button disabled 禁止提交为true

<body>
    <input type="checkbox">
    <button>提交</button>
    <script>
        const input = document.querySelector('input')
        // 复选框checked属性值
        // 勾选为 true
        input.checked = true

        const btn = document.querySelector('button')
        // 禁止提交 为true
        // disabled
        btn.disabled = true
    </script>
</body>

6.自定义属性

在html5中推出来了专门的data-自定义属性

在标签上 一律以data- 开头

在DOM对象上一律

以dataset对象方式获取

<body>
    <!-- 自定义属性 data-xx=''  -->
    <div class="box" data-one="10" data-two="20" data-three="30"></div>
    <script>
        // dom对象.dataset.xxx
        const box = document.querySelector('.box')
        console.log(box.dataset.one,box.dataset.two,box.dataset.three);
    </script>
</body>

7.定时器-间歇函数

开启定时器 :

函数名字 不需要加括号

定时器返回的是一个id数字

<script>
        // 用匿名函数

        let i = 1
        setInterval(function(){
            document.write(i)
            i++
        } , 1000)



        // 不使用匿名函数 ,定时函数调用函数不加()
        setInterval(fn,1000)
    </script>

关闭定时器:

停止定时函数用 clearInterval(定时器标识)

定时函数有一个返回值 ,就是定时器标识

<body>
    <script>
        // 停止定时函数 用  clearInterval(定时器标识)
        // 定时函数有一个返回值 ,就是定时器标识
        let i = 1
        let time = setInterval(function(){
            document.write(i)
            i++
            if(i >6) {
                clearInterval(time)
            }
        },1000)
    </script>

顺序轮播图

                    // 定时切换图片
      const img = document.querySelector('.slider img')
      const p = document.querySelector('.slider p')
      const color = document.querySelector('.slider-footer')
      const li = document.querySelectorAll(' .slider-indicator li')
    // 准备一个变量 ,因为开始有一张图片 ,所以用1
    let i = 1
    setInterval(function(){
      if ( i  > arr.length-1) {
        i = 0
      }
      console.log(i);
      
      // 更换图片
      img.src = arr[i].url
      // 更换文本
      p.innerHTML = arr[i].title
      // 更换颜色
      color.style.backgroundColor = arr[i].color

      // 将上一个带active 的的类名删除
      document.querySelector('.slider-indicator li.active').classList.remove('active')
      li[i].classList.add('active')
      i++
    }, 500)
  </script>

Dom获取 属性操作

1.document.querySelector

2.document.querySelector

3. innerText 和 innerHTML

4.操作元素属性

1.操作常用属性

2.操作样式属性

3.className 操作

4.classList 操作

5. 操作表单元素 属性

6.自定义属性

7.定时器-间歇函数

顺序轮播图

Dom获取属性操作

5. 操作表单元素属性