HTML 5_CSS 3_JavaScript講義（十二）- DOM編程

（1） 訪問HTML元素

1.1 根據(jù)ID訪問HTML元素

document.getElementById(idVal)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 根據(jù)ID訪問HTML元素 </title>
    <script type="text/javascript">
        var accessById = function()
        {
            alert(document.getElementById("a").innerHTML + "\n"
            + document.getElementById("b").value);
        }
    </script>
    </head>
<body>
    <div id="a">瘋狂Java講義</div>
    <textarea id="b" rows="3" cols='25'>輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)
        </textarea>
    <input type="button" value="訪問2個(gè)元素" onclick="accessById();"/>
</body>
</html>
根據(jù)ID訪問HTML元素

1.2 利用節(jié)點(diǎn)關(guān)系訪問HTML元素

parentNode 當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
previous 當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)
nextSibling 當(dāng)前節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)
childNodes 當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)
getElementsByTagName(tagName) 當(dāng)前節(jié)點(diǎn)的具有指定標(biāo)簽名的所有子節(jié)點(diǎn)
firstChild 當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
lastChild 當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

對于HTML頁面而言，瀏覽器會將頁面中的“空白” 也當(dāng)成文本節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 根據(jù)節(jié)點(diǎn)關(guān)系訪問HTML元素 </title>
    <style type="text/css">
        /* 定義改變背景色的CSS，表示被選中的項(xiàng) */
        .selected {
            background-color:#66f
        }
    </style>
    </head>
    <body>
    <ol id="books">
        <li id="java">瘋狂Java講義</li>
        <li id="ssh">輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</li>
        <li id="ajax" class="selected">瘋狂Ajax講義</li>
        <li id="xml">瘋狂XML講義</li>
        <li id="ejb">經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</li>
        <li id="workflow">瘋狂Android講義</li>
    </ol>
    <input type="button" value="父節(jié)點(diǎn)"
        onclick="change(curTarget.parentNode);"/>
    <input type="button" value="第一個(gè)"
        onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
    <input type="button" value="上一個(gè)"
        onclick="change(curTarget.previousSibling.previousSibling);"/>
    <input type="button" value="下一個(gè)"
        onclick="change(curTarget.nextSibling.nextSibling);"/>
    <input type="button" value="最后一個(gè)"
        onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
    <script type="text/javascript">
        var curTarget = document.getElementById("ajax");
        var change = function(target)
        {
            alert(target.innerHTML);
        }
    </script>
</body>
</html>
image.png

1.3 訪問表單控件

HTMLFormElement 訪問表單控件有如下三種方法：

  • formObj.elements[index] : 返回表單中第index個(gè)表單控件
  • formObj.elements['elementName'] : 返回表單中id或name為elementName的表單控件
  • formObj.elementName: 返回表單中id或name為elementName的表單控件
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 訪問表單控件 </title>
</head>
<body>
    <form id="d" action="" method="get">
        <input name="user" type="text" /><br />
        <input name="pass" type="text" /><br />
        <select name="color">
            <option value="red">紅色</option>
            <option value="blue">藍(lán)色</option>
        </select><br />
        <input type="button" value="第一個(gè)" onclick=
            "alert(document.getElementById('d').elements[0].value);" />
        <input type="button" value="第二個(gè)" onclick=
            "alert(document.getElementById('d').elements['pass'].value);" />
        <input type="button" value="第三個(gè)"    onclick=
            "alert(document.getElementById('d').color.value);" />
    </form>
</body>
</html>
訪問表單控件

1.4 訪問列表框，下拉菜單的選項(xiàng)

