JavaScript基础（13.Dom内容文本操作）

先随意写一个HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">
    某电
    <a>百度</a>
</div>
</body>
</html>

打开Console操作，看输出即可学习：

可以看出innerText只是获取文本

而innerHTML可以获得包括标签，即为获取全部内容。

继续：

JavaScript基础（13.Dom内容文本操作）

当我改变后就是这样，注意看上面的字也变了

如果加入标签却发现变成了字符串：

JavaScript基础（13.Dom内容文本操作）

改成这样就好了：

JavaScript基础（13.Dom内容文本操作）

源码稍作修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">
    某电
    <a>百度</a>
    <input type="text" id="i2"/>
</div>
</body>
</html>

打开页面和Console:

在输入框中随意输入，然后在Console中写：

JavaScript基础（13.Dom内容文本操作）

value为获取内容

我们继续：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">
    某电
    <a>百度</a>
</div>
<select id="i3">
    <option value="1">某电</option>
    <option value="2">摆渡</option>
    <option value="3">骨骼</option>
</select>
</body>
</html>

继续：

如果我们选中了某个选项，value对应的就是某个value，selectedIndex是选中的序号

JavaScript基础（13.Dom内容文本操作）

当然，我们可以获取value的值，自然可以修改它。

JavaScript基础（13.Dom内容文本操作）

相关推荐