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

在前面的知识中，我们有提到一个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());

 })