Dom获取&属性操作

智小猪
191 阅读4分钟

Web API 基本认知

作用 : 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型)

image.png

DOM

1.认识DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
简单来说就是DOM是浏览器提供的一套专门用来操作网页内容的功能

2.DOM对象

浏览器根据html标签生成的 JS对象所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上

  • DOM的核心思想 : 把网页内容当做对象来处理

2.1 获取DOM对象

DOM对象：浏览器根据html标签生成的 JS对象,所有的标签属性都可以在这个对象上面找到

/*
语法: document.querySelector('css选择器')
*/
// 获取元素
const div = document.querySelector('div')
 // 打印对象
console.dir(div)  // dom 对象

CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

//选择匹配多个元素
document.querySelectorAll('css选择器')

<ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
 </ul>
<p id="nav">导航栏</p>
<script>
    // 1  获取多个元素 得到是伪数组  没有push() pop方法
	const list = document.querySelectorAll('.nav li') // 伪数组
    // 2 遍历伪数组
    for(let i = 0;i<list.length; i++){
        console.log(list[i])// 每一个小li对象
    }
    // 3 假设只有一个元素,获取到的也是伪数组
    // 4 如果选择器不存在则获取的是空数组 []
     const p = document.querySelectorAll('#nav')
    
</script>

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

querySelector()和querySelectAll() 注意事项 :

  • querySelector获取的是dom对象,可以直接使用dom语法进行操作
  • querySelectorAll获取的是伪数组,不可以直接使用dom语法.想要得到里面的每一个对象,使用for循环
  • 必须是字符串，也就是括号里面必须加引号

2.2 操作元素内容

想要修改标签元素的里面的内容,可以操作对象使用的点语法.可以使用如下两种方式：

  1. 对象.innerText 属性
  2. 对象.innerHTML 属性
<div class='box'>刘德华</div>
<script>
    // 1. 获取元素
    const box = document.querySelector('.box')
    // 2. 修改文字内容  对象.innerText 属性
    // 获取文本内容
    console.log(box.innerText)
    // 2.1修改文本内容
    box.innerText = '我喜欢绿色'
    // 2.2 不解析标签
    box.innerText = '<strong>波仔</strong>'
     // 3. innerHTML 解析标签
    console.log(box.innerHTML)
    box.innerHTML = '我要吃大肘子'
    box.innerHTML = '<strong>我要吃小龙虾</strong>'
</script>

两者方法的区别:
元素.innerText 属性 只识别文本，不能解析标签
元素.innerHTML 属性 能识别文本，能够解析标签
如果还在纠结到底用谁，你可以选择innerHTML

2.3 操作元素属性

2.3.1操作元素常用属性

最常见的常用属性比如： href、title、src 等

语法:

image.png

<img src="./images/1.webp" alt="">
  <hr>
 <a href="https://www.jd.com/">点我有惊喜</a>
<script>
	 /* 
      操作元素常用属性
      1 语法: 对象.属性 = 值
      2 常用属性
        href : 链接,一般用于a标签
        src : 文件路径,一般用于img标签
    */
    // 1. 获取图片元素
    const img = document.querySelector('img')
    // 2. 修改图片对象的属性   对象.属性 = 值
    img.src = './images/2.webp'
    img.title = '小波仔艺术照'
    // 3 获取链接元素
    const a = document.querySelector('a')
    // 4 修改链接对象的属性 
    a.href = 'https://www.mi.com/'
</script>
2.3.2 操作元素样式属性(三种方法)
  1. 通过 style 属性操作CSS
  2. 操作类名(className) 操作CSS
  3. 通过 classList 操作类控制CSS
1 通过style属性操作CSS

语法：

image.png

 <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">style属性修改样式</div>
  <script>
    /* 
    学习目标：元素样式操作
      1.语法：  元素.style.样式属性 = 值
     * 注意点： 有 - 的样式属性需要转成驼峰命名（去掉 -, 后面第一个字母大写） 
  */
    // 1 获取元素
    const box = document.querySelector('.box')
    // 2 修改样式属性   元素.style.样式属性 = 值
    box.style.width = '200px' // 别忘啦单位px 
    // 3 驼峰命名 去掉 - 后面的第一个字母大写 
    box.style.backgroundColor = 'blue'
    box.style.border = '10px  solid  red'
    box.style.marginTop = '100px'
  </script>
  • 注意：
  1. 修改样式通过style属性引出
  2. 如果属性有-连接符，需要转换为小驼峰命名法
  3. 赋值的时候，需要的时候不要忘记加css单位
2 操作类名(className) 操作CSS
  • 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
    语法:

