JS第七次笔记

爱泡脚的鸡腿
164 阅读4分钟

1.DOM（Document Object Model---文档对象模型）

（1） 作用：操作网页文档，开发网页特效和实现用户交互。
（2）核心思想：
<1>把网页标签当做对象来解析
<2>DOM会把标签解析成DOM对象
<3>修改这个对象的属性会自动修改到标签上，从而可以修改标签的结构，样式或者内容。

image.png 注意:“F12”打开开发者模式，选中div标签,在控制台输入“$0.innerHTML”，即可改变页面显示内容。

image.png

（3）document对象

image.png

（4）获单个取元素

image.png

<1>根据CSS选择器来获取DOM元素
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {}
  </style>
</head>

<body>
  <div class="box">我是一个盒子</div>//box是一个类名
  <p class="box tit">我是一个p标签
    <span>123</span>
  </p>

  <script>
    //1.通过CSS选择器获取元素 document.querySelector('css选择器')
    const box = document.querySelector('.box')//这是一个方法，需要接收返回值 所以要加上‘const’
    //用box接收 此时box就是一个DOM对象

    //console.log(box)//console.log只能单纯输出内容，不能打印格式
    console.dir(box)//用来输出对象格式数据


    const p = document.querySelector('p')//写入标签选择器
    const tit = document.querySelector('.box.tit')//交集选择器 既是box类名又是title类名
    console.log(p)

    const span = document.querySelector('.tit span')//soan是p标签的子标签
  </script>

</body>

[更多使用方法的查询文档](document.querySelector() - Web API | MDN)

（5）获取多个元素
<1>选择匹配的多个元素对象

image.png

<2>伪数组

image.png

<body>
  <ul>
    <li>我是第01个li</li>
    <li>我是第02个li</li>
    <li>我是第03个li</li>
  </ul>
  <ol>
    <li>我是第01个li</li>
    <li>我是第02个li</li>
    <li>我是第03个li</li>
  </ol>
  <script>
    //获取多个元素
    document.querySelectorAll("css选择器")
    //需求：所有的ol的后代li=> ol li
    const lis = document.querySelectorAll("ol li")
    console.log(lis)//ALL 方法获取到的是一个伪数组=>具备数组长度和索引
    //所以可以通过循环遍历的方法拿到每一个元素，但是不能使用数组的方法
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i])
    }
    lis.push('3')//报错信息=>伪数组没有push方法
  </script>


</body>

控制台显示的是Nodelist，而真正的数组则会在控制台输出Arry（0）(如下图）

image.png

（6）其它获取DOM元素的方法（现在比较少见 了解即可）

image.png

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      color: blue;
    }
  </style>
</head>

<body>
  <!-- 1.通过id获取元素 -->
  //注意：js中会把id作为唯一标识符，所以id不能重复
  <div id="box">第一个div</div>

  <!-- 2.通过标签获取元素 -->
  <span>我是span1</span>
  <span>我是span2</span>

  <!-- 3.通过类获取元素 -->
  <div class="nav">nav1</div>
  <div class="nav">nav2</div>

  <!-- 4.通过name名获取元素 -->
  //input标签中有name属性
  <input type="text" name="uname"></input>


  <script>
    //1.通过id获取元素
    //第一个box为变量名 括号内的box为id名
    const box = document.getElementById('box')
    console.log(box)//获取到的是元素

    //2.通过类名获取元素
    const navs = document.getElementsByClassName('nav')//类名无需加.
    console.log(navs)//获取到的是伪数组

    //3.通过标签名获取元素
    const spans = document.getElementsByTagName('span')
    console.log(spans)//获取到的是伪数组

    //4.通过name属性获取元素
    const inputs = document.getElementsByName('uname')
    console.log(uname)//获取到的是伪数组

  </script>

7.操作元素内容

DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）

<1>如果才能够操作标签元素的内容，则可以使用：

·1.对象.innerText属性
获取内容：只获取文本

image.png ·2.对象.innerHTML属性
获取内容：会把嵌套的标签获取到

image.png

8.操作元素常用属性

image.png

9.操作元素样式属性

image.png

（1）通过style属性操作元素样式

image.png

image.png

<div>文字</div>
  <script>
    const box = document.querySelector('div');
    //1.通过style属性控制元素样式
    //获取样式对象
    box.style.backgroundColor = '#8df'
    box.style.width = '100px'
    //注意：style属性获取的是行内样式，即style标签中的样式 权重较高
    console.log(box.style);
  </script>
(2)通过类名（className）操作元素样式（理解）

image.png

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: aqua;
      border: 1px solid red;
      font: size 30px;
    }
  </style>
</head>

<body>
  <div class"title">文字</div>
  <script>
    //需求：通过className的形式设置样式
    const box = document.querySelector('div');
    box.className = 'box';
    //问题：用新值换旧值 既将title换成box
</script>
（3）通过classList操作元素样式

image.png

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .nav {
      width: 300px;
      height: 300px;
      background-color: aqua;
      color: red;
    }

    .box {
      font-size: 30px;
      text-align: center;
      line-height: 300px;

      border: 10px solid pink;
    }
  </style>
</head>

<body>
  <div class="nav">文字描述</div>
  <script>
    //需求：通过classList 追加 删除 切换类名
    const div = document.querySelector('div')
    //1.追加类名=>在原类名的基础上，追加类名
    div.classList.add('box')
    //2.删除类名=>在原类名的基础上，删除类名
    div.classList.remove('box')
    //3.切换类名=>有则删除，没有则追加
    div.classList.toggle('nav')
    //4.判断类名是否存在=>返回true/false
    console.log(div.classList.contains('nav'))

  </script>
avatar
文章
阅读
粉丝