JS---DOM---設置和獲取---標簽內容和文本內容

設置和獲取---標簽內容和文本內容

 

總結---設置：

使用innerText主要是設置文本的, 設置標簽內容, 是沒有標簽的效果的

innerHTML是可以設置文本內容

innerHTML主要的作用是在標簽中設置新的html標簽內容, 是有標簽效果的

 

1. 想要設置標簽內容, 使用innerHTML 
2. 想要設置文本內容, innerText或者textContent, 或者innerHTML, 推薦用innerHTML

 

總結---獲取：

1. innerText可以獲取標簽中間的文本內容, 但是標簽中如果還有標簽, 那么最里面的標簽的文本內容也能獲取.---獲取不到標簽, 但文本可以獲取
2. 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);
    };

 

1.   設置標簽中的文本內容, 應該使用textContent屬性, 谷歌, 火狐支持, IE8不支持
2.   設置標簽中的文本內容, 應該使用innerText屬性, 谷歌, 火狐, IE8都支持

 

測試兼容的代碼如下：

•   如果這個屬性在瀏覽器中不支持, 那么這個屬性的類型是undefined
•   判斷這個屬性的類型，是不是undefined, 就知道瀏覽器是否支持

設置任意的標簽中間的任意文本內容

    //設置任意的標簽中間的任意文本內容
    function setInnerText(element, text) {
      //判斷瀏覽器是否支持這個屬性
      if (typeof element.textContent == "undefined") {//不支持
        element.innerText = text;
      } else {//支持這個屬性
        element.textContent = text;
      }
    }

 

獲取任意標簽中間的文本內容

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

 

測試

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

 

 

---

 

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);
  };