day16-Dom选择器以及内容文本操作
1、Dom：文档对象模型
查找：
直接查找：var obj=document.getElementById('i1')
间接查找：innerText，获取当前的文本，仅仅获取文本
innerHTML，获取全部内容
value：
input，value获取当前标签的值
select，获取选中的value值；selectIndex
textarea，value获取当前标签中的值
（1）id="i1"
<div id="i1"> 百度 <a>谷<span>歌</span></a> </div>
innerText与innerHTML的区别如下：
a）obj=document.getElementById('i1');
<div id="i1">"
百度
"<a>"谷"<span>歌</span></a></div>
b）obj.innerText;
"百度 谷歌"
c）obj.innerHTML;
"
百度
<a>谷<span>歌</span></a>
"
d）obj.innerHTML='wu'; （可以赋值）
"wu"
e）obj.innerText='wu';
"wu"
f）obj.innerText='<a href="http://www.baidu.com.cn">百度</a>';
"<a href="http://www.baidu.com.cn">百度</a>"
在控制台执行，将obj.innerText赋值，在页面出现的是一个文本，如下：
g）obj.innerHTML='<a href="http://www.baidu.com.cn">百度</a>';
"<a href="http://www.baidu.com.cn">百度</a>"
在控制台执行，将obj.innerHTML赋值，在页面出现的是一个百度的超链接，如下：
（2）id="i2"
<input type="text" id="i2"/>
a）obj=document.getElementById('i2');
<input type="text" id="i2">
b）obj.value //输入框最开始是空的
""
c）obj.value //当在输入框中输入python时，可以获取到
"python"
d）obj.value="asdfg" //当给输入框的内容赋值asdfg，这时发现输入框的内容已经变成了该值
"asdfg"
（3）id="i3"
<select id="i3"> <option value="11">北京1</option> <option value="12">北京2</option> <option value="13">北京3</option> </select>
a）obj=document.getElementById('i3');
<select id="i3"><option value="11">北京1</option><option value="12">北京2</option><option value="13">北京3</option></select>
b）obj.value
"11"
c）obj.value="12" //当修改value为12时，选择框中选择为 北京2
"12"
d）obj.selectedIndex //可以理解为这是下拉框中的序号，从0开始排
1
e）obj.selectedIndex='2' //当该值修改为2时，显示的是下拉框的第3个值
"2"
（4）id="i4"
<textarea id="i4"></textarea>
textarea可以输入多行文本
a）obj=document.getElementById('i4');
<textarea id="i4"></textarea>
b）obj.value //当前输入框中为空，输出为空
""
c）obj.value="12" //给当前输入框中赋值12，这时输入框中显示12
"12"
2、下面有一个搜索框的示例
（1）先简单来说，有一个输入框，当光标移动到输入框中时，控制台输出1；当光标移动到输入框外时，控制台输出2
<div style="width:600px;margin:0 auto"> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/> </div> <script> function Focus() { //将光标移动到某个位置 console.log(1) } } function Blur() { //将光标移出某个位置 console.log(2) } } </script>
（2）现在我们设计一下，当光标在输入框外时，输入框中可以显示注意事项；当光标在输入框中时，注意事项消失，输入内容
<body>
<div style="width:600px;margin:0 auto">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
<input type="text" placeholder="请输入关键字"/> //另一种表达方式，不需要script便可以呈现一样的效果，但是对浏览器有要求
</div>
<script>
function Focus() {
var tag=document.getElementById('i1');
var val=tag.value;
if(val=="请输入关键字"){
tag.value ="";
}
}
function Blur() {
var tag=document.getElementById('i1');
var val=tag.value;
if(val==""){ //或者val.length==0
tag.value ="请输入关键字";
}
}
</script>
</body>
