设置/修改DOM元素

设置/修改DOM元素内容

元素innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，文本中包含的标签不会被解析

  <div class ="box">123</div>
  <div id ="box">abc</div>
  <script>
   //  获取元素
  let div = document.querySelector('.box')
  // 修改div内容
  // 获取内容
  console.log(div.innerText)
  console.log(div.innerHTML)
  // 设置内容
  div.innerText = 'innerText'
  console.log(div.innerText)
  console.log(div.innerHTML)

  div = document.querySelector('#box')

  div.innerText = `innerText <p>段落1</p>`
  console.log(div.innerText)
  console.log(div.innerHTML)

  </script>

元素.innerHTML 属性

将文本内容添加/更新到任意标签位置

能识别文本，文本中包含的标签会被解析，多标签建议使用模板字符

  <div class ="box">123</div>
  <div id ="box">abc</div>
  <script>
   //  获取元素
  let div = document.querySelector('.box')
  // 修改div内容
  // 获取内容
  console.log(div.innerText)
  console.log(div.innerHTML)
  // 设置内容
  div.innerHTML = 'innerHTML'
  console.log(div.innerText)
  console.log(div.innerHTML)

  div = document.querySelector('#box')

  div.innerHTML = `innerHTML <p>段落2</p>`
  console.log(div.innerText)
  console.log(div.innerHTML)

  </script>

设置/修改DOM元素属性

操作元素常用属性

通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

最常见的属性比如： href、title、src 等

语法：

对象.属性 = '值'

  <div class ="box" title="hahahaha">123</div>
  <img src="./images/1.webp" alt="">
  <script>
  //  获取元素
  const div = document.querySelector('div')
  // 修改属性
  div.title = '修改title属性'
  div.id = 'box2'
  // 获取属性值
  console.log(div.title)

  // 获取元素
  const img = document.querySelector('img')
  // 获得随机数
  const num = Math.floor( Math.random() * 6 ) + 1
  // 修改属性值
  img.src = `./images/${num}.webp`
  </script>

操作元素样式属性

通过 style 属性操作CSS

语法：

对象.style.样式属性 = '值'

注意：

1. 修改样式通过style属性引出,值为字符串
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值的时候，需要的时候不要忘记加css单位

<div class ="box" title="hahahaha">
    文本节点
    <p>p标签</p>
  </div>
  <script>
  //  获取元素
  const div = document.querySelector('div')
  // 修改样式:操作样式
  // 注意：style不要去获取
  div.style.background = 'red'
  div.style.width = '200px'
  div.style.height = '200px'
  div.style.color = '#fff'
  div.style.fontSize = '20px'
  div.style.textAlign = 'center'
  div.style.border = '5px solid green'
  div.style.textShadow = '10px 10px 4px #ff0'
  </script>

操作类名(className) 操作CSS

语法：对象.className = '类名'

注意：

1. 由于class是关键字, 所以使用className去代替
2. className是使用新值换旧值, 直接使用 className 赋值会覆盖以前的类名,如果需要添加一个类,需要保留之前的类名

<style>
    .box {
      color: green;
      border: 1px solid rgb(39, 182, 56);
    }
    .box2 {
      color: red;
      border: 1px solid rgb(211, 25, 25);
    }
  </style>

  <div class ="box" title="hahahaha">
    文本节点
    <p>p标签</p>
  </div>
  <script>
  //  获取元素
  const div = document.querySelector('div')
  // 修改类名 
  // class->className
  // div.className = 'box2'
  // 清除类名
  div.className = ''

  </script>

通过 classList 操作类控制CSS

语法：

• 添加类名:

  对象.classList.add('类名')

• 删除类名:

  对象.classList.remove('类名')

• 切换类名：有就删除，没有就添加

  对象.classList.toggle('类名')

• 查看类名:是否包含类名 返回boolean

  对象.classList.contains('类名')

  <script>
  //  获取元素
  const div = document.querySelector('div')
  // 添加类名 
  div.classList.add('box2') 
  // 删除类名
  div.classList.remove('box2') 
  // 切换类名：有就删除，没有就添加
  // div点击事件
  div.addEventListener('click', function () {
    this.classList.toggle('box2') 
  })
  // 查看类名:是否包含类名 返回boolean
  console.log(div.classList.contains('box2'))

  </script>

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的 跟其他的标签属性没有任何区别

获取: DOM对象.属性名

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

  <input type="text" value="123">
  <script>
    // 获取元素
    const input = document.querySelector('input')

    // 修改属性
    // input.type = 'checkbox'
    // input.type = 'password'

    // 获取表单内容
    console.log(input.value)

    // 设置表单内容
    input.value = '设置内容'
    
  </script>

自定义属性

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

自定义属性：

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

在标签上一律以data-开头

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

  <div data-id="1"></div>
  <script>
    const div = document.querySelector('div')
  
    // 获取：div.dataset.xxx
    console.log(div.dataset.id)

    // 设置/修改：div.dataset.xxx = 值
    div.dataset.id = '10'
  </script>