JS数据类型及元素操作方法

JS的数据类型

值类型/简单数据类型/基本数据类型

变量中存储的是值本身

• string
• number
• boolean

引用数据类型

变量中存储的是地址

• 通过new关键字创建的对象
• arr
• object

变量声明

• const 声明的值不能修改，且声明变量时需要初始化
• let 变量的值会修改

获取对象

选择匹配的第一个元素

document.querySelector('css选择器')

选择匹配的第多个元素

document.querySelectorAll('css选择器')

• 得到的是伪数组
• 有长度有索引号的数组
• 没有pop（） push（）等方法
• 参数是字符串

---

操作元素内容

获取文字内容

const box = document.querySelector(".box")
console.log(box.innerText);

• innerText 不解析标签

console.log(box.innerHTML);
box.innerHTML = '我是猪猪包'

• innerHTML 解析标签

操作元素属性

常用属性

对象.属性名=新值

样式属性

通过style属性操作css

对象.style.样式属性=新值


// 1.获取元素
const box = document.querySelector('.box')
// 2.修改样式属性
box.style.width = '400px' //字符串
box.style.backgroundColor = 'hotpink'//background-color不可以，使用小驼峰命名
box.style.border = '2px solid blue'

• 生成的是行内样式，权重大于内部样式

通过className属性操作css

元素.className='类名'

• 会覆盖之前的类

<style>
.box {
    width: 100px; 
    height: 100px;
}
div {
    background-color: #8bd4ff;
}
</style>

// 1.获取元素
const div = document.querySelector('div')
// 添加类名
div.className = 'box div'

• 可以同时修改许多元素

通过classList属性操作css

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

.box{
     width: 200px;
    height: 100px;
    color: black;
}
.active{
    color: #ff0000;
}

<div class="box">文字</div>
<script>
    const box = document.querySelector('.box')

    // 追加类
    // 类名不加点，且是字符串
    box.classList.add('active')
    // 删除类
    box.classList.remove('box')
    // 切换类，有就加上没有就删掉
    box.classList.toggle('box')
</script>

• 不替换以前的类名

操作表单元素属性

基本操作方法

对象.属性名=新值

<!-- <input type="text" value = '电脑'> -->
<input type="checkbox" checked>
<button disabled>点击</button>
<script>
    // const uname = document.querySelector('input')
    // // 获取表单属性不是innerHTML，innerHTML得不到表单内容
    // console.log(uname.value);
    // uname.value = '我要买电脑'
     // uname.type = 'password'
    const checkbox = document.querySelector('input')
    console.log(checkbox.checked);

    const button = document.querySelector('button')
    console.log(button.disabled);
</script>

自定义属性

• 必须以data-开头
• 查看时使用dataset

<div data-id="1" data-wen="423">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<div data-id="6">6</div>
<script>
    const one = document.querySelector('div')
    console.log(one.dataset);
+</script>

---

定时器-间歇函数

开定时器

setInterval(函数，间隔时间)

关闭定时器

let 变量名=setInterval(函数，间隔时间)
clearInterval(变量名)