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

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

總結---設置：

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

設置：

  my$("btn").onclick=function () {
    //my$("dv").innerText="哈哈";//設置文本
    //my$("dv").innerText="<p>這是一個p</p>";//設置html標簽的代碼

    //my$("dv").innerHTML="哈哈";
    //my$("dv").innerHTML="<p>這是一個p</p>";//設置Html標簽的
  };

獲取的時候：

  //獲取
  my$("btn2").onclick=function () {
    //可以獲取標簽中的文本內容
    //console.log(my$("dv").innerText);
    console.log(my$("dv").innerHTML);
  };