python学习之网站的编写（HTML，CSS，JS）（十九）----------文本对象模型dom之获取和设置操作（获取文本内容，获取标签内容，获取值）

首先我们得有一小段代码，然后为一些标签附上一些id值，用于演示下面的操作，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逆水行舟不进则退</title>
</head>
<body>
    <div id="i1">
        <input id="i2" type="text"placeholder="请输入内容">
        <input type="button" value="提交">
        <textarea id="i3" placeholder="在此输入内容"></textarea>
        <select id="i4">
            <option value="1">第1项</option>
            <option value="2">第2项</option>
            <option value="3">第3项</option>
        </select>
    </div>
</body>
</html>

代码的演示结果：

注释：其中的placeholder代表区域的默认值，输入的时候就消失，为空的时候就显现。

下面是在浏览器console的演示结果

1.获取标签中的文本内容，如果让它等于一个值的话就相当于赋值：innerText

document.getElementById('i1').innerText
"我是文本内容 "

2.获取标签的全部内容，如果让它等于一个值得话将相当于赋值：innerHTML

document.getElementById('i1').innerHTML
"
我是文本内容
<input id="i2" type="text" placeholder="请输入内容">
<input type="button" value="提交">
<textarea id="i3" placeholder="在此输入内容"></textarea>
<select id="i4">
<option value="1">第1项</option>
<option value="2">第2项</option>
<option value="3">第3项</option>
</select>
"

3.value对于input标签：获取当前输入的内容

document.getElementById('i2').value
"我是输入的内容1"

4.value对于textarea标签：获取当前输入的内容

document.getElementById('i3').value
"我是输入的内容2"

5.value对于select标签：获取当前标签设置的value值

document.getElementById('i4').value
"2"