JS-21-对元素 内容 / 样式 的操作

一、JavaScript-元素内容操作

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

(1).获取元素内容

1.innerHTML 获取的内容包含标签, innerText / textContent 获取的内容不包含标签;
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 设置内容, 新的内容都会覆盖原有的内容;

区别:
如果通过 innerHTML 设置数据, 数据中包含标签, 会转换成标签之后再添加;

如果通过 innerText / textContent 设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置；

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