1.BOM-获取元素(获取元素、修改属性)-编程知识

web Api基本认知

作用：通过JS去操作html页面和浏览器(实现浏览器中的某些功能)
分类：
DOM(网页)：Document Object Model(文档对象模型)
BOM(浏览器)：Borwser Object Model(浏览器对象模型)

DOM

DOM树

将网页中标签的关系以树状结构表现出来
在这里插入图片描述

DOM对象

浏览器根据html标签生成的JS对象
a)所有的标签属性都可以在这个对象上面找到
b)修改这个对象的属性会自动映射到标签身上
DOM核心思想：把网页内容当做对象来处理

document对象

a)是DOM里提供的一个对象
b)它提供的属性和方法都是用来访问和操作网页内容的
c)网页所有内容都在document里面

获取DOM对象

querySelector(‘选择器’)

    <div><ul><li></li></ul></div><script>//获取页面中的标签语法：//a) document.querySelector('CSS选择器')  //注意，参数就是一个字符串，字符串就是各种css选择器let res = document.querySelector('div')// b)有返回值：返回的结果就是当前标签(标签对象)console.log(res)let res2 = document.querySelector(' div ul li') //通过后代选择器获取了li标签console.log(res2)</script>

在这里插入图片描述

querySelectorAll

    <div>文字1</div><div>文字2</div><div>文字3</div><div>文字4</div><script>let res = document.querySelector('div')   //querySelector只能获取满足条件的第一个标签console.log(res)//document.querySelectorAll('css选择器')  //可以获取到所有满足条件的标签  #id .class是css选择器let res2 = document.querySelectorAll('div')  //得到的是一个伪数组(伪数组也是一个数组，但是不能使用数组方法)console.log(res2) //数组中每一个值都是标签对象console.log(res2[1])</script>

在这里插入图片描述
如何界定返回的结果是伪数组呢？如果返回的结果没有Array就是伪数组
伪数组不能使用数组中的方法，但是伪数组依然可以使用for循环遍历，因为for循环不是数组中的方法

其他获取DOM元素的方法(了解)

   <div id="one" class="test1">文字1</div><div id="two" class="test2">文字2</div><div id="three">文字3</div><div class="test1">文字4</div><script>//  1.其他方式获取标签// a)通过标签的id获取标签对象// 总结：因为标签的id唯一，所以通过getElementById()只能获取一个标签const div = document.getElementById('one')console.log(div)//b)通过标签的名字获取标签对象// document.getElementsByTagName('标签名')console.log(document.getElementsByTagName('div'))  //得到一个伪数组// c)通过标签类名获取标签// document.getElementsByClassName('类名')//类名前面不能加点，加点就变成了类选择器let res = document.getElementsByClassName('test1')console.log(res)</script>

在这里插入图片描述

操作元素内容

获取标签中的内容

  <div id="one" class="test1"><p>文字1</p></div><div id="two" class="test2">文字2</div><div id="three">文字3</div><div class="test1">文字4</div><div id="five"></div><script>//获取标签中的内容// 赋值语法：// DOM标签对象.innerHTML=值// DOM标签对象.innerText=值//获取值语法：获取标签中的内容// DOM标签对象.innerHTML;// DOM标签对象.innerText;const div = document.querySelector('#one')//   二者的区别：//a) 如果标签内只有纯粹的文字，则innerHTML和innerText没有任何区别// b)如果标签中有文字+html标签，则innerHTML既可以获取文字也可以获取对应的HTML标签console.log(div.innerHTML)console.log(div.innerText)//给标签设置文字内容，会覆盖掉标签内原来的内容div.innerHTML = '呵呵呵呵'console.log(div.innerHTML)  //非纯文本标签也覆盖掉了div.innerHTML = '<h1>呵呵呵呵</h1>'  //innerHTML中的标签页会被渲染上去，而innerText的标签会被当成纯文本渲染</script>

在这里插入图片描述

操作元素属性

操作img的src属性

    <img src="../image/1.jpg" alt=""><script>// 操作图片标签中的src属性// a)获取图片的src属性// 语法：DOM标签对象.srcconst img = document.querySelector('img')let res = img.src //获得的是绝对路径console.log(res)// b)给图片标签设置src属性// 语法：DOM标签对象.src=值;img.src = '../image/2.jpg'

操作标签的样式属性

    <div></div><script>//操作标签的样式属性//1.行内式   //本质上通过操作标签的style属性实现//2.外联式  //本质都是通过选择器实现的//3.内嵌式  //本质都是通过选择器实现的//通过操作标签的style属性实现给标签设置样式的//语法：DOM标签对象.style.css属性=值let div = document.querySelector('div')div.style.backgroundColor = 'red'div.style.border = '2px solid blue'//通过行内样式一次可以给标签加若干标签属性，单独设置即可//style也是一个对象。那么style中有哪些属性我们才可以用 。可以通过console.log(div.style)查阅</script>

在这里插入图片描述

操作标签的类样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 200px;width: 200px;background-color: red;border: 5px solid blue;border-radius: 50%;}</style>
</head><body><div></div><script>// 1.操作标签的类样式// 语法：DOM标签对象.className='类名'// 代码演示// 1.定义一个样式// 2.获取div标签let div = document.querySelector('div')// 3.给div标签设置类样式div.className = 'box'// 通过className操作标签样式总结// a)如何给标签添加多个类名？只要在类命中加上空格       div.className = 'box  bd  w'//b）通过className操作标签类名的时候，会覆盖标签原来的类名//c)如果不希望覆盖原来的类名，将原来的类名再次添加//d)className设置的值必须是类名，不能加点//操作类样式终级写法(推荐写法)：//添加类名：DOM标签对象.classList.add('类名')；//不会覆盖原来的类名//删除类名：DOM标签对象.classList.remove('类名')//切换类名：DOM标签对象.classList.toggle('类名')//类似开关，如果没有点击加上，如果有该类名，点击删除//判断是否包含类名：DOM标签对象.classList.contains('类名')</script>
</body></html>