select.options[index] 訪問列表框，下拉菜單的第index+1個(gè)選項(xiàng)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 訪問列表項(xiàng) </title>
</head>
<body>
    <select id="mySelect" name="mySelect" size="6">
        <option value="java">瘋狂Java講義</option>
        <option value="ssh">輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</option>
        <option value="ajax" selected>瘋狂Ajax講義</option>
        <option value="xml">瘋狂XML講義</option>
        <option value="ejb">經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</option>
        <option value="workflow">瘋狂Android講義</option>
    </select><br />
    <input type="button" value="第一個(gè)" onclick=
        "change(curTarget.options[0]);" />
    <input type="button" value="上一個(gè)"    onclick=
        "change(curTarget.options[curTarget.selectedIndex - 1]);" />
    <input type="button" value="下一個(gè)" onclick=
        "change(curTarget.options[curTarget.selectedIndex + 1]);" />
    <input type="button" value="最后一個(gè)" onclick=
        "change(curTarget.options[curTarget.length - 1]);" />
    <script type="text/javascript">
        var curTarget = document.getElementById("mySelect");
        var change = function(target)
        {
            alert(target.text);
        }
    </script>
</body>
</html>

1.5 訪問表格子元素

caption 表格的標(biāo)題對象
HTMLCollection rows 表格里的所有表格行

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 訪問表格元素 </title>
</head>
<body>
    <table id="d" border="1">
    <caption>瘋狂Java體系</caption>
        <tr>
            <td>瘋狂Java講義</td>
            <td>輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
        </tr>
        <tr>
            <td>瘋狂Ajax講義</td>
            <td>經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
        </tr>
        <tr>
            <td>瘋狂XML講義</td>
            <td>瘋狂Android講義</td>
        </tr>
    </table>
    <input type="button" value="表格標(biāo)題" onclick=
        "alert(document.getElementById('d').caption.innerHTML);" />
    <input type="button" value="第一行、第一格" onclick=
        "alert(document.getElementById('d').rows[0].cells[0].innerHTML);" />
    <input type="button" value="第二行、第二格" onclick=
        "alert(document.getElementById('d').rows[1].cells[1].innerHTML);" />
    <input type="button" value="第三行、第二格" onclick=
        "alert(document.getElementById('d').rows[2].cells[1].innerHTML);" />
</body>
</html>
訪問表格子元素

（2） 修改HTML元素

  • innerHTML 大部分HTML頁面元素如<div>,<td>的呈現(xiàn)內(nèi)容
  • value 表單控件如<input>,<textarea>的呈現(xiàn)內(nèi)容
  • className
  • style
  • options[index]
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 編輯表格值 </title>
</head>
<body>
    改變第<input id="row" type="text" size="2" />行，
    第<input id="cel" type="text" size="2" />列的值為:
    <input id="celVal" type="text" size="16" /><br />
    <input id="chg" type="button" value="改變" onclick="change();" />
    <table id="d" border="1">
        <tr>
            <td>瘋狂Java講義</td>
            <td>輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
        </tr>
        <tr>
            <td>瘋狂Ajax講義</td>
            <td>經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
        </tr>
        <tr>
            <td>瘋狂XML講義</td>
            <td>瘋狂Android講義</td>
        </tr>
    </table>
    <script type="text/javascript">
        var change = function()
        {
            var tb = document.getElementById("d");
            var row = document.getElementById("row").value ;
            row = parseInt(row);
            // 如果需要修改的行不是整數(shù)，彈出警告
            if(isNaN(row))
            {
                alert("您要修改的行必須是整數(shù)");
                return false;
            }
            var cel = document.getElementById("cel").value ;
            cel = parseInt(cel);
            // 如果需要修改的列不是整數(shù)，彈出警告 
            if(isNaN(cel))
            {
                alert("您要修改的列必須是整數(shù)");
                return false;
            }
            // 如果需要修改的行或者列超出了表格的行或列，彈出警告
            if (row > tb.rows.length || 
                cel > tb.rows.item(0).cells.length)
            {
                alert("要修改的單元格不在該表格內(nèi)");
                return false;
            }
            //  修改單元格的值
            tb.rows.item(row - 1).cells.item(cel - 1).innerHTML
                = document.getElementById("celVal").value;
        }
    </script>