image.png

 div {
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .box {
      color: green;
      font-size: 100px;
    }

    .nav {
      background-color: red;
      padding: 20px;
      border: 20px solid #000;
    }
  </style>
</head>

<body>
  <div>金波</div>
  <script>
    /* 
       2.className语法:   元素.className = '类名'
         * 注意点： 会覆盖原本的类名
    */
    // 1 获取元素
    const div = document.querySelector('div')
    // 2 添加类名  元素.className = '类名'
    // class属于js关键字 我们用className替代
    div.className = 'box'
    // 3 className会出现类名覆盖问题 
    div.className = 'nav'
    // 4 解决 className覆盖类名问题 保留之前的类名 中间用空格隔开
    div.className = 'box nav'
  </script>
  • 注意：
  1. 由于class是关键字, 所以使用className去代替
  2. className 是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3 通过 classList 操作类控制CSS
  • 为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
    语法:
image.png 
<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #333;
    }
    
    .nav {
      color: red;
    }

    .active {
      font-size: 40px;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div>小波仔</div>
  <script>
    /* 
        3.classList语法: 
          3.1 追加类：  元素.classList.add('类名')
          3.2 移除类：  元素.classList.remove('类名')
          3.3 切换类：  元素.classList.toggle('类名')
              切换意思： 如果有,则移除。 没有则追加。
    */
    // 3.1 追加类：  元素.classList.add('类名')
    // 获取元素 
    const div = document.querySelector('div')
    div.classList.add('box')
    // 追加类 多个类名使用逗号隔开
    div.classList.add('box', 'nav')
    // 3.2 移除类：  元素.classList.remove('类名')
    //div.classList.remove('nav')
   // 3.3 切换类：  元素.classList.toggle('类名')
   div.classList.toggle('active')
   div.classList.toggle('nav')
  </script>

使用 className 和classList的区别？

  • 修改大量样式的更方便
  • 修改不多样式的时候方便
  • classList 是追加和删除不影响以前类名
2.3.3 操作表单元素属性

语法:

 /* 
    获取:Dom对象.属性名
    设置:Dom对象.属性名 = 新值
    元素.value:获取文本
    元素.checked:获取选中状态(radio/checkbox)
    元素.disabled:获取禁用状态
  */

<input type="text" value="金波">
  <hr>
  <input type="checkbox" name="" id="" >
  <hr>
  <button>按钮</button>
  <script>
    // 1 获取元素  input 
    // [] 属性选择器 
    const int = document.querySelector('[type=text]')
    console.log(typeof int) // dom对象 
    console.dir(int)
    // 1 获取值  Dom对象.属性名
    console.log(int.value)  //金波
    // 2 设置表单的值 Dom对象.属性名 = 新值 
    int.value = '铁波'
    console.log(int.value)  //铁波
    int.type = 'password'  //文本看不到

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性 比如：disabled、checked、selected

// 获取元素 
    const ipt = document.querySelector('[type=checkbox]')
    console.log(ipt)
    console.log(ipt.checked) //false 只接受布尔值 
    ipt.checked = true  // 提倡
    //ipt.checked = 'true' // 隐式转换  不提倡
    // 获取button 
    const  btn = document.querySelector('button')
    //  disabled 禁用吗?
    console.log(btn.disabled) // false 默认为 false 不禁用 
    btn.disabled = true
  </script>
2.3.4 自定义属性
  • 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
  • 自定义属性：
    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取
 <div data-id="1" data-name="不知道" data-spm="201857">刘德华</div>
  <script>
    const div = document.querySelector('div')
    console.log(div.dataset) //对象 
    console.log(div.dataset.id) // 1
    console.log(div.dataset.name)// 不知道
    console.log(div.dataset.spm)// 201857
    // 如果是自定义属性 以data-开头 
    // 在dom对象上一律以dataset对象方式获取
  </script>

2.4 定时器-间歇函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

  1. 开启定时器 :

image.png

// 匿名函数写法:
setInterval(function () {
      console.log('前端程序员就是头发多')
}, 1000)
// 具名函数写法
function fn(){
    console.log('前端程序员就是头发多')
}
// setInterval(函数名, 间隔时间)  函数名不要加小括号
setInterval(fn, 1000)
// setInterval('fn()', 1000)
  1. 关闭定时器
image.png 
function fn() {
  console.log('一秒执行一次')
}
let timer = setInterval(fn, 1000)
console.log(timer)// 返回的是id号
// 关闭定时器
clearInterval(timer)

注意：

  • 函数名字不需要加括号
  • 定时器返回的是一个id数字
avatar
文章
阅读
粉丝