BOM--用定时器做个小玩意
<!DOCTYPE html>
<html>
<head>
<title>BOM--用定时器做个小玩意</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div {
background-color: #ff0080;
width: 300px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
var t,i=0;
var str= "湖南城市学院";
function demo(){
t=setInterval("aa()",500);
}
function aa(){
status=str.substring(0,i+1);
i=(i+1)%(str.length+1);
}
function demo2(){
t = setInterval("bb();",50);
}
function bb(){
var varobj=document.getElementById("d1");
varobj.style.posTop+=5;
varobj.style.posLeft+=3;
}
</script>
<input type="button" value="动画演示1" onclick="demo();">
<br/>
<input type="button" value="动画演示2" onclick="demo2();">
<br/>
<div id="d1">
今天凉快了....
</div>
</body>
</html>
BOM--事件
<!DOCTYPE html>
<html>
<head>
<title>BOM--事件</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div{
width:200px;
height:80px;
background-color:#0ff;
}
</style>
<script type="text/javascript">
onload=function(){
alert("页面加载完毕");
};
onunload=function(){
alert("页面马上关闭，赶紧进行数据存储。。。");
open("bom_4.html");
}
</script>
</head>
<body>
<script type="text/javascript">
function aa(obj){
alert(obj.value);
}
function bb(){
alert("11111");
}
function cc(obj){
alert(obj.value.length+1);
var objSpan = document.getElementById("sNum");
objSpan.innerText=obj.value.length+1+"";
//alert("2222");
}
function dd(obj){
//var objDiv = obj;
obj.innerText=window.event.screenX+","+event.screenY;
}
</script>
邮箱:<input type="text" name="email" onblur="aa(this);" onchange="bb();"> <br/>
邮箱2:<input type="text" name="email" onkeydown="cc(this);"> <span id="sNum"></span><br/>
<div onmousemove="dd(this);">
</div>
<input type="button" value="动画演示2" onclick="demo2();"><br/>
</body>
</html>
DOM--获取文档中的元素
两个名词:
1)元素(Element): 指的是页面中的标签(对象) ---容器
2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围
获取文档中的元素1,该方式只能获取元素对象
直接通过document有三种获取方式:
1) getElementById(): 通过元素的id属性值
2) getElementsByName(): 通过元素的name属性值
3) getElementsByTagName(): 通过元素的标签名
※通过一个元素对象调用上面的3个函数可以在该元素的dom子树中进行元素获取。
一个节点(node)通常都有三个属性:
1)节点名称(nodeName):标签为标签名, 属性为属性名, 文本内容为:#text
2)节点类型(nodeType):标签为1, 属性为2, 文本内容为3
3)节点值(nodeValue): 标签为null, 属性为属性值, 文本内容就是本身的这些文字
<!DOCTYPE html>
<html>
<head>
<title>DOM--获取文档中的元素</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--
两个名词:
1)元素(Element): 指的是页面中的标签(对象) ---容器
2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围
◇◇获取文档中的元素1,该方式只能获取元素对象◇◇
直接通过document有三种获取方式:
1) getElementById(): 通过元素的id属性值
2) getElementsByName(): 通过元素的name属性值
3) getElementsByTagName(): 通过元素的标签名
※通过一个元素对象调用上面的3个函数可以在该元素的dom子树中进行元素获取。
-->
<div id="div1">
这是div2中的文本
</div>
<input type="button" value="获取文档中的元素1" onclick="demo1();">
<br/>
<script type="text/javascript">
function demo1(){
var objDiv = document.getElementById("div1");
objDiv.innerText = "湖南城市学院";
objDiv.style.backgroundColor = "blue";
objDiv.style.height = "50px";
objDiv.style.width = "200px";
}
</script>
<div id="div2" name="div2">
这是div2中的文本
</div>
<input type="button" value="获取文档中的元素2" onclick="demo2();">
<br/>
<script type="text/javascript">
function demo2(){
var objDiv = document.getElementsByName("div2")[0];//注意通过name属性获取到的是元素数组
objDiv.innerText = "湖南益阳";
objDiv.style.backgroundColor = "red";
objDiv.style.height = "50px";
objDiv.style.width = "100px";
}
</script>
<div id="div3" name="nm2">这是div3中的文本</div>
<input type="button" value="获取文档中的元素3" onclick="demo3();"><br/>
<script type="text/javascript">
function demo3(){
var objDiv = document.getElementsByTagName("div")[2];//注意通过标签名获取到的也是元素数组
objDiv.innerText="中国北京";
objDiv.style.backgroundColor="green";
objDiv.style.height="50px";
objDiv.style.width="100px";
}
</script>
<hr/>
<!--一个节点(node)通常都有三个属性:
1)节点名称(nodeName):标签为标签名, 属性为属性名, 文本内容为:#text
2)节点类型(nodeType):标签为1, 属性为2, 文本内容为3
3)节点值(nodeValue): 标签为null, 属性为属性值, 文本内容就是本身的这些文字
-->
<div id="div4" value="abc">这是div4中的文本 </div>
<input type="button" value="获取节点的3个通用属性" onclick="demo4();"><br/>
<script type="text/javascript">
function demo4(){
//元素(标签)
var objDiv = document.getElementById("div4");
//objDiv.innerText=objDiv.nodeName+","+objDiv.nodeType+","+objDiv.nodeValue;
//属性
//获取"属性对象"用getAttributeNode()， 直接获取"属性值"用getAttribute(), attributes集合能获取当前元素的所有成员属性对象
var attrDivValue = objDiv.getAttributeNode("value");
alert(attrDivValue);
alert(attrDivValue.nodeName+","+attrDivValue.nodeType+","+attrDivValue.nodeValue);
//文本内容
var innerTextNode = objDiv.childNodes[0];
alert(innerTextNode.nodeName+","+innerTextNode.nodeType+","+innerTextNode.nodeValue);
}
</script>
</body>
</html>
DOM--一个小例子
<!DOCTYPE html>
<html>
<head>
<title>DOM--一个小例子</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
</style>
<script type="text/javascript">
onload=function( ){
var objdiv=document.getElementById("div1");
var objAs=document.getElementsByTagName("a");
for(var i=0;i<objAs.length;i++){
objAs[i].target="_blank";
}
};
</script>
</head>
<body>
<a href="http://www.hncu.net">城院首页</a> <br/>
<a href="http://www.sina.com">新浪首页</a> <br/>
<hr/>
<div id="div1">
<a href="goods/1.html">商品1</a> <br/>
<a href="goods/2.html">商品2</a> <br/>
<a href="goods/3.html">商品3</a> <br/>
<a href="goods/4.html">商品4</a> <br/>
akalalka
</div>
</body>
</html>
DOM--获取文档中的元素
获取文档中的元素2,该方式不但可以获取元素节点，还可获取文本内容节点
可以通过元素在dom树中的层次关系获取其它元素。
这些层次关系包括: 父亲、儿子、兄弟
儿子:firstChild, lastChild, childNodes集合,children集合
兄弟:nextSibling(下一个兄弟节点), previousSibling(上一个兄弟节点)
父亲: parentElement, parentNode
<!DOCTYPE html>
<html>
<head>
<title>DOM--获取文档中的元素</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!--
◇◇获取文档中的元素2,该方式不但可以获取元素节点，还可获取文本内容节点◇◇
可以通过元素在dom树中的层次关系获取其它元素。
这些层次关系包括: 父亲、儿子、兄弟
儿子:firstChild, lastChild, childNodes集合,children集合
兄弟:nextSibling(下一个兄弟节点), previousSibling(上一个兄弟节点)
父亲: parentElement, parentNode
-->
<div id="div1" >这是div2中的文本</div>
<table id="tab1">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格2一</td>
<td>单元格2二</td>
</tr>
</table>
<dl>
<dt>上层项目</dt>
<dd>下层项目1</dd>
<dd>下层项目2</dd>
<dd>下层项目3</dd>
</dl>
<input type="button" value="获取文档中的节点" onclick="demo1();"><br/>
<script type="text/javascript">
function demo1(){
var objTable=document.getElementById("tab1");
var node=objTable.parentNode;
//alert(node.nodeName);//body
//第一个儿子
var node2 = objTable.firstChild;
//alert(node2.nodeName);//#text ---文本内容，本例是空白符
//利用循环去找第一个儿子
var i=0;
var node22=objTable.childNodes[i];
while(node22.nodeName!="TBODY"){
i++;
node22=objTable.childNodes[i];
}
alert("2: "+node22.nodeName);
var objTr = node22.childNodes[0];
if(objTr=="#text"){
objTr = node22.childNodes[1]; //OK
//objTr = objTr.nextSibling;
}
alert(objTr.nodeName);
}
</script>
<br>
</body>
</html>
扫一扫
2865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