</body>
</html>
編輯表格第一行第一列的值

（3） 增加HTML 元素

3.1 創(chuàng)建或復(fù)制節(jié)點(diǎn)

document.createElement(Tag) 創(chuàng)建Tag標(biāo)簽對應(yīng)的節(jié)點(diǎn)

<script type="text/javascript">
    // 創(chuàng)建一個(gè)新節(jié)點(diǎn)
    var a = document.createElement("div");
    // 使用警告對話框輸出節(jié)點(diǎn)
    alert(a);
</script>
image.png

Node cloneNode(boolean deep) 復(fù)制當(dāng)前節(jié)點(diǎn)。當(dāng)deep為true時(shí)，表示在復(fù)制當(dāng)前節(jié)點(diǎn)的同時(shí)，復(fù)制該節(jié)點(diǎn)的全部后代節(jié)點(diǎn)；當(dāng)deep為false時(shí)，表示僅復(fù)制當(dāng)前節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 復(fù)制節(jié)點(diǎn) </title>
</head>
<body>
    <ul id = "d">
        <li>瘋狂Java講義</li>
    </ul>
    <script type="text/javascript">
        // 獲取ID為d的節(jié)點(diǎn)
        var ul = document.getElementById("d");
        // 復(fù)制ul的第二個(gè)子節(jié)點(diǎn)（不復(fù)制當(dāng)前節(jié)點(diǎn)的后代節(jié)點(diǎn)）
        var ajax = ul.firstChild.nextSibling.cloneNode(false);
        // 修改被復(fù)制的節(jié)點(diǎn)
        ajax.innerHTML = "瘋狂Ajax講義";
        // 將復(fù)制的節(jié)點(diǎn)添加到頁面中
        ul.appendChild(ajax);
    </script>
</body>
</html>
image.png

3.2 添加節(jié)點(diǎn)

appendChild(Node newNode) 將newNode添加成當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
insertBefore(Node newNode,Node refNode) 在refNode節(jié)點(diǎn)之前插入newNode節(jié)點(diǎn)
replaceChild(Node newChild,Node oldChild) 將oldChild節(jié)點(diǎn)替換成newChild節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 復(fù)制節(jié)點(diǎn) </title>
</head>
<body>
    <ul id = "d">
        <li>瘋狂Java講義</li>
    </ul>
    <script type="text/javascript">
        // 獲取ID為d的節(jié)點(diǎn)
        var ul = document.getElementById("d");
        // 復(fù)制ul的第二個(gè)子節(jié)點(diǎn)（不復(fù)制當(dāng)前節(jié)點(diǎn)的后代節(jié)點(diǎn)）
        var ajax = ul.firstChild.nextSibling.cloneNode(false);
        // 修改被復(fù)制的節(jié)點(diǎn)
        ajax.innerHTML = "瘋狂Ajax講義";
        // 將復(fù)制的節(jié)點(diǎn)添加到頁面中
        ul.insertBefore(ajax , ul.firstChild);
    </script>
</body>
</html>
image.png

3.3 為列表框，下拉菜單添加選項(xiàng)

add(HTMLOptionElement option,HTMLOptionElement before) 在before選項(xiàng)之前添加option選項(xiàng)。如果option選項(xiàng)添加在最后，則將before指定為null即可

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加選項(xiàng) </title>
</head>
<body id="test">
    <script type="text/javascript">
        // 創(chuàng)建<select.../>對象
        var a = document.createElement("select");
        // 為<select.../>對象增加10個(gè)選項(xiàng)
        for (var i = 0 ; i < 10 ; i++)
        {
            // 創(chuàng)建一個(gè)<option.../>元素
            var op = document.createElement("option");
            op.innerHTML = '新增的選項(xiàng)' + i;
            // 將新的選項(xiàng)添加到列表框的最后
            a.add(op , null);
        }
        // 設(shè)置列表框高度為5
        a.size = 5;
        // 將列表框增加成body元素的子節(jié)點(diǎn)
        document.getElementById("test").appendChild(a);
    </script>
