用js實(shí)現(xiàn)一個(gè)頁面部分刷新，怎樣從一個(gè)新的html文件里獲取到需要的標(biāo)簽節(jié)點(diǎn)，我該怎么做？麻煩大家了。

問題描述:在一個(gè)頁面中，當(dāng)點(diǎn)擊a標(biāo)簽時(shí)，把原頁面的某個(gè)節(jié)點(diǎn)更換成一個(gè)新的html文件中某個(gè)節(jié)點(diǎn)，我只能做到把另一個(gè)html頁面的所有內(nèi)容全部獲取到并替換，不能獲取到另一個(gè)html文件指定的某個(gè)節(jié)點(diǎn)，我不會(huì)jQuery，麻煩大家最好用js，謝謝大家。

問題出現(xiàn):學(xué)校要我們自己做一個(gè)網(wǎng)站，我做出了一個(gè)主頁面，想通過加載新的HTML文件中的節(jié)點(diǎn)來替換主頁面的某個(gè)標(biāo)簽，但是我不能獲取到新的html文件的節(jié)點(diǎn)，我找了網(wǎng)上好多教程，但是他們都是用jQuery實(shí)現(xiàn)的。

相關(guān)代碼:
index.html

        <nav id="nav">
            <div class="container">
                   <header class="container-header clearfix">
                    <ul>
                        <li><a href="#">主頁</a></li>
                        <li><a href="javascript:;">菜單</a></li>
                        <li><a href="#">我的</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                </header>
                <div class="container-body">
                    <div class="account-container">
                          <div class="body-title">美好心情，從一杯奶茶開始</div>
                          <div class="account">
                                 <a href="#">登錄</a>
                                 <a href="#">注冊(cè)</a>
                          </div>
                    </div>
                </div>
            </div>
        </nav>

menu.html
<body>

     <section class="account-container">
           <div class="body-title">菜單</div>
           <div>
                 <ul>
                       <li><a href="#">飲品</a></li>
                       <li><a href="#">食物</a></li>
                       <li><a href="#">禮物</a></li>
                 </ul>
           </div>
     </section>

</body>

js代碼:
window.onload=function() {

var containerHead=document.getElementsByClassName("container-header")[0];
var childA=containerHead.getElementsByTagName("li")[1].getElementsByTagName("a");
childA.onclick=ajaxFunction();
var xmlhttp;
function ajaxFunction(){

// 調(diào)用實(shí)例化對(duì)象方法

    createXMLHttpRequest();
    //設(shè)置回調(diào)方法
    if(xmlhttp!=null){
            xmlhttp.onreadystatechange=callBack;
            xmlhttp.open("GET","./menu.html",true);
            xmlhttp.send();
    }
}

//實(shí)例化xmlhttp對(duì)象
function createXMLHttpRequest(){

        if(window.XMLHttpRequest) {
        //IE7,chrome,safari,firefox
        xmlhttp=new XMLHttpRequest();
    }else {
        //IE6,IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

}
//響應(yīng)函數(shù)
function callBack(){

        if(xmlhttp.readyState==4&&xmlhttp.status==200) {

// var rel=xmlhttp.responseText;

        var containerText=xmlhttp.documentElement;

// document.getElementsByClassName("account-container")[0].innerHTML=containerText;

}
}
期待:獲取menu.html的一個(gè)指定節(jié)點(diǎn)（不是獲取一個(gè)文件的所有內(nèi)容）并替換掉主頁面的一個(gè)節(jié)點(diǎn)，實(shí)現(xiàn)局部刷新的效果

回答

編輯回答

舊言

1.http協(xié)議基本上沒法實(shí)現(xiàn)挑節(jié)點(diǎn)下載網(wǎng)頁內(nèi)容,肯定都是請(qǐng)求完整頁面回來做解析的.
2.如果不想增加用戶端的傳輸量,特別是目標(biāo)特別大的話,可以考慮服務(wù)器上下載解析.不過,你的情況應(yīng)該還不需要這樣.

2018年8月13日 23:54

編輯回答