innerHTML和outerHTML區別以及document.querySelector

本文轉載自查看原文 2020-10-27 10:00 392 html

1.innerHTML：innerHTML 設置或獲取位於對象起始和結束標簽內的HTML

<body>
        <p>你好</p>
        <div id="test"><h5>就是喜歡你</h5></div>
        <script type="text/javascript">
            var hj=document.getElementById("test").innerHTML;
            alert(hj);
        </script>
</body>
 
輸出結果：
 
<h5>就是喜歡你</h5>

2.outerHTML ：outerHTML設置或獲取對象及其內容的HTML形式

<body>
        <p>你好</p>
        <div id="test"><h5>就是喜歡你</h5></div>
        <script type="text/javascript">
            var kj=document.getElementById("test").outerHTML;
            alert(kj);
        </script>
</body>
 
輸出結果：
 
<div id="test"><h5>就是喜歡你</h5></div>

3.document.querySelector：HTML 的DOM querySelector()方法可以不需要額外的jQuery等支持，也可以方便的獲取DOM元素，語法跟jQuery類似。

<body>
<p>你好 </p>
<div id="test"> <h5>就是喜歡你 </h5> </div>
<script type="text/javascript">
var hj= document.getElementById( "test").innerHTML;
alert(hj);
</script>
</body>
輸出結果：
<h5>就是喜歡你 </h5>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 document.getElementById和document.querySelector的區別 document.querySelector document.querySelector() document.querySelector和querySelectorAll方法 innerHTML和outerHTML有什么區別 innerHTML和outerHTML區別 document.querySelector()和document.querySelectorAll() 【Vue源碼】document.querySelector()方法 document.querySelector bug All In One javascript之原生document.querySelector和querySelectorAll方法