document.write()方法

文本内容追加到</body>前面的位置

文本中标签会被解析

    <script>
        document.write('hello world')
        document.write('<h3>你好世界</h3>')
    </script>

innerText属性

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

文本包含的标签不会被解析

   <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>时间打开VNK的SV你倒是</div>
    <script>
      //获取标签
      let div = document.querySelector("div")
      //修改标签，     对象.属性=值     div是对象，innnerText是属性
      div.innerText = "有点意思"
    </script>
  </body>

innerHTML属性

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

文本包含的标签会被解析

    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>时间打开VNK的SV你倒是</div>
    <script>
      //获取标签
      let div = document.querySelector("div")
      //修改标签，     对象.属性=值     div是对象，innnerText是属性
      div.innerHTML = "<strong>有点意思</strong>"
    </script>
  </body>

随机点名案例

    <style>
      div {
        display: inline-block;
        width: 50px;
        height: 30px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid pink;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    抽中的选手是：
    <div></div>

    <script>
      //1获取标签
      let div = document.querySelector("div")

      //2得到随机名字
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let arr = ["张三", "李四", "王五", "王朝", "马汉"]
      let random = getRandom(0, arr.length - 1)

      //3写入标签内部
      div.innerHTML = arr[random]
      arr.splice(random, 1)
      console.log(arr)
    </script>
  </body>

设置/修改元素属性

常见属性：href:链接 title:标题 src:图片

语法：对象.属性=值

    <img src="/1.jpg" alt="">
    <script>
      //1获取元素
      let pic = document.querySelector('img')
      //2修改元素
      pic.src = '/3.webp'
      pic.title = "我是刘海生"
    </script>

设置/修改元素样式属性

轮番图/滚动图片更换图片属性

通过style属性操作CSS

操作类名（className）操作CSS

通过classList操作类控制CSS

语法

对象.style.样式属性=值

注意

css有连接符的需要用小驼峰法

  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: gray;
    }
  </style>
  <body>
    <div></div>
    <script>
      //1获取标签
      let box = document.querySelector("div")
      //2修改背景颜色
      box.style.background = "blue"
    </script>
  </body

操作类名（className）操作CSS

  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: gray;
    }
    .active {
      width: 400px;
      height: 500px;
      background-color: yellow;
    }
  </style>
  <body>
    <div></div>
    <script>
      //1获取标签
      let box = document.querySelector("div")
      //2
      box.className = "active"
    </script>
  </body>

使用classList修改元素样式

//追加一个类

元素.classList.add('类名')

//删除一个类

元素.classList.remove('类名')

//切换一个类，原来有就换，原来没有就加

元素.classList.toggle('类名')

  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: gray;
    }
    .active {
      width: 400px;
      height: 500px;
      background-color: skyblue;
    }
  </style>
  <body>
    <div></div>
    <script>
      //1获取标签
      let box = document.querySelector("div")
      //2
      box.classList.add("active")
    </script>
  </body>