JS---DOM---设置和获取---标签内容和文本内容

设置和获取---标签内容和文本内容

总结---设置：

使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容, 是有标签效果的

想要设置标签内容, 使用innerHTML
想要设置文本内容, innerText或者textContent, 或者innerHTML, 推荐用innerHTML

总结---获取：

innerText可以获取标签中间的文本内容, 但是标签中如果还有标签, 那么最里面的标签的文本内容也能获取.---获取不到标签, 但文本可以获取
innerHTML才是真正的获取标签中间的所有内容

1. 关于innerText和textContent

设置和获取文本内容

    //点击按钮设置div中的文本内容
    my$("btn").onclick = function () {
      //设置标签中间的文本内容, 应该使用textContent属性
      my$("dv").textContent = "this is div标签";
      // my$("dv").innerText = "啊,这是div";

      //获取标签中间的文本内容
      console.log(my$("dv").textContent);
      // console.log(my$("dv").innerText);
    };

设置标签中的文本内容, 应该使用textContent属性, 谷歌, 火狐支持, IE8不支持
设置标签中的文本内容, 应该使用innerText属性, 谷歌, 火狐, IE8都支持

测试兼容的代码如下：

如果这个属性在浏览器中不支持, 那么这个属性的类型是undefined
判断这个属性的类型，是不是undefined, 就知道浏览器是否支持

设置任意的标签中间的任意文本内容

    //设置任意的标签中间的任意文本内容
    function setInnerText(element, text) {
      //判断浏览器是否支持这个属性
      if (typeof element.textContent == "undefined") {//不支持
        element.innerText = text;
      } else {//支持这个属性
        element.textContent = text;
      }
    }

View Code

获取任意标签中间的文本内容

    function getInnerText(element) {
      if (typeof element.textContent == "undefined") {
        return element.innerText;
      } else {
        return element.textContent;
      }
    }

View Code

测试

    my$("btn").onclick = function () {
      //console.log(getInnerText(my$("dv")));
      setInnerText(my$("dv"), "哈哈,我又变帅了");
    };

View Code

2. 关于innerText和innerHTML

如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

设置：

  my$("btn").onclick=function () {
    //my$("dv").innerText="哈哈";//设置文本
    //my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码

    //my$("dv").innerHTML="哈哈";
    //my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的
  };

获取的时候：

innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取

innerHTML才是真正的获取标签中间的所有内容

  //获取
  my$("btn2").onclick=function () {
    //可以获取标签中的文本内容
    //console.log(my$("dv").innerText);
    console.log(my$("dv").innerHTML);
  };