JavaScript-获取DOM元素并操作元素

根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

语法：document.querySelector(‘css选择器’)
参数：包含一个或多个有效的CSS选择器 字符串
返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

	<div class="box">123</div>

    // const box = document.querySelector('.box')
    const box = document.querySelector('div')

选择匹配的多个元素

语法：document.querySelectorAll(‘css选择器’)
参数：包含一个或多个有效的CSS选择器 字符串
返回值：CSS选择器匹配的NodeList 对象集合
得到的是一个伪数组：

• 有长度有索引号的数组
• 但是没有 pop() push() 等数组方法
• 想要得到里面的每一个对象，则需要遍历（for）的方式获得

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

	 <ul class="nav">
	   <li>测试1</li>
	   <li>测试2</li>
	   <li>测试3</li>
	 </ul>

    // 1.获取元素
    const lis = document.querySelectorAll('.nav li')
    // console.log(lis)
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i]) // 每一个小li对象
    }

其他获取DOM元素方法（了解）

根据id获取一个元素

    //根据id获取一个元素
    document.getElementById('id')

根据类名获取元素

	//根据类名获取元素，获取页面所有类名
    document.getElementsByClassName('类名')

根据标签获取元素

  	//根据标签获取一个元素
    document.getElementsByName('标签')
    //根据标签获取一类元素，获取页面所有标签
    document.getElementsByTagName('标签')

操作元素内容

元素.innerHTML 属性

• 将文本内容添加/更新到任意标签位置
• 会解析标签，多标签建议使用模板字符

	<div class="box">我是文字的内容</div>

    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. innerHTML 解析标签
    box.innerHTML = '<strong>我要更换</strong>'

元素innerText 属性

• 将文本内容添加/更新到任意标签位置
• 显示纯文本，不解析标签

	<div class="box">我是文字的内容</div>

    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. innerText 解析标签
	box.innerText = '我是一个盒子'

操作元素属性

操作元素常用属性

• 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
• 最常见的属性比如： href、title、src 等
• 语法：对象.属性 = 值

	<img src="./images/1.png" alt="">

	功能：每次打开页面随机显示一张图片
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    // 1. 获取图片对象
    const img = document.querySelector('img')
    // 2. 随机得到序号
    const random = getRandom(1, 6)
    // 3. 更换路径
    img.src = `./images/${random}.png`

操作元素样式属性

通过 style 属性操作CSS

语法：对象.style.样式属性 = 值

• 还可以通过 JS 设置/修改标签元素的样式属性
  • 比如通过轮播图小圆点自动更换颜色样式
  • 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

	<div class="box"></div>

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    // 1. 获取元素
    const box = document.querySelector('.box')
    //2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
    box.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    box.style.backgroundColor = 'hotpink'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red'

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
语法：元素.className = ‘css类选择器’
注意：
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

  <div class="nav">123</div>

    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .nav {
      color: red;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    // 1. 获取元素
    const div = document.querySelector('div')
    // 2.添加类名  class 是个关键字 我们用 className
    // 不保留nav的话，会被替换掉
    div.className = 'nav box'

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：

    // 追加一个类
    元素.classList.add('类名')
    // 删除一个类
    元素.classList.remove('类名')
    // 切换一个类
    元素.classList.toggle('类名')

  <div class="box active">文字</div>

    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }

    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改样式
    // 2.1 追加类 add() 类名不加点，并且是字符串
    // box.classList.add('active')
    // 2.2 删除类  remove() 类名不加点，并且是字符串
    // box.classList.remove('box')
    // 2.3 切换类  toggle()  有还是没有啊， 有就删掉，没有就加上
    box.classList.toggle('active')

操作表单元素属性

• 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
• 正常的有属性有取值的 跟其他的标签属性没有任何区别
  • 获取: DOM对象.属性名
  • 设置: DOM对象.属性名 = 新值

  <!-- <input type="text" value="电脑"> -->
  <input type="checkbox" name="" id="">
  <button>点击</button>

    // 1 获取元素
    // const uname = document.querySelector('input')
    // 2. 获取值  获取表单里面的值 用的  表单.value
    // console.log(uname.value) // 电脑
    // console.log(uname.innerHTML)  innertHTML 得不到表单的内容
    // 3. 设置表单的值
    // uname.value = '我要买电脑'
    // console.log(uname.type)
    // uname.type = 'password'

    // 1. 获取
    const ipt = document.querySelector('input')
    // console.log(ipt.checked)  // false   只接受布尔值
    ipt.checked = true

    // 1.获取
    const button = document.querySelector('button')
    // console.log(button.disabled)  // 默认false 不禁用
    button.disabled = true   // 禁用按钮

自定义属性

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

• 在html5中推出来了专门的data-自定义属性
• 在标签上一律以data-开头
• 在DOM对象上一律以dataset对象方式获取

   <div data-id="1"> 自定义属性 </div>

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