WebApi复习01-DOM

获取页面元素的两种方法

获取单个元素

document.querySelector('选择器(要加点,不加点是类名)') 
获取一个元素 {dom对象} 或 null
可以直接修改

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

获取所有元素

document.querySelectorAll('选择器(要加点,不加点是类名)') 获取所有的元素  伪数组
不可以直接修改 需要通过下标查找

let boxList = document.querySelectorAll('.box')

操作元素内容的两种方法

innerText

元素.innerText: 获取元素的文本
不可以解析字符串标签

//获取元素  
let box = document.querySelector('.box')
//获取文本
box.innerText
//设置文本
box.innerText = '我是ikun'

innerHTML

元素.innerHTML: 获取元素的内容(文本+标签)
可以解析字符串标签

//获取元素  
let box = document.querySelector('.box')
//获取文本
box.innerHTML
//设置文本
box.innerHTML = '<b>我是ikun</b>'

操作元素HTML属性

元素.href

元素.href = ' ' 
链接,一般用于a标签

//获取元素
let a = document.querySelector('a')
//设置
a.href = 'http://www.itcast.cn'

元素.src

元素.src = ' ' 
文件路径,一般用于img标签 

//获取元素
let a = document.querySelector('a')
//设置
img.src = './images/01.jpg'

元素样式属性操作三种方式

style语法

元素.style.样式属性 = '值'
css样式有-的,需要转成驼峰命名

//获取元素
let box = document.querySelector('.box')
//设置
box.style.backgroundColor = 'pink'

className语法

元素.className = '类名' 
通过类名修改多个样式,会覆盖原本的类名

//获取元素
let box = document.querySelector('.box')
//修改类名 : 会覆盖之前的类名
box.className = 'one'

classList语法

新增类名:  元素.classList.add('类名')    多个类名使用逗号隔开  
移除类名： 元素.classList.remove('类名')
切换类名： 元素.classList.toggle('类名') 有则移除，无则追加

 //获取元素
let box = document.querySelector('.box')
​
//1.新增类名
box.classList.add('one')
box.classList.add('two')
//2.移除类名 :  元素.classList.remove('类名')
box.classList.remove('two')
//3.切换类名 :  元素.classList.toggle('类名')  切换： 有则移除，无则新增
box.classList.toggle('one')

操作表单元素属性

表单文本 value

获取表单元素文本: 表单元素.value = ' '

清空表单元素内容: 表单元素.value = ' '

清空span内容: span.innerText=' '

清空表单 : form.value.reset()

表单布尔类型属性（表单状态）

html中表单元素有一种特殊的属性，表示表单元素的两种状态。他们在js中是布尔类型
disabled : 是否禁用
checked : 是否选中  radio和checkbox
selected : 是否选中  下拉option

//2. checked
inputList[2].checked = true
​
//3. selected
optionList[3].selected = true

attribute语法操作元素属性

1.什么是自定义属性

1.1 标准属性： W3C中的标准属性，浏览器可以识别

1.2 自定义属性： 浏览器不能识别样式的属性，用户自定义添加（用于存储一些数据）

2.attribute语法场景 ： 操作元素行内自定义属性

获取属性： 元素.getAttribute('属性名')

设置属性： 元素.setAttribute('属性名',属性值)

移除属性： 元素.removeAttribute('属性名')

let one = document.querySelector('.one')
//(1)获取元素属性
console.log(one.getAttribute('aaa'))
//(2)设置属性
one.setAttribute('aaa', '坤哥') //如果存在则修改
one.setAttribute('bbb', '班长') //如果不存在则动态
//(3)移除属性
one.removeAttribute('aaa')