js中 value、innerHTML、innerText和textContent的区别

  1. value:应用于表单的输入框(textarea除外)
  2. innerHTML:可以写入HTML代码,写入的HTML代码可以被解析,获得时候也可以获得HTML代码
  3. innerText:获得内容的时候,会忽略HTML代码,写入HTML代码不能解析。获得内容与HTML解析的内容一样
  4. textContent:获得内容的时候,会忽略HTML代码,写入HTML代码不能解析。获取的内容与源码内容一样
 
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>修改元素的文本title>
        <style type="text/css">
            div{
                width:300px;
                height:300px;
                float:left;
                border:1px solid blue;
                margin-left:50px;
            }
        style>
    head>
    <body>
        <div><p>i love youp>div>
        <div>div>
        <div>div>
        <div>div>
        <div>
            <p>J                 
            哥                 最    帅p>
            <a href="http://www.xxoo.com">xx                ooa>
        div>
        <div>div>

        <script type="text/javascript">
        var divs=document.getElementsByTagName('div');
        /*
            value :应用于表单的输入框---textarea
            innerHTML:与后两者的区别,可以写入html代码会被解析,并且可以获得html代码
            innerText:获得内容的时候,都会忽略html代码
            textContent:获得内容的时候,都会忽略html代码
        */
        //读取内容
        console.log(divs[0].innerHTML);
        console.log(divs[0].innerText);
        console.log(divs[0].textContent);

        //写入内容
        divs[1].innerHTML='

i miss you

'
; divs[2].innerText='

i miss you

'
; divs[3].textContent='

i miss you

'
; /* 比较innerText和textContent的区别 innerText 获取的内容和html解析的内容一样 textContent获取的内容与源代码的内容一样 */ console.log('%c'+divs[4].innerText,'color:red;'); console.log(divs[4].textContent); var str="

哥 最 帅

xx oo"
; // divs[5].innerText=str; // divs[5].textContent=str;
script> body> html>

你可能感兴趣的:(javascript)