Dom操作基础

Posted 2020-11-19 ace-suiyuan008

Dom操作

1、JS组成：

ESCAscript、Bom、Dom

2、Bom:  浏览器对象模型

  window：窗口

  Location；地址栏

  History：历史记录

  Document：文档

3、Dom

 

dom: document  object  model  文档对象模型

 

dom就是学习利用javascript如何实现对html标签内容的增、删、改、查等操作

4、js跳转页面方法（引申）

第一种： 
<script language="javascript" type="text/javascript"> 
window.location.href="login.jsp?backurl="+window.location.href; 
</script> 
第二种： 
<script language="javascript"> 
alert("返回"); 
window.history.back(-1); 
</script> 
第三种： 
<script language="javascript"> 
window.navigate("top.jsp"); 
</script> 
第四种： 
<script language="JavaScript"> 
self.location=‘top.htm‘; 
</script> 
第五种： 
<script language="javascript"> 
alert("非法访问！"); 
top.location=‘xx.jsp‘; 
</script> 

5、定时器（引申）

定时器

setTimeout(function(){},时间）；  延迟执行 1次

setInterval(function(){},时间）；  间隔执行 多次

清除定时器

ClearInterval（对象）

ClearTimeout(对象）

Dom操作方式

找到元素  操作元素

1、找元素 返回元素对象

Var obj = document.getElementById();

document.getElementsByName();  找到的是一个数组，要指定数组的位置，找到特定对象来操作

document.getElementsByTagName();

document.getElementsByClassName();

2、操作元素内容

非表单元素：obj.innerHTML(获取）obj.innerHTML=123（修改）

表单元素：obj.value

3、操作元素属性

obj.setAttribute();设置属性

obj.getAttribute();获取属性

4、操作元素样式

obj.style.color(只能操控行内的，外部引用不可以）

5、操作元素事件

6、创建删除元素