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方法