如何操作和修改网页元素的属性

最编程 2024-02-23 12:53:11

...

webApi的基本认知

作用: 就是使用JS去操作html和浏览器
分类
- DOM
  - 操作html和css
- BOM
  - 操作浏览器
DOM 树
- HTML DOM 定义了访问和操作 HTML 文档的标准方法
- DOM 以树结构表达 HTML 文档
DOM对象(重要)
- 浏览器根据html标签生成的JS对象
  - 所有的标签属性都可以在这个对象上面找到
  - 修改这个对象的属性会自动映射到标签身上

获取DOM对象的方式

document.querySelector

<body>
  <div>
    <a href="" class="mya">我是a</a>
    <h2 id="myh2">我是h2</h2>
  </div>

  <script>
    // 获取a元素
    // 语法：document.querySelector('选择器')，如果没有获取成功，就返回null
    // 只能获取到满足条件第一个元素
    let mya = document.querySelector('a')
    let h2 = document.querySelector('#myh2')
    mya.style.color = 'blue'
    myh2.style.color = 'yellow'
  </script>
</body>

效果：

获取的是满足条件的第一个一定只有一个
获取的是dom元素，可以直接操作
document.querySelectorAll

 <div>
    <span>span</span>
    <span>我也是span</span>
    <a href="" class="mya">我是a <span>张翠花</span></a>
    <h2 id="myh2">我是h2</h2>
  </div>
  <span>我还是span</span>

  <script>
    // 获取所有span
    // 语法：document.querySelectorAll('选择器')：满足获取条件的所有元素，返回一个list数组
    let spans = document.querySelectorAll('span')
    console.log(spans)
    // 获取到的是一个伪数组，并不是一个真正意义上的数组，不能直接调用数组的api
    // spans.push('a')  //push is not a function
    //console.log(spans.style)
    //console.log(spans.style.color)
    
    // spans.style.color='red'
    // 伪数组的操作需要遍历 --重点核心
    for (let i = 0; i < spans.length; i++) {
      spans[i].style.color = 'red'
    }

  </script>
</body>

效果：

获取的是满足条件的所有DOM对象返回的是一个集合
获取的是伪数组，无法直接操作,必须通过下标才能操作，所以我们对伪数组进行遍历
其他了解的
- document.getElementById()
- document.getElementsByTagName()

设置/修改元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.
- 就是操作对象使用的点语法
为标签设置标签之间的内容
innerText
- 只关注内容, 不关注标签
innerHTML
- 可以解析标签
使用: 不明确数据的安全性的情况下, 使用innerText

<body>
    <div>
      <h2>
        我是h2
        <span>aaaa</span>
      </h2>
    </div>
    <script>
      // 1.获取元素
      let h2 = document.querySelector('h2')

      // 设置
      // 2.使用innerText设置标签之间的文本内容,注意内容中有标签不会被解析，会被当成普通字符串处理
      // h2.innerText = '123456<hr>'

      // innerHTML:设置标签之间的文本内容，注意如果内容中有标签，会被解析
      // h2.innerHTML = '123456<hr>'

      // 获取
      // innerText在获取的时候，只获取文本内容，忽略标签
      console.log(h2.innerText)
      // innerHTML获取完整的html结构
      console.log(h2.innerHTML)
    </script>
  </body>

设置/修改元素属性

设置/修改常用（内置）属性
- href、title、src
- 综合案例
  - 图片更换案例
案例：随机点名案例-名字渲染到页面已经有的标签里面
设置/修改元素样式属性
- style操作css
  - 每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
  - 如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中-会被解析成减号）
  - style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
  - 案例：随机背景案例
- 操作类名(className)
  - 由于class是关键字, 所以使用className去代替
  - className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
- classList