</body>
</html>
image.png

使用Option構(gòu)造器
new Option(text,value,defaultSelected,selected)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加選項(xiàng) </title>
</head>
<body id="test">
    <script type="text/javascript">
        // 創(chuàng)建<select.../>對象
        var a = document.createElement("select");
        // 為<select.../>對象增加10個(gè)選項(xiàng)
        for (var i = 0 ; i < 10 ; i++)
        {
            // 創(chuàng)建一個(gè)<option.../>元素
            var op = new Option('新增的選項(xiàng)' + i , i);
            // 直接為指定選項(xiàng)賦值
            a.options[i] = op;
        }
        // 設(shè)置列表框高度為5
        a.size = 5;
        // 將列表框增加成body元素的子節(jié)點(diǎn)
        document.getElementById("test").appendChild(a);
    </script>
</body>
</html>
image.png

3.4 動態(tài)添加表格內(nèi)容

insertRow(index) 在index處插入一行
createCaption() 為表格創(chuàng)建標(biāo)題
createTFoot()
createTHead()
insertCell(long index) 在index處創(chuàng)建一個(gè)單元格

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加表格 </title>
</head>
<body id="test">
    <script type="text/javascript">
        // 創(chuàng)建一個(gè)表格對象
        var a = document.createElement("table");
        // 設(shè)置表格的邊框?yàn)?
        a.border=1;
        var caption = a.createCaption();
        caption.innerHTML = "表格標(biāo)題";
        // 為表格循環(huán)插入5行
        for (var i = 0 ; i < 5 ; i++)
        {
            // 插入行
            var tr = a.insertRow(i);
            // 為每行循環(huán)插入7列
            for (var j = 0 ; j < 7 ; j++)
            {
                // 循環(huán)插入7列
                var td = tr.insertCell(j);
                // 設(shè)置每個(gè)單元格的內(nèi)容
                td.innerHTML = "單元格內(nèi)容 " + i + j;
            }
        }
        //將表格元素添加到HTML文檔內(nèi)
        document.getElementById("test").appendChild(a);
    </script>
</body>
</html>
image.png

（4） 刪除HTML元素

4.1 刪除節(jié)點(diǎn)

removeChild(oldNode) 刪除oldNode子節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 刪除子節(jié)點(diǎn) </title>
</head>
<body id="test">
    <input id="add" type="button" value="增加" disabled
        onclick="add();"/>
    <input id="del" type="button" value="刪除" 
        onclick="del();"/>
    <div id="target" style="width:240px; height:50px;
        border:1px solid black">被控制的目標(biāo)元素
    </div>
    <script type="text/javascript">
        //獲取body元素
        var body = document.getElementById("test");
        //獲取被控制的目標(biāo)元素
        var target = document.getElementById("target");
        var add = function()
        {
            // 添加目標(biāo)元素
            body.appendChild(target);
            document.getElementById("add").disabled = "disabled";
            document.getElementById("del").disabled = "";
        }
        var del = function()
        {
            // 刪除目標(biāo)元素
            body.removeChild(target);
            document.getElementById("del").disabled = "disabled";
            document.getElementById("add").disabled = "";
        }
    </script>
</body>
</html>
image.png

4.2 刪除列表框，下拉菜單的選項(xiàng)

remove（long index） 刪除指定索引處的選項(xiàng)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 刪除列表項(xiàng) </title>
</head>
<body>
    <input id="opValue" type="text"/>
    <input id="add" type="button" value="增加"
        onclick="add();"/>
    <input id="del" type="button" value="刪除"
        onclick="del();"/><br />
    <select id="show" size="8" style="width:120px;">
    </select>
    <script type="text/javascript">
        var show = document.getElementById("show");
        // 增加下拉列表選項(xiàng)的函數(shù)
        var add = function()
        {
            // 以文本框的值創(chuàng)建一個(gè)<option.../>元素
            var op = new Option(document
                .getElementById('opValue').value);
            //增加選項(xiàng)
            show.options[show.options.length] = op;
        }
        var del = function()
        {
            // 如果有選項(xiàng)
            if(show.options.length > 0)
            {
                // 刪除最后的一個(gè)選項(xiàng)
                show.remove(show.options.length - 1);
            }
        }
    </script>
