JS-DOM（提升）

获取DOM对象

1.根据CSS选择器来获取DOM元素

1.1选择匹配的第一个元素

语法:document.querySelector(“css选择器”);
参数:包含一个或者多个有效的CSS选择器。
返回值:CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。

<div>我是一个盒子</div>
<script>
    //js 获取元素
    let div=document.querySelector("div");
    //只能获取第一个元素
    console.log(typeof div);
</script>

如果想要获取其他元素则可以给元素添加 class 或者 id 来获取

<div>我是一个盒子</div>
<div class="two">我是第二个盒子</div>
<script>
    //js 获取元素
    let div=document.querySelector(".two");
    //只能获取第一个元素
    console.log(typeof div);
</script>

例如想要拿到 ul 里面的第三个 li 标签

<div>我是一个盒子</div>
<div class="two">我是第二个盒子</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //js 获取元素
    let li=document.querySelector("ul li:last-child");
    console.log(li);
</script>

1.2选择匹配多个元素

语法:document.querySelectorAll(“CSS选择器”);
All表示获取所有选择器
参数:包含一个或多个有效的CSS选择器
返回值:CSS选择器匹配的 NodeList 对象集合

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //获取所有li
    //js 获取元素
    let lis=document.querySelectorAll("ul li");
    console.log(lis);
</script>

总结:
获取一个DOM元素我们使用querySelector()
获取多个DOM元素我们使用querySelectorAll()
querySelector()方法只能选择一个元素，能直接操作修改元素
querySelectorAll()可以选择多个元素，不可以直接修改元素，只能通过便利的方式给里面的元素进行修改
ducument.querySelectorAll()得到的是一个伪数组
有长度有索引号
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象,则需要遍历(for)的方法获取。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //获取所有li
    //js 获取元素
    let lis=document.querySelectorAll("ul li");
    for(var i=0;i<lis.length;i++){
        console.log(lis[i]);
    }
</script>

1.3其他获取DOM元素的方法

根据id获取一个元素
document.getElemnentById(‘nav’);
根据标签获取一类元素 获取页面所有div
document.getElementsByTagName(‘div’)
根据类名获取元素 获取页面所有类名为w的元素
decument.getElementsByClassName(‘w’)

2.设置/修改DOM元素内容

设置/修改DOM元素内容的三种方法

document.write()方法
元素.innerText属性
元素.innerHTML属性

三者的区别

doument.write()方法 智能追加到body中
元素.innerText()属性 只识别内容 不能解析标签
元素.innerHTML()属性 能够解析标签
具体实现通过以下例子

<style>
div{
    background-color: pink;
    width: 200px;
    height: 200px;
}
</style>
<div>我是一个盒子</div>

2.1document.write()

只能将本内容追加到前面的位置
文本中包含的标签会被解析

    document.write('<h1>hello</h1>');
    document.write('zh');

2.2元素innerText属性

该属性将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析

<div>我是一个盒子</div>
<script>
//获取标签
let div=document.querySelector("div");
//修改标签的内容
//对象.属性=值
div.innerText='zzz';
</script>

2.3元素innerHTML属性

<div>我是一个盒子</div>
<script>
//获取标签
let div=document.querySelector("div");
//innerHTML解析标签内容
div.innerHTML="<strng>111</strong>"
</script>

3.设置/修改元素样式属性

设置/修改元素样式属性的三种方法

案例:

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<div>111</div>

3.1通过style属性操作CSS

语法：对象.style.样式属性=值

let div=document.querySelector('div')
div.style.backgroundColor='red';

3.2操作类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式修改.
语法:元素.className=‘CSS类名’

<style>
    .active{
        width: 400px;
        height: 200px;
        background-color: aqua;
        margin-left: 50px;
    }
</style>
<script>
let div=document.querySelector('div')
div.className='active';
</script>

注意:
1.由于clss是关键字，所以使用className去替代
2.className时使用新值换旧值，如果需要添加一个类，需要保留之前的类名

3.3通过classList操作类控制CSS

为了解决className容易覆盖以前的类名,我们可以通过classList方法追加和删除类名
语法:
追加一个类
元素.classList.add(‘类名’)

<div class="one">111</div>
<script>
    let div=document.querySelector('div')
    div.classList.add('active');
</script>

删除一个类
元素.classList.remove('类名)

<div class="one">111</div>
<script>
    let div=document.querySelector('div')
    div.classList.remove('one');
</script>

切换一个类
元素.classList.toggle(‘类名’)

<div >111</div>
<script>
    let div=document.querySelector('div')
    div.classList.toggle('one');
</script>

4.设置/修改表单元素属性

表单有很多情况，也需要修改属性，比如点击密码输入框的眼睛可以显示或者隐藏，本质上是把表单类型转换为文本框
通过案例具体分析

<input type="text" value="请输入密码">
    <script>
        let input=document.querySelector('input');
    </script>

语法：
获取:DOM对象.属性名
表单.value=’ ’

<input type="text" value="请输入密码">
    <script>
        let input=document.querySelector('input');
        input.value='zz'
    </script>

设置:DOM对象.属性名=新值
表单.type=’ ’

<input type="text" value="请输入密码">
    <script>
        let input=document.querySelector('input');
        input.type="password";
    </script>

5.定时器间歇函数

5.1开启定时器

语法:setInterval(function(){},时间)
对于函数代码量较大的我们也可以通过调用的方式来编写

function show(){
    conslog.log("zz");
}
setIntervale(show,1000);

5.2关闭定时器

语法:let 变量名=setIntervale(函数,间隔时间)
clearInterval(变量名)

let zh=setIntervale(show , 1000);
 clearInterval(zh);