<style>
      .red {
        color: red;
      }
      .size50 {
        font-size: 50px;
      }
      .underline {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <button>添加一个字体大小样式</button>
    <button>移除一个字体大小样式</button>
    <button>切换一个字体大小样式</button>
    <button>判断元素是否有某个样式</button>
    <p class="red">我是百变p元素</p>

    <script>
      let p = document.querySelector('p')
      document.querySelector('button').addEventListener('click', function() {
        // classList当前元素的样式名称集合，它是一个伪数组，针对它的add操作不会影响元素之前的样式
        // classList明确的说明是针对于样式名称进行操作所以参数不再添加标记.了
        // add是为元素添加一个样式类名
        p.classList.add('size50')
        // 也可以同时加多个
        p.classList.add('size50', 'underline')
      })
      document
        .querySelectorAll('button')[1]
        .addEventListener('click', function() {
          // remove是为元素移除一个样式类名
          p.classList.remove('size50')
        })
      document
        .querySelector('button:nth-of-type(3)')
        .addEventListener('click', function() {
          // toggle:如果有当前样式就移除，否则就添加
          p.classList.toggle('size50')
        })
      document
        .querySelector('button:nth-of-type(4)')
        .addEventListener('click', function() {
          // contains:判断当前元素是否有某个类名样式
          // 元素.contains('类名')：如果有就返回true,否则返回false
          console.log(p.classList.contains('size50'))
        })
    </script>
  </body>

添加：add(class1, class2, ...)
删除：remove(class1, class2, ...)
切换：toggle(class)
是否包含：contains(class),包含返回true,不包含返回false
- 对比className和style、classList的区别
  - 修改大量样式的更方便
  - 修改不多样式的时候方便
  - classList 是追加和删除不影响以前类名
设置/修改表单属性
- 正常的有属性有取值的跟其他的标签属性没有任何区别
  - 获取: DOM对象.属性名
  - 设置: DOM对象.属性名 = 新值
- 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性
- 常见表单属性
  - value、disabled、checked、selected
- 全选案例

<style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>

    <script>
      // 实现全选和全不选
      // 全选复选框
      let checkAll = document.querySelector('#checkAll')
      // 全选复选框对应的文本内容
      let allText = document.querySelector('.all')
      // 下面的所有复选框
      let cks = document.querySelectorAll('.ck')

      // 1.为全选复选框绑定单击事件，在事件处理函数中
      checkAll.addEventListener('click', function() {
        // 2.获取当前全选复选框的状态： .checked,值为true/false
        let state = checkAll.checked

        // 3.获取下面的所有复选框，将全选的状态值赋值给下面的所有复选框
        cks.forEach(function(ele) {
          // 为下面的复选框设置state属性值
          ele.checked = state
        })

        // 4.设置全选文本：全选、取消
        allText.innerText = state ? '取消' : '全选'
      })

      // 2.为下面的复选框绑定事件：循环cks，获取到每一个复选框绑定事件
      for (let i = 0; i < cks.length; i++) {
        // 为遍历到的复选框绑定事件
        cks[i].addEventListener('click', function() {
          // 判断当前复选框是否被选中，如果被选中，则数量+1
          let cnt = 0
          cks.forEach(function(ele) {
            if (ele.checked) {
              cnt++
            }
          })
          // 判断被选中的复选框的数量和原始数量是否相等
          if (cnt == cks.length) {
            checkAll.checked = true
            allText.innerText = '取消'
          } else {
            checkAll.checked = false
            allText.innerText = '全选'
          }
        })
      }
    </script>
  </body>

定时器-间歇函数

间隔一段时间之后重新执行对应的代码
let timerId = setInterval(回调函数, 间隔时间)
清除定时器
- clearInterval(timerId)
注意点
- 定时器也是需要等待, 所以后面的代码先执行
- 每一次调用定时器,都会产生一个新的定时器
案例：用户倒计时按钮可用

<body>
    <!-- <input type="text" disabled /> -->
    <!-- <button>倒计时5秒钟</button> -->
    <input type="button" value="倒计时5秒钟" />

    <script>
      // 获取按钮，后期要对这个按钮绑定事件，同时要修改按钮的禁用状态
      let btn = document.querySelector('input')

      // 绑定事件
      btn.addEventListener('click', function() {
        let timeId = null
        // clearInterval(timeId)
        // disabled:禁用，将按禁用
        btn.disabled = true
        // 定义一个总时长
        let total = 5
        // 每隔一秒钟重新显示一下信息--定时器
        timeId = setInterval(function() {
          total--
          btn.value = `倒计时${total}秒钟`
          // 如果到0，则应该停止定时器
          if (total == 0) {
            clearInterval(timeId)
            // 重新启用按钮
            btn.disabled = false
            btn.value = `倒计时5秒钟`
          }
        }, 1000)
      })
    </script>
  </body>

上一篇： cjs" 和 "mjs" 文件分别是什么，它们是啥意思？

下一篇：基础NCO与NCL指令指南