webapi的DOM部分：class及基础语法文本框和标签（元素的获取）

一. 查询元素

(1)获取元素

 1. 获取单个元素 ： document.querySelector('选择器')
         1.1 如果选择器不存在则获取null
         1.2 如果选择器存在，只会获取满足条件的第一个 "dom对象"
  2. 获取多个元素:   document.querySelectorAll('选择器')
         2.1 如果选择器不存在则获取空数组  []
         2.2 如果选择器存在，会获取满足所有条件的 “dom对象伪数组”
  3.querySelector与querySelectorAll区别
         3.1 querySelector获取的是dom对象，可以直接操作修改
         3.2 querySelector获取的是伪数组，不可以直接操作修改。必须要通过下标取出                  里面的dom对象才可以修改。

二.查元素属性

(1) 元素内容属性

元素.innerText 我只修改文本

元素.innerHTML 我修改文本+标签

       let box = document.createElement('.box')

       box.innerText='<h2>我只修改文本</h2>'

       box.innerHTML='<h2>我修改文本+标签</h2>'

(2）HTML属性

        改图片：img.src='   '

        改链接：a.href='    '

(3)元素 css属性   style和classList样式属性

注意事项

凡是带-的样式，例如border- margin- font-,在js中需要转换为小驼峰命名

如果css属性有-，需要

box.style.backgroundColor 操作单个样式

新增：元素.classList.add( ' 类名 ' )

移除：元素.classList.remove( '类名' )

切换：元素.classList.toggle('类名') （有则改之，无则增加）

判断类名：true:有 false:没有

语法（普通元素）	示例	描述
元素.style.样式名	box.style.backgroundColor	操作单个样式(行内权重)
元素.className	box.className	操作元素类名(类权重),会覆盖原有类名
元素.classList.add('类名')	box.classList.add('one')	新增类名
元素.classList.remove('类名')	box.classList.remove('one')	移除类名
元素.classList.toggle('类名')	box.classList.toggle('one')	切换类名(有则移除，无则新增)
元素.classList.contains('类名')	box.classList.contains('one')	判断类名（true:有 false:没有）

(4)元素 css属性   className样式属性

多个修改：元素.className= '类名'

三.微博输入案例（表单属性）

表单状态（布尔类型）：是否禁用 元素.checked

是否选中（radio与checkbox）元素.checked

是否选中（option）元素.selected

• 需求：监听输入框的输入，实时获取文本长度并显示

• 知识点： oninput事件： 只要输入框输入了内容就会触发

      本小节知识点 
        1.事件源： textarea
        2.事件类型： oninput 
            * 表单输入独有的事件，只要用户输入了就会触发
        3.事件处理： 获取文本域的文本长度， 赋值给 span标签
  

      // 1. 获取元素 文本域  count
      let area = document.querySelector('#area')
      let useCount = document.querySelector('.userCount')
      // 2. 绑定事件  用户输入事件 onInput
      area.oninput = function () {
        //area.value : 获取的是输入框的文本（字符串）
        //area.value.length : 获取的是字符串长度
        useCount.innerText = area.value.length
      }