10、DOM基础（元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消）-阿里云开发者社区

10、DOM基础（元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消）

2022-11-22 121

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 10、DOM基础（元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消）

1、什么是DOM

1、DOM一般指文档对象模型。文档对象模型（Document Object Model，简称DOM），DOM通过document对象，为开发者提供大量的接口（api），来获取节点，操作DOM树。

节点类型	分类
元素节点	获取元素节点：`querySelector()`
属性节点	`element.src`、`element.id`
文本节点	`innerHTML`
网页效果	操作元素节点、属性节点、文本节点、以及修改元素的样式

获取节点方法
`getElementById()`	通过id获取节点
`getElementsByClassName()`	通过类获取节点集合
`querySelector()`	通过选择器获取节点
`querySelectorAll()`	通过选择器获取节点集合

  <script>
    // 1、通过getElementById()方法，返回一个dom节点
    var container = document.getElementById('container');
    console.log(container.innerHTML);   // 通过innerHTML获取文本节点的内容，输出结果为：Hello world!
    container.innerHTML = 'Hello jasmine!';   // 也可以修改文本节点的内容
    console.log(container.innerHTML);   // 输出结果为：Hello jasmine!
    // 2、通过getElementsByClassName()方法，返回一个dom集合
    var btn = document.getElementsByClassName('btn');
    // 想要获取内容需要遍历
    for (let i = 0; i < btn.length; i++) {
      console.log(btn[i].innerHTML);
    }
    // 3、通过querySelector()方法，返回一个dom节点，推荐使用选择器方法
    var container = document.querySelector('#container');
    console.log(container.innerHTML);
    container.innerHTML = 'Hello jasmine_qiqi!';
    console.log(container.innerHTML);
    // 4、通过querySelectorAll()方法，返回一个dom集合，推荐使用选择器方法
    var btn = document.querySelectorAll('.btn');
    for (let i = 0; i < btn.length; i++) {
      console.log(btn[i].innerHTML);
    }
  </script>

2、事件类型（轮播图、改变颜色、选中取消）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      justify-content: space-around;
      border: 1px solid black;
      margin: 0px;
      padding: 0px;
    }
    /* 案例一 */
    .box {
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
    }
    /* 案例二 */
    .box1 {
      width: 200px;
      height: 100px;
      display: flex;
      justify-items: center;
      align-items: flex-end;
      position: relative;
    }
    .box1_button {
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
    }
    .box1 img {
      max-width: auto;
      max-height: auto;
      width: 100%;
      height: 100%;
    }
    /* 案例三 */
    .case3 p {
      cursor: pointer;
    }
    .active {
      background-color: antiquewhite;
      cursor: pointer;
    }
    /* 案例四 */
    .case4 {
      width: 150px;
      height: 200px;
      overflow: hidden;
    }
    .case4 .container {
      width: 450px;
      height: 80px;
      display: flex;
      transition: transform 0.3s;
    }
    /* .case4 .container:hover {
      transform: translate(-150px);
    } */
    .case4 .container img {
      width: 150px;
      height: 80px;
    }
    .case4 .btnList {
      display: flex;
      align-content: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <!-- 案例一 -->
  <div class="case1">
    <h1>案例一</h1>
    <div class="box">
      <button>按钮</button>
    </div>
  </div>
  <!-- 案例二 -->
  <div class="case2">
    <h1>案例二</h1>
    <div class="box1">
      <img src="../image//1.jpg" alt="">
      <div class="box1_button">
        <button class="btn">1</button><button class="btn">2</button><button class="btn">3</button>
      </div>
    </div>
  </div>
  <!-- 案例三 -->
  <div class="case3">
    <h1>案例三</h1>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
  </div>
  <!-- 案例四 -->
  <div class="case4">
    <h1>案例四</h1>
    <div class="container">
      <img src="../image//1.jpg" alt="">
      <img src="../image//2.jpg" alt="">
      <img src="../image//3.jpg" alt="">
    </div>
    <div class="btnList">
      <button class="button">1</button>
      <button class="button">2</button>
      <button class="button">3</button>
    </div>
  </div>
  <script>
    // 设置样式
    var btn = document.querySelector('button');
    // 1、通过backgroundColor属性，事件监听函数(点击)，颜色变黄色
    btn.onclick = function () {
      box.style.backgroundColor = 'yellow';
    }
    // 2、鼠标移入，颜色变黑色
    var box = document.querySelector('.box');
    box.onmouseenter = function () {
      this.style.backgroundColor = 'black';
    }
    // 3、鼠标移出，恢复颜色
    box.onmouseleave = function () {
      this.style.backgroundColor = 'antiquewhite';
    }
    // 4、通过src属性，按钮切换图片
    var img = document.querySelector('img');
    var imageSrcList = ['../image//1.jpg', '../image//2.jpg', '../image//3.jpg']
    var btn = document.querySelectorAll('.btn');
    for (let i = 0; i < btn.length; i++) {
      btn[i].onclick = function () {
        img.src = imageSrcList[i];
      }
    }
    // 5、通过className属性，设置选中样式
    var pList = document.querySelectorAll('p');
    for (let i in pList) {
      pList[i].onclick = function () {
        if (this.className === 'active') {
          this.className = '';
        } else {
          this.className = 'active';
        }
      }
    }
    // 6、通过transform属性，点击按钮切换图片（过渡效果）
    var btnList = document.querySelectorAll('.button');
    var container = document.querySelector('.container');
    for (let i in btnList) {
      btnList[i].onclick = function () {
        console.log(btnList[i].innerHTML);
        container.style.transform = `translate(${-150 * i}px)`;
      }
    }
  </script>
</body>
</html>

10、DOM基础（元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消）

1、什么是DOM

2、事件类型（轮播图、改变颜色、选中取消）

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

10、DOM基础（元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消）

1、什么是DOM

2、事件类型（轮播图、改变颜色、选中取消）

热门文章

最新文章

相关电子书

相关实验场景