DOM操作之获取HTML、文本和值

时间:2024-03-04 14:44:58

在前面的知识中,我们有提到一个text()方法用来获取文本,其实,在jQuery中,获取HTML和文本的方法有很多,下面依次演示这些方法。

在开始操作前,我们先在html中添加如下代码,后期所有的操作都在此基础上进行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
    <div id="one">北京你好</div>
    <div id="two"><span>上海也很好</span>,风景秀丽<a>重庆</a></div>
    <input type="text" id="username" value="tom" />
</body>
</html>

html()

在JavaScript中,可以通过innerHTML方法获取元素包含的具体内容。

$(function(){
       console.log(document.getElementById(\'one\').innerHTML); 
       console.log(document.getElementById("two").innerHTML);
 })

从上面的例子中我们可以看到,innerHTML会把节点包含的【文本 和 元素标签内容】都给抓取出来,在jQuery中,也有一个类似的方法,可以获取节点包含的内容,那就是html()。

 $(function(){
      console.log($(\'#one\').html()); 
      console.log($(\'#two\').html()); 
 })

目前看起来,两个方法是一样的,但是其实网上有很多地方有提出innerHTML对于像table类的元素标签不起作用,还会报错,具体的我没有研究,下次应该会看一下。

很显然,html()除了可以获取节点内容外,还可以设置节点内容。

 $(function(){
       $(\'#one\').html("天津你也好"); 
       $("#two").html("<p><a href=\'http://www.chongqing.com\'>重庆</a>很好</p>");
 })

当我们向html()方法中传递参数的时候,这个参数就会成为匹配元素的内容,这个参数可以说是纯文本,也可以是html标签内容。

text()

在JavaScript中,可以通过innerText方法,获取元素的纯文本内容。

$(function(){
      console.log(document.getElementById(\'one\').innerText);
      console.log(document.getElementById("two").innerText); 
 })

在jQuery中,也有一个类似的方法,可以获取纯文本,那就是text(),这个方法只对文本起作用,在获取节点的内容时,会把html标签删除,只保留文本内容。

$(function(){
      console.log($("#one").text()); 
      console.log($("#two").text());
 })

这两个方法在获取节点内容的时候,效果几乎相同,但是需要特别注意的是,在《锋利的jQuery》一书中,提到innerText在Firefox浏览器中并不能运行,但我试验的时候是没有报错,而是正常运行,不知道是不是版本的原因。

自然,text()方法还可以用来设置节点内容。

$(function(){
      $("#one").text("百度");
      $("#two").text("<a href=\'http://www.baidu.com\'>百度</a>");
 })

也就是说,即使在内容里添加了html标签,也会被当做纯文本解析。

val()

val()类似于JavaScript中的value属性,可以用来设置和获取元素的值,无论元素是文本框、下拉列表还是单选框,它都可以返回元素的值,如果元素为多选,则返回一个包含所有选择的值的数组。

 $(function(){
        console.log($("#username").val());  
 })

 $(function(){
        $("#username").val(\'jack\');
        console.log($("#username").val());  
 })