api - 元素的操作

innerText

    元素.innerText = ''
    
    获取标签之间的文本内容，标签会被忽略
    
    如果没有赋值则是提取元素，如果赋值则是添加或修改元素

innerHtml

    元素.innerHtml = ''
    
    获取标签之间的完整结构,标签里的结构也会获取/解析
    
    如果没有赋值则是提取元素，如果赋值则是添加或修改元素

单标签元素

单标签元素通过value获取内容，
元素.value = ''
表单元素Textarea是双标签，不过也是通过value属性获取内容

注：
点语法只能操作内置属性，对自定义属性的操作忽略
    input.value = '1234'
    img.src = './images/1.jpg'
    input.style.color = 'red'

元素样式操作

    元素.style.样式 = ''
    span.style.color = 'red'
    span.style['text-decoration'] = 'underline'
    span.style.background = 'yellow'
    span.style.width = '300px'


    为元素body设置背景样式，注意不要忘记了url
    body元素直接document使用即可，不需要再声明变量获取body属性
    document.body.style.backgroundImage = `url(./images/${arr[index]})`

元素的样式类名操作：className

    元素.className = '样式名称'
    注：使用className属性是会覆盖之前的属性，无论之前有多少样式

元素的样式类名操作：classList

    元素.classList.方法('样式名称')
    元素.classList.add：在经之前的样式的基础之上新增一个新的样式类名，“不影响”元素之前的样式
    p.classList.add('size50')
    
    元素.classList.remove:移除指定名称的样式，不影响元素其它的样式类名
    p.classList.remove('size50')
    
    元素.classList.toggle:切换元素的样式，如果没有就添加，如果有就移除
    p.classList.toggle('size50')
    
    元素.classList.contains:判断当前元素是否包含某个指定名称的样式，如果有就返回true,如果没有返回false
    p.classList.toggle('size50')      //返回值是true 或 false，可以声明一个变量来接收