DOM预习

DOM

操作网页内容

DOM树

直观体现标签与标签里的关系

DOM对象

浏览器根据HTML标签生成的JS对象

document对象，用来访问和操作网页内容

获取DOM对象

通过CSS选择器（重点）

document.querySelector('css选择器')    //语法1选择单个，可直接修改
​
const box = document.querySelector('.box')
    console.log(box)
const nav = document.querySelector('#nav')
    console.log(nav)
const li = document.querySelector('ul li:first-child')
    console.log(li)
​
document.querySelectorAll('css选择器') 
//语法2选择多个，得到伪数组，不能直接修改，没有pop()、push()方法
​
const lis = document.querySelectorAll('ul li')
    console.log(lis)

根据id获取

document.getElementById('nav')

//获取一个

根据标签获取

document.getElementsByTagName('div')

//获取页面所有div

根据类名获取

document.getElementsByClassName('w')

//获取页面所有类名为 w 的

操作元素内容

// <div class="box">123</div>
​
//元素.innerText 属性
const box=document.querySelector('.box')
console.log(box.innerText)  //获取文字内容
box.innerText='321'   //改变内容
​
//元素.innerHTML 属性
//会解析标签，可将文本内容添加/更新到任意标签位置
box.innerHTML='<strong>321</strong>'    //改变内容并加粗

操作元素属性

通过style改css

通过类名className改css

通过classList控制css

获取表单内容

自定义属性

//                                  语法：对象.属性=值
​
//<img src="./开心法则.jpg" alt="">
const img = document.querySelector('img')
img.src='./烟花.jpg'
img.title='照片'
​
​
//                                  通过style改css
//语法：对象.style.样式属性 = 值
​
/*  <div class="box">123</div>
 <style>
    .box{
        width: 100px;
        height: 100px;
        }
</style>*/
const box = document.querySelector('.box')
box.style.width='200px'
box.style.height='200px'
​
​
//                              通过类名className改css
//语法：标签.className = '类名'
​
/* <div>1234</div>
 <style>
    div{
        background:black;
        }   
     .box{
        width: 100px;
        height: 100px;
        }
</style>*/
const div = document.querySelector('div')
div.className = 'box'   //会覆盖之前类名(解决办法：添加上原有类名)
​
​
//                              通过classList控制css
//语法：
/*
元素.classList.add('类名')      //追加一个类
元素.classList.remove('类名')   //删除一个类
元素.classList.toggle('类名')       //切换一个类
*/
const box = document.querySelector('.box')
box.classList.add('active')
box.classList.remove('nav')
//类名不加点，是字符串,不影响原有类名
box.classList.toggle('active')
//有就删，没有就添
​
​
//                              获取表单内容
//表单.value = '用户名'
//表单.type = 'password'
/*  <input type="text" value="内容">*/
const input=document.querySelector('input')
input.value='文字'
input.type='password'
//结果：<input type="password" value="文字">
​
/*<input type="checkbox">*/
const ipt=document.querySelector('input')
ipt.checked=true        //选中多选框
​
/*<button>点击</button>*/
const btn=document.querySelector('button')
console.log(btn.disabled)   //默认不禁用
btn.disabled=true           //禁用
​
//                              自定义属性
//以data-开头定义，使用时统一用dataset对象方式获取
//定义：<div data-id="1">1</div>
const one = document.querySelector('div')
console.log(one.dataset.id)  //1

定时器-间歇函数

作用：每隔一段时间调用这个函数，间隔时间单位是毫秒

setInterval(函数，间隔时间)

//开启定时器
setInterval(function(){
    console.log('1s一次')
},1000)                     //写法1
​
function fn(){
    console.log('1s一次')
}
setInterval(fn,1000)        //写法2
​
//关闭定时器
let n = setInterval(fn,1000)
clearInterval(n)

事件监听

让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应。

语法：元素对象.addEventListener('事件类型’,要执行的函数)

三要素:

事件源:

那个dom元素被事件触发了,要获取dom元素

事件类型:

用什么方式触发,比如鼠标单击click、鼠标经过mouseover等

事件调用的函数:

要做什么事

元素对象.addEventListener('事件类型'，要执行的函数)
 const button = document.querySelector('buttton')
 button.addEventListener('click',function(){
       alert('点击成功')
 })
//onclick会覆盖，addEventListener不会
​
//可以使用 removeEventListener() 方法来移除事件的监听