</body>
</html>

或直接將指定選項(xiàng)賦值且null也可刪除該選項(xiàng)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 刪除列表項(xiàng) </title>
</head>
<body>
    <input id="opValue" type="text"/>
    <input id="add" type="button" value="增加"
        onclick="add();"/>
    <input id="del" type="button" value="刪除"
        onclick="del();"/><br />
    <select id="show" size="8" style="width:120px;">
    </select>
    <script type="text/javascript">
        var show = document.getElementById("show");
        // 增加下拉列表選項(xiàng)的函數(shù)
        var add = function()
        {
            // 以文本框的值創(chuàng)建一個(gè)<option.../>元素
            var op = new Option(document
                .getElementById('opValue').value);
            //增加選項(xiàng)
            show.options[show.options.length] = op;
        }
        var del = function()
        {
            // 如果有選項(xiàng)
            if (show.options.length > 0)
            {
                // 刪除最后的一個(gè)選項(xiàng)
                show.options[show.options.length - 1] = null;
            }
        }
    </script>
</body>
</html>
image.png

4.3 刪除表格的行或單元格

deleteRow(long index) 刪除表格中index索引處的行
deleteCell(long index) 刪除某行index索引處的單元格

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 刪除表格的行和格 </title>
</head>
<body>
<input id="delrow" type="button" value="刪除表格最后一行"
    onclick="delrow();" /><br />
<input id="delcell" type="button" value="刪除最后一行的最后一格"
    onclick="delcell();" /><br />
    <table id="test" border="1" style="width:400px;">
        <caption>瘋狂Java體系</caption>
        <tr>
            <td>瘋狂Java講義</td>
            <td>輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
        </tr>
        <tr>
            <td>瘋狂Ajax講義</td>
            <td>經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
        </tr>
        <tr>
            <td>瘋狂XML講義</td>
            <td>瘋狂Android講義</td>
        </tr>
    </table>
    <script type="text/javascript">
        // 獲取目標(biāo)表格
        var tab = document.getElementById("test");
        // 刪除行的函數(shù)
        var delrow = function()
        {
            if (tab.rows.length > 0)
            {
                // 刪除最后一行
                tab.deleteRow(tab.rows.length - 1); 
            }
        }
        // 刪除目標(biāo)表格的最后一格
        var delcell = function()
        {
            // 獲取表格的所有行
            var rowList = tab.rows;
            // 獲取表格的最后一行
            var lastRow = rowList.item(rowList.length - 1);
            if(lastRow.cells.length > 0)
            {
                // 刪除表格的最后一格
                lastRow.deleteCell(lastRow.cells.length - 1);
            }
        }
    </script>
</body>
</html>
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、JS前言 （1）認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))，知道了CSS樣式(也稱為表示)，會使用HT...
    凜0_0閱讀 2,933評論 0贊 8
  • 本章內(nèi)容 理解包含不同層次節(jié)點(diǎn)的 DOM 使用不同的節(jié)點(diǎn)類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 777評論 0贊 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,166評論 1贊 92
  • 最近在學(xué)習(xí)javascript關(guān)于DOM的一些知識，在這里對DOM做一些總結(jié)。 1.DOM簡介 DOM是W3C的標(biāo)...
    風(fēng)之郁少閱讀 447評論 0贊 5
  • 文｜東東 周末早上看到朋友狀態(tài)，說如今讀三毛的文字，除了喜歡，更多是有很大的共鳴，所以忍不住看第二遍，第三遍。 我...
    郝東東閱讀 818評論 0贊 3

友情鏈接更多精彩內(nèi)容