Dom操作

1、JS组成:

ESCAscriptBomDom

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、操作元素事件

 

①在标签里面写this

 

Onclick=dianwo(this)

 

②先通过id找到在写this

 

Obj.addEventListener(‘click’,f1);

 

Obj.addEventListener(‘click’,f2);

 

可以一次调用两(多)个方法

 

6、创建删除元素

Obj.removed()删除自己

obj.getAttribute("id") 获取元素和属性

obj.setAttribute“id” 修改元素属性

obj.removeAttribute("id") 删除属性

document.createElement 创建元素

Appendchild(创建一个子元素,把后面的标签放到前面的标签当作他的内容)

 

实例1

 

在列表中添加项目:

 

document.getElementById("myList").appendChild(newListItem);

 

添加之前:

 

Coffee

 

Tea

 

添加之后:

 

Coffee

 

Tea

 

Water

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

 

实例2

 

从一个列表向另一个列表中移动列表项:

 

var node=document.getElementById("myList2").lastChild;

 

document.getElementById("myList1").appendChild(node);

 

添加之前:

 

Coffee

 

Tea

 

Water

 

Milk

 

添加之前:

 

Coffee

 

Tea

 

Milk

 

Water

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>

js文件格式

var name = "";//

var sum = 0;//

var obj = null;//

页面加载完成

window.onload = function(){ }

方法

function f1(){}

function f2(){}

 

方法:先加载完页面再进行JS内容

window.onload = function(){

}

 

对象:

Math:数学类(查)

console.log(Math.random());

Date:时间日期类

 

posted on 2018-06-19 20:32  落雨无晴  阅读(354)  评论(0编辑  收藏  举报