06-元素内容操作

<div>
    我是div
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>

• 1. 获取元素内容 (innerHTML) / (innerText) / (textContent)

  • 1.1 innerHTML 获取的内容包括标签, innerText / textContent 获取的内容不包含标签
  • 1.2 innerHTML / textContent 获取的内容不会去除两端的空格, innerText 获取的内容会去除两端的空格

    let oDiv = document.querySelector("div");
    console.log(oDiv.innerHTML);
    console.log(oDiv.innerText);
    console.log(oDiv.textContent);
  

• 2. 设置元素内容 (innerHTML) / (innerText) / (textContent)

  • 2.1 特点: 无论通过 innerHTML / innerText / textContent 设置内容, 新的内容都会覆盖原有的内容

    let oDiv = document.querySelector("div");
    oDiv.innerHTML = "123";  // <div>123</div>
    oDiv.innerText = "456";  // <div>123</div>
    oDiv.textContent = "789";  // <div>123</div>
  

  • 2.2 区别: 如果通过 innerHTML 设置数据, 数据中包含标签, 会转换成标签之后再添加,
        如果通过 innerText / textContent 设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置

    let oDiv = document.querySelector("div");
    oDiv.innerHTML = "<span>我是span</span>";
    oDiv.innerText = "<span>我是span</span>";
    oDiv.textContent = "<span>我是span</span>";
  

  • 2.3 兼容性处理

    let oDiv = document.querySelector("div");
    setText(oDiv, "www.it666.com");
    function setText(obj, text) {
        if ("textContent" in obj){
            obj.textContent = text;
        }else {
            obj.innerText = text;
        }
    }