DOM进阶、绑定事件的方式、定时器_weixin_30752377的博客

直接查找
	var obj = document.getElementById('i1')


间接查找
	文本内容操作：
		innerText	仅文本
		innerHTML	仅内容
		value		
			input		获取当前标签中的值
			select		获取选中的value值（selectIndex）
			textarea	获取当前标签中的值
		
		搜索框的事例
			
			<input id="i1" type="text" οnfοcus="Focus();" οnblur="Blur();" value="请输入搜索关键字"/>
			// onfocus 鼠标放到上面点击触发，鼠标移走点击其他地方触发
			<script>
				function Focus(){
					var tag = document.getElementById('i1');
					if (tag.value == "请输入搜索关键字"){
						tag.value = '';
					}
				}
				function Blur() {
					var tag = document.getElementById('i1');
					if (tag.value.length == 0){
						tag.value = "请输入搜索关键字";
					}
				}
			</script>
			
			注意：最新版的浏览器不用写上述JS代码，只需写一行<input type="text" placeholder="请输入关键字" />即可搞定
			
			
样式操作：
	className
	classList
		classList.add
		classList.remove
		
	更细粒度的操作	
	obj.style.fontSize = '16px';      
	obj.style.backgroupColor = 'red';
	obj.style.color = 'green';
	# 注意样式的书写规则：如有短横杠的，把原style样式中短横杠去掉，后面第一字母变成大写，如font-size ---> fontSize
	
	
	
属性操作

	obj = document.getElementById('i1')
	
	obj.getAttribute('value') 获取属性
	obj.setAttribute('he','tom') 设置属性   key--value的形式
	obj.removeAttribute('he')
	


创建标签并添加到HTML中

	方式一：字符串的方式

		<input type="button" οnclick="AddEle();" value="+"/>
		<div id="i1">
			<input type="text"/>
		</div>
		<script>
			function AddEle() {
				//创建标签
				//将标签添加到id='i1'里面
				var tag = "<p><input type='text'/></p>"
				document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
			}
		</script>
		
	#注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，
	这几个参数的意思分别是：在选中的标签 开头之前的位置，开头的之后位置，结束之前的位置，结束之后的位置
	
	
	
	方式二：对象的方式
	
		<input type="button" οnclick="AddEle();" value="+"/>
		<div id="i1">
			<input type="text"/>
		</div>
		<script>
			function AddEle() {
				//创建标签
				//将标签添加到id='i1'里面
				var tag = document.createElement('input');
				tag.setAttribute('type', 'text');
				tag.value = '搜索';
				tag.style.fontSize = '16px';
				tag.style.color = 'red';

				var p = document.createElement('p');
				p.appendChild(tag);
				document.getElementById('i1').appendChild(p);
			}
		</script>



提交表单
	任何标签都可以通过DOM提交表单
	document.getElementById('form').submit()
直接查找
	v