WEB安全之javascript基础（六）：js操作DOM定时器的使用案例、js课后练习题跑马灯搜索框

操作

• 
  

属性操作

• 获取属性
  getAttribute()
  增加设置一个属性
  添加属性
  setAttribute(‘xxx’,‘alexe’)
  删除属性
  removeAttribute(value)
• 
• 
• 
• 
• 调整搜索框尺寸
  
• 
• 
• 创建标签 并添加到html中

第一种方式 字符串方式

insertAdjacentHTML()

		<input type="button" value="+" onclick="add();"/>
		<div id="div1">
			<p><input type="text"/></p>
		</div>
		<script>
			function add(){
				var tag="<p><input type='text'></p>"
				document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
			}
			
		</script>
	</body>

• 有四种值可用：

• beforeBegin: 插入到标签开始前

• afterBegin:插入到标签开始标记之后

• beforeEnd:插入到标签结束标记前

• afterEnd:插入到标签结束标记后

• div标签开始之前之后，结束之前之后
  

• 
  

• 
  

• 
  

第二种方式 对象的方式

document.createElement
<input type="button" value="+" onclick="add2();"/>
		<div id="div1">
			<p><input type="text"/></p>
		</div>
		<script>
			function add(){
				var tag="<p><input type='text'></p>"
				document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
			}
			
			
			function add2(){
				var tag =document.createElement('input');
				tag.setAttribute('type','text');
				tag.style.color='red';
				var p =document.createElement('p');
				p.appendChild(tag)
				document.getElementById('div1').appendChild(p);
			}
			
		</script>appendChild 在节点后面增加一个子节点

• 
  
• 
  
• 提交表单
  任何标签都可以通过dom提交

getElementById('id').submit()
				<form id='f1' action="https://www.moonsec.com/">
			<input type="submit" value="提交" />
			<input type="button" value="botton" onclick="Sub();" />
			<a onclick="Sub();">提交</a>
		</form>
		<script>
			function Sub(){
				document.getElementById('f1').submit();
			}
			
		</script>

• 
  
  
• 
  
• 点击button也可以跳转
  
• 点击提交也可以跳转
  

其他

• console.log 终端输出
  alert 弹出框
  confirm 确认框 标题 true false
• 
• 
• 确定就是true
  
• 取消就是false
  

url和刷新

• location.href 获取url
  location.href =‘url’ 重定向
  location.reload() 重新加载
• 
  
  

定时器

setInterval()
clearInterval()

	<input id="i1" type="text" />
		<input type="button" value="停止" onclick="stop();">
		
		<script>

		
		function setTime(){
			var tag = new Date();
			document.getElementById('i1').value=tag;
		}
		
		var obj=setInterval('setTime()','500');
		
		function stop(){
			clearInterval(obj);
		}	

• 可弹窗1000次
  
  
• 无弹窗
  
  
• 
  
• 
  
• 只执行一次

setTimeout()
clearTimeout()
<div id="status"></div>
		<input type="button" value="删除" onclick="Delele();">
	<script>
	function Delele(){
		document.getElementById('status').innerText="已删除";
		setTimeout(function(){
			document.getElementById('status').innerText="";
		},5000)
	}
	</script>

• 
  
  

事件

• 绑定事件两种方式
  a.直接标签绑定 直接标签绑定 οnclick=‘’
  先获取dom对象，然后进行绑定

document.getElementById('xxx').onclick()

• 
  
  
• 
  
  
• 
  
• 
  
• 到点我
• 
  
  

js课后练习题

跑马灯

• 
  
  

搜索框

• 可更改内容，刷新之后仍然是请输入关键字搜索
  
  
  
• JS事件汇总
• 链接: 博客园
• 
  
• 搜索跳转百度