Lession06 文档对象模型
2023-04-26 本文已影响0人
任人渐疏_Must
查找Html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用DOM访问文档对象的元素</title>
</head>
<body>
<h1>获取元素节点</h1>
<input type="text" id="username" value="tom" name="uname"><br>
<input type="text" id="useremail" value="tom@163.com" name="uemail">
<div>today is very good</div>
</body>
</html>
<script>
//1.document.getElementById id属性值获取元素节点
var username = document.getElementById('username');
console.log(username);
var email=document.getElementById('useremail');
console.log(email);
//2.document.getElementsByTagName tag标签名称获得元素节点
var hh = document.getElementsByTagName('h1');
console.log(hh);
//通过getElementsByTagName收集的元素节点以“集合/数组”（即使只有一个节点）的形式返回
console.log(hh[0]);
var its = document.getElementsByTagName('input');
console.log(its);
console.log(its[1]);//访问具体节点
console.log(its.item(0));//访问具体节点
//3.document.getElementsByName name属性值获得元素节点
var it = document.getElementsByName('uname');
console.log(it);
//通过getElementsByName收集的元素节点以“集合/数组”（即使只有一个节点）的形式返回
console.log(it[0]);
console.log(it.item(0));
//文本节点获取
var dv = document.getElementsByTagName('div')[0];
//firstChild获得第一个子节点/lastChild获得最后一个子节点
console.log(dv.firstChild);
//文本对象
//alert(dv.firstChild);
//获得文本信息
console.log(dv.firstChild.wholeText);
//alert(dv.firstChild.wholeText);
//parentNode 获得父节点
console.log(dv.parentNode);
// nextSibling:获得下个兄弟节点
// previousSibling:获得上个兄弟节点
//childNodes:父节点获得内部全部的子节点信息
</script>
属性值操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性值操作</title>
<script>
// 1.获取属性值
// 元素节点.属性名称; //只能操作w3c规定的属性
// 元素节点.getAttribute(属性名称); //规定的 和 自定义的都可以获取
// 2.设置属性值
// 元素节点.属性名称 = 值; //只能操作w3c规定的属性
// 元素节点.setAttribute(名称，值); //规定的 和 自定义的都可以设置
</script>
</head>
<body>
<h2>属性值操作</h2>
<a href="http://www.baidu.com" target="_blank" addr="beijing" class="apple">百度</a><br>
<input type="button" value="修改属性" onclick="f1()"><br>
</body>
</html>
<script>
var baidu=document.getElementsByTagName('a')[0];
//1.获得属性的信息
console.log(baidu.href);
console.log(baidu.target);
console.log(baidu.addr);//这个是自定义的属性
console.log(baidu.getAttribute('addr'));
console.log(baidu.getAttribute('href'));
//console.log(baidu.class);
console.log(baidu.className);//className是class的一个别名，不可以直接访问class属性
//2.设置属性的信息
function f1(){
baidu.href="http://www.hao123.com";
baidu.target="_self";
baidu.addr="tianjin";
//属性修改，有就更新，没有就创建
baidu.setAttribute('addr','shanghai');
baidu.setAttribute('height','170');//新创建
}
</script>
案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例01</title>
<script>
function f1(){
var i =0;
i=Math.floor(Math.random()*4+1);
document.getElementById('imgs').src="img/"+i+".jpg";
timer=setTimeout("f1()",1000);
}
function f2(){
//清除定时器
clearTimeout(timer);
}
</script>
</head>
<body>
<img src="img/1.jpg" alt="" id="imgs" width="200px" height="200px">
<input type="button" value="开始" onclick="f1();">
<input type="button" value="停止" onclick="f2();">
</body>
</html>
案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例02</title>
<script>
function fun(flag){
var sels = document.getElementsByName('ck');
for(var i=0;i<sels.length;i++){
sels[i].checked=flag;
}
}
</script>
</head>
<body>
<form action="">
请选择你喜欢的战队：<br>
<input type="checkbox" name="ck" value="0">EDG
<input type="checkbox" name="ck" value="1">RNG
<input type="checkbox" name="ck" value="2">IG
<input type="checkbox" name="ck" value="3">FPX
<input type="button" value="全部选中" onclick="fun(true)">
<input type="button" value="全不选中" onclick="fun(false)">
</form>
</body>
</html>
增删改元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增删改元素</title>
<script>
/*
节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
节点追加：
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
父节点.removeChild(子节点);
*/
</script>
</head>
<body>
<ul>
<li mean="热情">red</li>
<li mean="忧郁">blue</li>
<li mean="生机">green</li>
</ul>
<ul>
<li mean="希望">orange</li>
</ul>
</body>
</html>
<script>
var color = ['red','blue','green'];
var color_mean=['热情','忧郁','生机'];
//创建各种节点
var ull = document.createElement('ul');
for(var k in color){
var lii = document.createElement('li');
lii.setAttribute('mean',color_mean[k]);
var txt = document.createTextNode(color[k]);
//节点追加
lii.appendChild(txt);
ull.appendChild(lii);
}
document.body.appendChild(ull);
//给第二个ul追加页面已有的节点：blue被追加进来
//注意：被追加节点要发生物理位置移动（节点个数是固定的）
var blue = document.getElementsByTagName('li')[1];
var second_ul = document.getElementsByTagName('ul')[1];
second_ul.appendChild(blue);
//orange追加给第一个ul，并设置到blue的前面
var orange=document.getElementsByTagName('li')[2];
console.log(orange);
var first_ul = document.getElementsByTagName('ul')[0];
console.log(first_ul);
//first_ul.appendChild(orange);//orange追加到最后
var red=document.getElementsByTagName('li')[0];
first_ul.insertBefore(orange,red); //orange放在red的前边
first_ul.replaceChild(orange,red);//orange替换掉red
//删除green节点
var green = document.getElementsByTagName('li')[1];
green.parentNode.removeChild(green);
</script>
window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象</title>
<script>
/*
浏览器里面，window对象指当前的浏览器窗口。它也是当前页面的顶层对象，
即最高一层的对象，所有其他对象都是它的下属。
*/
// alert("弹框1");
// window.alert("弹框2");
// window.confirm("确定要删除吗？");
// if(confirm("确定删除吗？")){
// alert("删除");
// }
// var num =window.prompt("请输入一个数字");
// document.write(num);
window.onload=function(){
var dv = document.getElementById('demo');
function f1(){
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth()+1;
var date = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
dv.innerHTML="现在是"+year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second
}
window.setInterval(f1,1000);
}
function f2(){
//打开新窗口 open("url","name","窗口特征") 宽 高 菜单栏=1是显示 工具栏，滚动条，状态栏的信息=1显示
var newWin=window.open('demo06-1.html','',"width=500px,height=500px,menuBar=1,toolBar=1,scrollBars=1,status=1");
newWin.status="这个一个状态";
}
function openWindow(){
//通过这种打开新窗口的方式，可以将子窗口的值传给父窗体
var val = window.showModalDialog('demo06-1.html','','dialogWidth=300px,dialogHeight=300px');
//关闭子窗体的值会返回到val中
document.myform.add.value=val;
}
</script>
</head>
<body>
<div id="demo"></div>
<!-- 打开定制窗口 IE-->
<input type="button" value="打开定制新窗口" onclick="f2()">
<!-- 把子窗口的值传回父窗口中 -->
<form name="myform">
请输入你的地址：
<input type="text" name="add"> <a href="javascript:openWindow();">选择送货地址</a>
</form>
</body>
</html>
//demo06-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function closeWindow(){
var addr = document.myform.addr.value;
console.log(addr);
//使用window.returnValue属性把子窗体关闭后的值传给父窗体 谷歌不支持
window.returnValue=addr;
window.close();
}
</script>
</head>
<body>
<form name="myform">
地址：<input type="text" name="addr">
<input type="button" value="确定" onclick="closeWindow()">
</form>
</body>
</html>
Document对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document对象</title>
<script>
//Document对象的集合属性是基于数组的，提供对象的数组 有forms[],images[],links[]
function pressMe(){
//Document对象的forms[]数组包含文档中所有的form对象
//使用form对象的elements[]属性代表表单中的元素
var val = document.forms[0].elements[0].value;
document.forms['f2'].elements[0].value=val;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="message">
<input type="button" value="按下我的传递值" onclick="pressMe()">
</form>
<form name="f2">
<input type="text" name="show">
</form>
<h2>锚点</h2>
<ol>
<li><a href="#one">111111111111111</a></li>
<li><a href="#two">222222222222222</a></li>
<li><a href="#three">33333333333333</a></li>
</ol>
<a name="one">aaaaaaaaaaaaaaaa</a>
<a name="two">bbbbbbbb</a>
<a name="three">ccccccc</a>
<h2>超链接</h2>
<ol>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
</ol>
<script>
document.write("页面定义了"+document.links.length+"个超链接<br>");
for(var i =0;i<document.links.length;i++){
document.write(document.links[i].href+"<br>");
}
//anchors(读：aoke)
document.write("页面定义了"+document.anchors.length+"个锚点<br>");
for(var j=0;j<document.anchors.length;j++){
document.write(document.anchors[j].name+"<br>");
}
</script>
</body>
</html>
Location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Location对象</title>
<script>
function changeURL(){
window.location="http://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="转到百度" onclick="changeURL()">
</body>
</html>
History对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History对象</title>
<script>
/*
window.history.back();
window.history.forward();
windiw.history.go(-1);//相当于back()
window.history.go(1);//相当于forwar()
window.history.go(0);//相当于刷新
window.history.length;//查看历史记录栈中一共有多少个记录
*/
</script>
</head>
<body>
<a href="javascript:history.go(-1)">返回</a><!-- 相当于调用history对象的back()方法 -->
<a href="javascript:history.go(1)">前进</a> <!-- 相当于调用history对象的forword()方法 -->
</body>
</html>
