Dom操作基础

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

①在标签里面写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：时间日期类

Dom操作基础

实例1

实例2

推荐阅读