js之DOM获取元素,更改属性
Web Api基本认知作用和分类什么是DOMDOM树DOM对象获取DOM对象设置/修改DOM元素内容document.write() 方法对象.innerText 属性对象.innerHTML 属性设置/修改DOM元素属性常用属性样式属性通过style操作cssclassName操作cssclassList操作css表单元素属性定时器-间歇函数Web Api基本认知
作用和分类
作用: 使用js去操作html和浏览器分类 DOM(文档对象模型) BOM(浏览器对象模型)什么是DOM
document object model 文档对象模型用来呈现 以及于任意的HTML与XML交互的API浏览器提供的专门操作网页内容的功能作用:开发网页内容特效和实现用户交互DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树文档树更加直观提现标签与标签之间的关系DOM对象
根据html标签生成的js对象所有的标签属性都可以在DOM对象上找到修改DOM对象的属性,可以映射到标签身上DOM核心思想: 把网页内容当作对象来处理document对象是DOM里提供的一个对象用来访问和操作网页内容网页的所有内容都在document对象里边获取DOM对象
querySelector 获取匹配的第一个元素 没有匹配到返回null//获取第一个匹配的元素//document.querySelector('css选择器)
querySelectorAll 获取匹配的所有元素返回的是NodeList对象集合(伪数组)伪数组有长度有索引,没有pop(),push()等数组方法
//获取多个元素 里边只有一个得到的也是伪数组// document.querySelectorAll('css选择器')
其他方法获取DOM元素
设置/修改DOM元素内容
document.write() 方法
将文本内容追加到</body>前面的位置文本中包含的标签会被解析追加操作对象.innerText 属性
将文本内容添加或更新到任意位置不能解析标签对象.innerHTML 属性
将文本内容添加或更新到任意位置能解析标签// 1. 获取标签(元素)let div = document.querySelector('div')console.log('div', div);//2. innerText修改标签(元素)内容 不解析标签 div是一个对象//div.innerText = '有点意思'// div.innerText = '<strong>有点意思</strong>' //不识别标签//3. innerHTML解析标签div.innerHTML = '<strong>有点意思</strong>'
设置/修改DOM元素属性
常用属性
href title src属性语法 对象.属性=值// 1. 获取元素 图片let imgs = document.querySelector('img')//2. 修改元素属性 srcimgs.src = './images/1.webp'imgs.title = '这是标题'
样式属性
通过style操作css
语法 对象.style.样式属性=新值// 1. 获取元素let box = document.querySelector('div')// box.style.background = 'hotpink';//如果有-连接符 转成小驼峰命名法box.style.backgroundColor = 'hotpink;'//写到标签内box.style.marginTop = '200px'box.style.width = '600px'
className操作css
使用新值换旧值 会覆盖原先的类名// 1.获取元素let box = document.querySelector('div');// 2. 设置样式//元素.className='类名' 修改大量style样式// box.className = 'active' 直接赋值 把之前的类名覆盖box.className = 'one active'
classList操作css
追加一个类元素.classList.add('类名')删除一个类 元素.classList.remove('类名')切换一个类 元素.classList.toggle('类名')是否含有某个类名 元素.classList.contains('类名')//是一个方法 追加active类 不影响原先的类名// box.classList.add('active')//移除// box.classList.remove('one')//切换类 原先有就剪切掉 没有则加上box.classList.toggle('one')
表单元素属性
表单.value='新值'表单.type='password'disabled、checked、selected 为true或false定时器-间歇函数
每隔一段时间自动执行代码,不需要手动触发开启定时器 setInterval(函数,间隔时间)关闭定时器 clearInternal(变量名)单位是毫秒函数名字不需要加括号定时器返回的是一个id数字function fn() {console.log('我是间歇函数');}//可以直接写函数// setInterval(function() {// console.log('我是匿名函数');//}, 5000)//里边调用函数 不加()let timer = setInterval(fn, 1000)//返回的是一个序号console.log('打印接过来的后的值', timer);//关闭定时器//let 变量名=setInterval(函数,间隔时间)//clearInterval(变量名)clearInterval(timer)
