小白速通JavaScript之DOM项目实战

最新推荐文章于 2024-09-11 15:33:18 发布

Gao_雪

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量568

点赞数 11

分类专栏： js 文章标签： javascript 开发语言前端 visual studio code vscode

本文链接：https://blog.csdn.net/oageux/article/details/140380660

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM操作二

实现简易版百度关键词搜索
在这里插入图片描述

首先，我们在不考虑鼠标交互的情况下，完成静态 HTML 页面
监听搜索框 Input 输入事件(这部分代码内置，下一章我们马上会讲到)
当输入内容是肺炎时，显示模糊搜索结果
当输入内容不是肺炎时，显示登录查看历史
HTML页面：搜索框，登录查看历史，肺炎相关列表

<body>
  <div>
    <nav>
      <!-- 头部搜索框区域 -->
    </nav>
    <main>
      <!-- 输入非'肺炎'情况 -->
      <section class="login">
        登录查看历史
      </section>
      <!-- 输入'肺炎'情况 -->
      <ul class="search-result">
        <li>
          <i class="search"></i>
          <p><em>肺炎</em>疫情实时动态</p>
          <i class="edit"></i>
        </li>
        ……
      </ul>
    </main>
  </div>
</body>

监听Input输入实践，处理区域隐藏

const input = document.querySelector('input');

// 监听键盘事件
input.addEventListener('keyup', function() {
  // this 是DOM节点，this.value可以获取input内输入的值
  console.log(this.value);
});

在 Input 输入框里面输入内容，内容会实时在 JSConsole 打出这就说明我们已经完成输入事件的监听。

监听输入肺炎时，显示肺炎查询结果

显示和隐藏我们知道可以利用 CSS 知识 display:block/none;进行控制。
因此首先我们修改 CSS 将登录查看历史设置可见，将搜索结果设置不可见

main .search-result {
  padding: 0;
  display: none;
}

接着修改JavaScript代码，动态控住显示和隐藏：

const input = document.querySelector('input');

const login = document.querySelector('.login');
const searchResult = document.querySelector('.search-result');

// 监听键盘事件
input.addEventListener('keyup', function() {
  // this 是DOM节点，this.value可以获取input内输入的值
  if (this.value === '肺炎') {
    login.style.display = 'none';
    searchResult.style.display = 'block';
  } else {
    login.style.display = 'block';
    searchResult.style.display = 'none';
  }
});

肺炎搜索结果动态显示

我们知道搜索结果肯定不会是页面写死的，在实际情况下，这些数据都会实时变换的。这部分数据是由 Javascript 发起网络请求返回的数据，然后利用动态生成节点的方法插入页面。

我们还未学习网络请求，暂时先模拟在 Javascript 代码中，如下代码

let data = [
  '<em>肺炎</em>实时疫情动态',
  '<em>肺炎</em>的症状有哪些症状',
  '<em>肺炎</em>武汉',
  '<em>肺炎</em>症状',
  '<em>肺炎</em>最新',
  '<em>肺炎</em>是怎么引起的',
  '<em>肺炎</em>最新消息',
  '<em>肺炎</em>实时',
  '<em>肺炎</em>症状及表现',
  '<em>肺炎</em>最新情况'
];

我们需要利用这份数组数据，生成多个li 标签内容，li 标签模板如下

<li>
  <i class="search"></i>
  <p><em>肺炎</em>疫情实时动态</p>
  <i class="edit"></i>
</li>

我们封装一个函数，用于生成这个DOM 节点，代码如下

function createSearchItem(txt) {
  const item = document.createElement('li');
  item.innerHTML = `<i class="search"></i><p>${txt}</p><i class="edit"></i>`;
  return item;
}

在这里我们使用 innerHTML 和 模板字符串 快速创建 li 内容。
最后我们需要遍历搜索结果数据数组，依次创建 li，并插入到页面中，代码如下

let data = [
  '<em>肺炎</em>实时疫情动态',
  '<em>肺炎</em>的症状有哪些症状',
  '<em>肺炎</em>武汉',
  '<em>肺炎</em>症状',
  '<em>肺炎</em>最新',
  '<em>肺炎</em>是怎么引起的',
  '<em>肺炎</em>最新消息',
  '<em>肺炎</em>实时',
  '<em>肺炎</em>症状及表现',
  '<em>肺炎</em>最新情况'
];

function createSearchItem(txt) {
  const item = document.createElement('li');
  item.innerHTML = `<i class="search"></i><p>${txt}</p><i class="edit"></i>`;
  return item;
}

const input = document.querySelector('input');

const login = document.querySelector('.login');
const searchResult = document.querySelector('.search-result');

// 监听键盘事件
input.addEventListener('keyup', function() {
  // this 是DOM节点，this.value可以获取input内输入的值
  if (this.value === '肺炎') {
    // 先把原始内容清空
    searchResult.innerHTML = '';
    for (let i = 0; i < data.length; i++) {
      searchResult.appendChild(createSearchItem(data[i]));
    }

    login.style.display = 'none';
    searchResult.style.display = 'block';
  } else {
    login.style.display = 'block';
    searchResult.style.display = 'none';
  }
});