js之DOM获取元素,更改属性

Web Api基本认知
- 作用和分类
- 什么是DOM
- DOM树
- DOM对象
获取DOM对象
设置/修改DOM元素内容
- document.write() 方法
- 对象.innerText 属性
- 对象.innerHTML 属性
设置/修改DOM元素属性
- 常用属性
- 样式属性
- - 通过style操作css
  - className操作css
  - classList操作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)

js之DOM获取元素,更改属性相关推荐

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
JS DOM获取元素属性+操作方法
JS DOM获取元素属性+操作方法文章目录 JS DOM获取元素属性+操作方法基础属性 title属性 tagName属性 : 获取标签名 className属性 : 获取类名 Nodelist. ...
《web开发： JavaScript DOM获取元素》
一.JavaScript DOM获取元素 1. 如何获取页面元素 DOM在我们实际开发中主要用来操作元素获取页面中的元素可以使用以下几种方式: (下面的方法都是Web APIs) 根据 ID 获 ...
Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
JavaScript DOM获取元素
API 和Web API 1.API API ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件 ...
DOM获取元素位置的三大系列offset/scroll/client
2019独角兽企业重金招聘Python工程师标准>>> 我们使用元素.style.left在style标签中设置的样式的值都获取不到. 现在就说一下三大系列吧,首先明确documen ...
DOM获取元素、事件基础、操作元素、节点操作
什么是DOM? 文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口. W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式. DO ...
DOM——获取元素的方式
document.getElementById("id属性的值"): //可以通过元素的 id 来获取元素,返回的是一个元素对象 document.getElementByName ...
js通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <meta char ...

js之DOM获取元素,更改属性

js之DOM获取元素,更改属性

Web Api基本认知

作用和分类

什么是DOM

DOM树

DOM对象

获取DOM对象

设置/修改DOM元素内容

document.write() 方法

对象.innerText 属性

对象.innerHTML 属性

设置/修改DOM元素属性

常用属性

样式属性

通过style操作css

className操作css

classList操作css

表单元素属性

定时器-间歇函数

js之DOM获取元素,更改属性相关推荐

最新文章

热门文章