ul列表自动定位当选中_一步一步实现一个古诗词网站（五）—

本文链接：https://blog.csdn.net/weixin_39942318/article/details/111342387

先回顾下上一篇我们做了什么

汪小黑：一步一步实现一个古诗词网站（四）——首页zhuanlan.zhihu.com

介绍了，DOM，BOM，实现了一个简单的搜索功能

这一节我们来做点不一样的东西～

那么咱先说，这一节你能学到什么呢？

怎么做一个列表
怎么通过js来操作dom，增加删除html节点
在批量操作节点时，如何提升效率或者做性能优化？

来看看，这一节我们要做的东西～～

当当当当！！

一个木得灵魂的诗人列表

什么？这样太简单了吧？？？？你怕不是在搞我？？

没错哈哈哈哈，了解过html和css的都知道，这就是一个简单的列表页html代码就是下面这样～

  <ul>
    <li>
        李白     称号：诗仙
    </li>
    <li>
        杜甫     称号：诗圣
    </li>
    <li>
        白居易    称号：诗魔
    </li>
    <li>
        苏轼     称号：诗神
    </li>
  </ul>

但是呢，我们今天的html代码是不含li标签的，只有一个ul标签，li标签都是通过js操作自动插上去的～

也就是说，今天的html代码是这样的

<ul></ul>

(至于css，这节咱不管，这节就是讲js和dom的，css咱就扔一边去吧哈哈哈哈哈哈，丑了点而已，问题不大

开始进入正题

为什么要把一个简单的事情搞得这么复杂呢？

能用html实现的东西，为什么要js掺合一脚呢？

因为实际当中，如果这个页面已经做好了，包含了很多诗人，这时如果让你增加或者删除诗人的话，需要重新做一遍这个页面，每次都要重新做

那么如果每个li里还包含了许多奇奇怪怪的东西呢，比如诗人详情，诗人诞辰？我去～这也太麻烦了把？

所以需要js的参与，来让事情自动化，你只用维护一堆诗人的数据，js自动生成页面，这样就会方便很多呀，这也是js最大的作用

那么咱开始做这个事情吧～

首先，咱们需要一个诗人的数据集合，我们选用js的数组来保存这些诗人信息

like this

const poet = [
  '李白     称号：诗仙',
  '杜甫     称号：诗圣',
  '白居易    称号：诗魔',
  '苏轼     称号：诗神'
]

然后，我们要想办法让这些数据自动渲染到页面上去

咱们思考下页面前后的变化

那么我们需要执行这些操作就可以了

找到页面上的ul节点
把数组的数据变成一个个的li节点
把li节点一个个插入到ul节点里

然后咱们需要把上面这些操作用代码表述清楚，毕竟用代码表述逻辑就是编程呗～

1.找到页面上的ul节点

const ul = document.getElementsByClassName('poet-list')[0];

为了更方便的找到这个ul，我给ul加了一个类名‘poet-list’

这样咱们就找到了需要添加dom的这个ul节点

至于const是什么？不知道的可以把它理解为var，后续的let也可以理解为var

2.遍历数组，把数组数据变成一个个的ul节点

for(let i = 0; i < poet.length; i++){
    let li = document.createElement('li')
    li.innerHTML = poet[i]
}

3.把li节点一个个插入到ul节点里

for(let i = 0; i < poet.length; i++){
    let li = document.createElement('li')
    li.innerHTML = poet[i]
    ul.appendChild(li) // 复用第二步的逻辑，增加这一段代码
}

然后就写完了，达到了预期的效果～～怎么样是不是很简单？

我们通过上面这些代码，实现了数据和页面分离，以后只用改变poet的那个数组，页面就会自动改变了～～

但是这里又有一个问题

上面我们其实是遍历数组的时候，每次新建一个节点，然后插入到dom中，但是这样会有些性能问题

为什么呢？浏览器每次操作dom，开销会很大，如果诗人数据是1000甚至10000，这样就会影响性能，因为操作了1000-10000次dom

那么我们能不能一次性插入这些节点呢？这样就是只操作一次dom了

当然是可以的，像下面这样

var fragment = document.createDocumentFragment()

for(let i = 0; i < poet.length; i++){
	let li = document.createElement('li')
	li.innerHTML = poet[i]
  fragment.appendChild(li)
}

ul.appendChild(fragment)

fragment可以理解为是一个dom储存装置，利用这个装置可以暂时储存dom，就可以把dom一次性插入到浏览器中去了～～

================================

回顾一下我们这节学的知识点吧