DOM - 获取|修改标签里的内容 - 《前端笔记》

目的
DOM对象.innerHTML
了解document.write()
案例：随机点名

目的

通过这部分知识的学习，我们可以通过JS的语法，得到某个标签中的内容，也可以设置某个标签中的内容。
这样，我们就可以动态的修改页面的内容了

DOM对象.innerHTML

获取元素里面的内容（包括标签）
修改元素里面的内容（包括标签） ```javascript // 1. 找到页面的元素 let p = document.querySelector(‘p’)

// 2. 获取 p 标签里面的内容 let 内容 = p.innerHTML

// 3. 修改 p 标签里面的内容 p.innerHTML = ‘修改的内容’

<a name="hP19q"></a>
## DOM对象.innerText
- 获取元素里面的 **文本**内容
- 修改元素里面的 **文本**内容
```javascript
// 1. 找到页面的元素
let p = document.querySelector('p')
// 2. 获取 p 标签里面的内容
let 内容 = p.innerText
// 3. 修改 p 标签里面的内容
p.innerText = '修改的内容'

演示代码

<body>
  <p>我的名字叫做<strong>张飞</strong></p>
  <script>
    // 想要获取 p 里面的内容，首先得找到 p
    // 1. 找到页面中的 p 元素
    let p = document.querySelector('p')
    // 2. 获取p里面的内容
    let content = p.innerHTML // 我的名字叫做<strong>张飞</strong>
    // let content = p.innerText // 我的名字叫做张飞
    // console.log(content)
    // 3. 设置 p 里面的内容
    // p.innerHTML = '你是<i>李逵</i>吗？'
    p.innerText = '你是<i>李逵</i>'
    // 二者的区别是
    // innerHTML 能够获取和设置元素里面的 html 内容
    // innerText 能够获取和设置元素里面的 文本 内容
  </script>
</body>

无论是 innerText 还是 innerHTML ，都会覆盖元素中原有的内容。

了解document.write()

只能够设置 body 里面的内容，也会把body 中其他内容覆盖掉

document.write('内容')

案例：随机点名

<body>
<p></p>
<script>
  // 模拟一些人名
  let arr = ['疾风剑豪', '放逐之刃', '光辉女郎', '麦林炮手', '熬夜波比', '蒸汽机器人']
  // 需求：刷新页面，随机选择一个人物，放到页面的 p 标签中
  // 1. 让下标随机
  let m = arr.length - 1;
  let n = 0;
  let i = Math.floor(Math.random() * (m - n + 1) + n)
  // console.log(i)
  // 2. 找到人名。   arr[下标]
  let uname = arr[i]
  // 3. 找到 p 元素
  let p = document.querySelector('p')
  // 4. 把人名放到 p 里面
  p.innerHTML = uname
</script>
</body>