使用js去操作html和浏览器
DOM:文档对象模型 BOM:浏览器对象模型
用来呈现 ,以及与任意 HTML 或 XML文档交互的
含义: 将HTML文档以树状结构直观地表现出来 作用: 直观地体现了标签与标签之间的关系
含义: 浏览器根据html标签生成的JS对象 核心思想: 把网页内容当作对象来处理
let divObj = document.querySelector('div')
console.log(typeof divObj)
// 显示的是object
例如:document对象 document.write
1.选择单个元素
document.querySelector('选择器') //选择器一定是用引号引起来
匹配是使用深度优先先序遍历,从文档标记中的第一个元素开始,并按子节点的顺序依次遍历。 返回值: 匹配的第一个元素, 如果没有匹配到,则返回null
<ul>
<li class="ul">1</li>
<li id="ul">2</li>
<li>3</li>
</ul>
<script>
// 根据CSS选择器来获取DOM元素(重点)
// 1. querySelector
// 语法:
// 参数:css选择器
// 作用:
// 返回值: 匹配的第一个元素, 如果没有匹配到,则返回null
let ulObj1 = document.querySelector('ul') //标签选择器
let ulObj2 = document.querySelector('.ul') // 类名选择器
let ulObj3 = document.querySelector('#ul') // id名选择器
let ulObj4 = document.querySelector('li:nth-child(1)') // 结构伪类选择器
let ulObj5 = document.querySelector('ul li') // 后代选择器选择器
let ulObj6 = document.querySelector('ul>li') // 子代选择器选择器
/* ... 所有选择器都可以 ... */
let liObj = document.querySelector('li') // 只能找到第一个li
let divObj = document.querySelector('div') // 没有获取到就会返回null
</script>
作用:在文档中根据CSS选择器来查询获取元素
document.querySelectorAll('选择器')
作用:返回对象集合NodeList
document.querySelectorAll('li')
注意:
例如:
let lis = document.querySelectorAll('li')
console.log(lis)
for (let i = 0 ; i < lis.length ; i ++) {
lis[i].innerHTML = ' 修改啦!'
}
querySelectorAll() 方法获取到的元素是伪数组,有length,索引号等。 无论有无获取到元素,querySelectorAll() 始终获取的是伪数组 伪数组与数组最大的不同,就是伪数组不能使用数组的pop , push等方法 例如:
// 没有div元素
let divs = document.querySelectorAll('div')
console.log(divs)
返回的结果:
// 通过id名来获取
let idObj = document.getElementById('ul')
console.log(idObj)
// 通过类名来获取
let classObj = document.getElementsByClassName('ul')
console.log(classObj)
// 通过标签名来获取
let tagObj = document.getElementsByTagName('ul')
console.log(tagObj)
// 拓展补充
// body的获取方式
console.log(document.body)
// 其他类似获取方法
console.log(document.title)
console.log(document.head)
// 获取html方法
console.log(document.documentElement)
例如:
let info = document.querySelector('div')
info.innerText = '<h1>喜喜</h1>
显示为
例如:
let info = document.querySelector('div')
info.innerHTML = '<h1>哈哈哈</h1>'
显示为
通过对象的学习,我们知道了 对象.属性 = 值
,那么我们就可以利用这一特性来修改元素的属性
例如:
<img src="./images/1.jpg" width="500" alt="" />
<script>
// 设置/修改元素常用属性(src 、title等属性)
let pic = document.querySelector('img')
pic.src = "./images/3.jpg"
pic.title = '我是一张图片'
</script>
语法:元素.className = 'css类名'
例如:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.active {
width: 300px;
height: 300px;
background-color: lightgreen;
margin-left: 100px;
border-radius: 20px;
}
</style>
<body>
<div></div>
<script>
// 使用className操作类名修改样式
let a = document.querySelector('div')
a.className = 'active'
</script>
</body>
有覆盖问题:是用className赋值会覆盖以前的类名
语法:
// 获取到当前DOM元素他的一个 类的集合列表
元素.classList
// 添加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
// 检测一个元素是否有某个类名 有就是true, 没有就是false
元素.classList.contains('类名')
classList 是追加和删除不影响以前类名 注意:add remove toggle contains 等都是方法,用()进行调用,要与属性区分开
语法:对象.style.样式属性 = 值
例如:
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<body>
<div class="box"></div>
<script>
// 通过style控制样式属性
// 语法:对象.style.样式属性名 = 值
let a = document.querySelector('.box')
a.style.backgroundColor = 'red'
a.style.width = '100px'
a.style.height = '100px'
</script>
</body>
注意点
// 获取
DOM对象.属性名
// 设置
DOM对象.属性名 = 新值
布尔类型属性: checked、selected、 disabled , 属性值是布尔值(true / false)
例如
let inputObj1 = document.querySelector('.inp1')
inputObj1.type = 'password'
let inputObj2 = document.querySelector('.inp2')
inputObj2.checked = true
使用场景: 网页中的倒计时、轮播图 作用: 每隔一段时间,重复调用一个函数
语法:
// 开启定时器
setInterval(函数 , 间隔时间)
作用:
函数名字不需要加括号 例如:
function fn() {
document.write('fn 函数执行啦!')
}
setInterval(fn , 1500) // 1.5秒执行一次
效果图:
语法:
let 变量名 = setInterval(函数 , 间隔时间)
clearInterval(变量名)
注意
例如:
function fn() {
document.write('fn 函数执行啦!<br />')
}
// 关闭定时器语法:clearInterval(定时器id)
let close = setInterval(fn , 1500)
clearInterval(close)