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

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. 修改元素属性 src
        imgs.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)