文章目录
📈「作者简介」:不知名十八线技术博主
📚「推荐主页」:阿珊和她的猫
🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)
原生JavaScript提供了多种方法来获取页面内容。
以下是一些常用的获取页面内容的方法:
1. 获取元素文本内容:textContent
、innerText
和innerHTML
textContent
属性返回指定元素及其后代元素的文本内容,不会返回HTML标签。innerText
属性返回指定元素及其后代元素的处理过的文本内容,并保留换行和空格等格式。innerHTML
属性返回指定元素及其后代元素的所有内容,包括HTML标签。
当涉及获取元素的文本内容时,可以使用textContent
、innerText
和innerHTML
这三种属性。下面是它们的代码案例:
- 使用
textContent
获取元素文本内容:
const element = document.getElementById('myElement');
const textContent = element.textContent;
console.log(textContent);
// 将页面中的"p"标签以键名的形式保存在Map对象中
// 键名所对应的键值为该"p"标签的文字内容
const _elementKey = () => {
// 补全代码
// 1. 获取p标签的DOM
var p = document.querySelector('p');
// 2. 获取p标签的文字内容
var pContent = p.textContent
// 3.创建一个Map对象实例
var map = new Map()
// 4.为Map实例添加键值对
map.set(p,pContent)
return map
}
- 使用
innerText
获取元素文本内容:
const element = document.getElementById('myElement');
const innerText = element.innerText;
console.log(innerText);
- 使用
innerHTML
获取元素文本内容(包括HTML标签):
const element = document.getElementById('myElement');
const innerHTML = element