Web-API-day1 DOM 文档对象模型

Web API之DOM对象操作

原创已于 2025-07-06 20:47:38 修改 · 494 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2025-07-02 23:52:16 首次发布

获取DOM对象

1.querySelector(") 满足条件第一个元素

2.querySelectorAll(") 满足条件的元素集合返回伪数组

3.了解其他方式

1）getElementById

2)getElementByTagname

操作元素内容

修改DOM文本内容

1)innerText 将文本内容添加/更细到任意标签位置，文本包含的标签不会被解析

2)innerHTML 将文本内容添加/更细到任意标签位置，文本包含的标签会被解析

操作元素属性

常用属性修改

<body>
  <img src="./images/1.webp" alt="">
  <img id="second-img" src="./images/2.webp" alt="">
  <script>
      const img = document.querySelector('img');
      img.src = `./images/2.webp`;

      const img1 = document.querySelector('#second-img');
      img1.src = `./images/1.webp`;
  </script>
</body>

style属性修改

对象.style.样式属性 =值

<body>
  <div class="box">我是个一枚小帅锅</div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    box.style.color = 'red'
    //2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
    box.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    box.style.backgroundColor = 'blue'
  </script>
</body>

通过操作类名className修改样式

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: black;
    }

    .nav {
      color: red;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div class="nav">123</div>
  <script>
    // 1. 获取元素
    const div = document.querySelector('div')
    // 2.添加类名  class 是个关键字 我们用 className
    div.className = 'nav box'
  </script>
</body>

通过classList操作类控制CSS

  <style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }
    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="dog">一只狗</div>
  <script>
    const dog =  document.querySelector('.dog')
    // 2.1 追加类 add() 类名不加点，并且是字符串
    dog.classList.add('active')
    // 2.2 删除类  remove() 类名不加点，并且是字符串
    dog.classList.remove('active')
    // 3 切换类 toggle() 有还是没有啊，有就删掉，没有就加上
    dog.classList.toggle('active')
  </script>
</body>

操作表单属性

获取:DOM对象.属性名

设置:DOM对象.属性名= 新

    <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" id="" class="agree">
    <script>
        // 1. 获取元素
        let input = document.querySelector('input')
        // 2. 取值或者设置值  得到input里面的值可以用 value
        // console.log(input.value)
        input.value = '手机'
        input.type = 'password'

        // 2. 启用按钮
        let btn = document.querySelector('button')
        // disabled 不可用   =  false  这样可以让按钮启用
        btn.disabled = false
        // 3. 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = false
    </script>

自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：

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

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

<div data-id="1"> 自定义属性 </div>
    <script>
        // 1. 获取元素
        let div = document.querySelector('div')
        // 2. 获取自定义属性值
         console.log(div.dataset.id)
      
    </script>