DOM-Day1-获取DOM元素,修改属性

属性是通过等号赋值，对象是通过括号赋值

Web API基本认知

1.作用：就是使用js去操作html和浏览器

2.分类：DOM（文档对象模型），BOM（浏览器对象模型）

---

---

 

DOM是什么

1.DOM是浏览器提供的一套专门用来操作网页内容的功能

2.DOM的核心就是将内容当做对象来使用

---

---

 

DOM树

1.文档树直观的体现了标签与标签之间的关系

2.将HTML文档以树状结构直观的表现出来

---

---

 

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

1.1 选择匹配的第一个元素

语法：document.querySelector('CSS选择器')

参数：包含一个或者多个有效的CSS选择器 字符串

 <button>点击</button>
    <script>
        let btn = document.querySelector('button')
　　//类型名是需要加.
        console.log(btn)
        btn.innerHTML='唐伯虎'
        //btn 是对象 DOM对象
    </script>

 

1.2选择匹配的多个元素

语法：document.querySelectorAll('CSS选择器')

参数：包含一个或多个有效的CSS选择器 字符串

注意：得到的是一个伪数组，有长度有索引号，但是没有POP（），push(),想要得到里面的每一个对象，则需要用for的方式循环得到

<div>我是一个盒子</div>
    <div>我是第二个盒子</div>
    <div class="three">我是第三个盒子</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <span>就1个</span>
    <script>
        //1.js获取第一个元素
        //let div = document.querySelector('div')
       // let div = document.querySelector('.three')
        //console.log(div)
        // let li = document.querySelector('ul li:last-child')
        // console.log(li)
        //2.获取多个元素 伪数组
        // let lis = document.querySelectorAll('ul li')
        // console.log(lis)
        // //通过遍历的方式，获得里面每一个dom对象
        // for(let i =0;i<lis.length;i++)
        // {
        //     console.log(lis[i])
        // }
        let span = document.querySelectorAll('span')
        console.log(span)
    </script>

2022-12-04

 

---

 

---

 

1. querySelector() 方法能直接操作修改吗？

 

 可以

 

2. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？

 

 不可以， 只能通过遍历的方式一次给里面的元素做修改

括号里面写css选择器

 必须是字符串，也就是必须加引号

---

---

 

设置/修改DOM元素的内容

如果想要修改标签元素的里面的内容，则可以使用如下几种方式：

1. document.write() 方法

2. 对象.innerText 属性

3. 对象.innerHTML 属性

---

---

1. document.write()

 只能将文本内容追加到 </body> 前面的位置

 文本中包含的标签会被解析

2.元素innerText属性

 将文本内容添加/更新到任意标签位置

 文本中包含的标签不会被解析

3.元素innerHTML属性

 将文本内容添加/更新到任意标签位置

 文本中包含的标签会被解析

4. 三者的区别是什么？

 document.write() 方法 只能追加到body中

 元素.innerText 属性 只识别内容，不能解析标签

 元素.innerHTML 属性能够解析标签

 如果还在纠结到底用谁，你可以选择innerHTML

<div>粉红色的回忆</div>
    <script>
        //1.获取标签（元素）
        let box = document.querySelector('div')
        //2.修改标签（元素）内容 box是对象  innerText是属性
        //对象.属性 = 值 不识别标签
        // box.innerText = '有点意思~'
        // box.innerText = '<strong>有点意思~</strong>'
        box.innerHTML = '<strong>有点意思</strong>'
    </script>

 作业：随机点名

抽中的选手: <div></div>
    <script>
        //获取元素
        let box = document.querySelector('div')
        //2.获得随机的名字
        //随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        //声明一个数组
        let arr = ['赵云','黄忠','关羽','赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']
        //生成一个随机数作为数组的索引号
        let random = getRandom(0,arr.length-1)
        //3.写入标签内部
        box.innerHTML=arr[random]
        //之后删除这个人的名字
        arr.splice(random,1)

 

---

---

设置/修改DOM元素的属性

>>>>设置/修改元素常用属性

1.常见属性，比如：href,title,src

2.语法：对象.属性 = 值

<img src="./images/1.webp" alt="">
    <script>
        //1.获取图片
        let pic = document.querySelector('img')
        //2.修改元素属性 src 对象.属性=值
        pic.src = './images/3.webp'
        pic.title = '我是pink老师'

    </script>

 

>>>>设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

 比如通过 轮播图小圆点自动更换颜色样式

 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

学习路径：

1. 通过 style 属性操作CSS

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

注意：

>. 修改样式通过style属性引出

>. 如果属性有-连接符，需要转换为小驼峰命名法

>. 赋值的时候，需要的时候不要忘记加css单位

2. 操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：//active是一个CSS类名

元素.className ='active'

>>. 使用 className 有什么好处？

 可以同时修改多个样式

>>. 使用 className 有什么注意事项？

 直接使用 className 赋值会覆盖以前的类名

3. 通过 classList 操作类控制CSS

//追加一个类

元素.classList.add('类名')

//删除一个类

元素.classList.remove('类名')

//切换一个类

元素.classList.toggle('类名')

>>>>设置/修改表单元素的属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的 跟其他的标签属性没有任何区别

 获取: DOM对象.属性名

 设置: DOM对象.属性名 = 新值

例如 ：

表单.value =' 用户名'

表单.type = 'password'

//表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代

表移除了该属性

比如： disabled、checked、selected