JS中获取标签内容的方法对比

        在我们平时的JS编程中,经常要获取标签的内容对其进行操作,有很多细节的东西容易被我们忽略。现在我根据自己平时使用的方法进行简单地总结一下。如有错误,敬请指正。

        HTML结构如下:


<
html lang="en">
<
head>
   
<meta charset="UTF-8">
   
<title>Titletitle>
head>
<
body>
<
div id="box">
   
<p>这有个     第一个pp>




   
<p>这有个第二个pp>
   
<span>这是个

       
spanspan>
   
<br>



   
<a href="#">这有个a标签a>
div>

body>
html>


方法一、innerHTML

        此方法可获取标签中的所有的内容,包括标签、空格、文本、换行等。

        JS代码和效果图如下:


<
script>
   
var box = document.getElementById('box');
//    获取标签的内容
   
var box1 = box.innerHTML;
   
console.log(box1);
script>

 JS中获取标签内容的方法对比_第1张图片

innerHTML获取标签中内容

        如果想要清空标签的内容,innerHTML = "";即可

        如果想要设置标签中的内容,innerHTML = "填写想要设置的标签和内容";设置内容时,会把原有的内容全部覆盖。

        JS代码和效果图如下:

<script>
    var box = document.getElementById('box');
    box.innerHTML = '

你们被我h3替换啦!!!

'
;     console.log(box); script>

 

 JS中获取标签内容的方法对比_第2张图片

innerHTML替换标签中的内容

方法二、innerText

        此方法获取标签中的文本,不会获取标签(或者说可以过滤掉所有的标签)。如果有多个空格或者是换行,解析为一个空格。

        JS代码和效果图如下:

<script>
    var box = document.getElementById('box');
    var box2 = box.innerText;
    console.log(box2);
  script>

 

 JS中获取标签内容的方法对比_第3张图片

innerText获取标签内容

        如果想要清空标签的内容,innerText = "";即可

        如果想要设置标签中的内容,innerText = "填写想要设置的标签和内容";设置内容时,会把原有的内容全部覆盖。但是标签不会被解析,会直接以文本的形式打印在页面中。

        JS代码和效果图如下:

 

JS中获取标签内容的方法对比_第4张图片

innerText修改标签内容

 

        由于innerText在2016年才被正式规定为DOM的属性,所以对于IE和谷歌之外的老版本浏览器存在很多的兼容性问题。2016年后的浏览器都支持此属性。之前的浏览器使用textContent来获取标签中的内容。但是textContent在过滤掉标签时,会保留标签结构。

        innerText兼容性问题处理JS代码:

 

<script>
//    处理innerText的浏览器兼容性问题
   
function getInnerText(element) {
       
if (typeof element.innerText === 'string') {
           
return element.innerText;
       
} else {
           
return element.textContent;
       
}
    }
script>

 

         以上是我对innerHTML和innerText获取标签内容进行简单的总结,大家可以根据它们不同的特征,在做项目的时候进行相对应的使用。若文中出现疏漏,还望指出。

 

 

 


你可能感兴趣的:(JS)