JavaScript 练习2（BOM DOM）
1. DOM的概念
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//BOM：Browser Object Model 浏览器对象模型
//将浏览器的各个组成部分看做对象
// * 特点：
// * BOM对象不能自己创建，当HTML文档加载进内存，浏览器自动创建。
/* * 组成：
* Window(*****)：窗口对象
* Location(**)：地址栏对象
* History(*)：历史记录(当前窗口)对象
* Navigator ：浏览器对象 基本不用仅作了解
* Screen：显示器屏幕 基本不用仅作了解 */
</script>
</head>
<body>
<h1>我的首页</h1>
<a href="demo.html?username=zhangsan&password=123456">跳转到demo页面携带参数</a>
</body>
</html>
demo.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var text=location.search; //获取?后面的参数
//alert(text); ?username=zhangsan&password=123456
var arr=text.replace("?","").split("&");
alert(arr[0]);
alert(arr[1]);
</script>
</head>
<body>
<h1>demo页面</h1>
</body>
</html>
2. Window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//window对象
//window对象中的方法
//1.有关弹窗的方法
//window.alert("弹出一个警告框");
//alert("window对象可以省略不写");
function del(){
//2.弹出确认取消框
var flag=window.confirm("你确认删除吗？"); //返回true表示确认，返回false表示取消
if(flag){
document.write("删除操作")
}else{
document.write("取消删除")
}
}
function inputAddress(){
//弹出输入框
var text=window.prompt("请输入你的收货地址") //显示可提示用户输入的对话框。
document.write(text);
}
</script>
</head>
<body>
<a href="javascript:void(del())">删除</a>
<a href="javascript:void(inputAddress())">填写地址</a>
</body>
</html>
3. Window对象中打开以及关闭窗口的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function intoWeb() {
//打开窗口,返回的是新打开的窗口对象
//var newWindow=window.open("http://www.163.com");
//跳转到自己站点的页面，返回的是新打开的窗口对象
myWindow=window.open("index.html");
}
function gb(){
window.close();
}
function gb2(){
if(window.confirm("确认关闭窗口吗？")){
myWindow.close();
}
}
</script>
</head>
<body>
<a href="http://www.sina.com">进入新浪</a>
<button type="button" onclick="intoWeb()">进入网页</button>
<a href="javascript:void(gb())">关闭本窗口</a>
<a href="javascript:void(gb2())">关闭新打开的窗口</a>
</body>
</html>
4. 定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//执行一次的定时器
/* function show(){
alert("砰 爆炸了！")
}
window.setTimeout(show,2000);
//window.setTimeout("show()",1000); */
//设置定时器，返回的是定时器的id
var timerID=window.setTimeout(function(){
alert("砰 爆炸了！");
},2000);
//可以根据定时器的id取消定时器
window.clearTimeout(timerID);
</script>
</head>
<body>
</body>
</html>
5. 循环定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var timerID=window.setInterval(function(){
console.log("循环定时器执行了")
},1000)
function qx(){
window.clearInterval(timerID);
}
</script>
</head>
<body>
<a href="javascript:void(qx())">取消定时器</a>
</body>
</html>
6. 页面时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="time">2022-01-07 09:39:20</h1>
</body>
<script type="text/javascript">
function showTime() {
//获取h1标签对象
var h1 = document.getElementById("time");
//设置标签之间的内容
var time = new Date().toLocaleString();
h1.innerText = time;
}
//先手动调用一次
showTime();
//循环调用
window.setInterval(showTime, 1000);
</script>
</html>
7. window 对象中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//BOM中其他对象，都是通过window对象的属性获取的
var loc=window.location;
var his=window.history;
var nav=window.navigator;
var scr=window.screen;
//获取html文档对象
var doc=window.document;
</script>
</head>
<body>
</body>
</html>
8. 地址栏对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//获取地址栏对象
//var loc=window.location;
//loc.href="http://www.baidu.com";
//window.location.href="http://www.baidu.com";
//window可以省略不写
//href 设置或返回完整的 URL。
//location.href="http://www.baidu.com";
//var text=location.href;
//alert(text);
//URL：统一资源定位符
//URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
//也可认为由4部分组成： 协议、 主机、 端口、 路径
//URL的一般语法格式为：
// (带方括号[] 的为可选项)：
//protocol: // hostname[:port] / path / [:parameters][?query]#fragment
//https://192.168.10.1:8080/path
var hostname=location.hostname;
var host=location.host;
var protocol=location.protocol;
var pathname=location.pathname;
var search=location.search;
var port=location.port;
alert(hostname);
alert(host);
alert(protocol);
alert(search);
alert(port);
function sx(){
//刷新页面
location.reload();
}
</script>
</head>
<body>
<button type="button" onclick="sx()">刷新</button>
</body>
</html>
9. URL编码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//浏览器的地址栏，会自动对地址栏里面的内容进行 URL编码
/* decodeURI() 解码某个编码的 URI。 1 5.5
encodeURI() 把字符串编码为 URI。 1 5.5
decodeURIComponent() 解码一个编码的 URI 组件。 1 5.5
encodeURIComponent() 把字符串编码为 URI 组件。
*/
var name="我爱你们";
//编码
var code=encodeURI(name);
document.write(code);
//解码
var text=decodeURI(code);
document.write(text);
</script>
</head>
<body>
</body>
</html>
10. 浏览器为什么要进行编码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var url=location.href;
document.write(url);
document.write("<hr>");
var v=decodeURI(url);
document.write(v);
//浏览器为什么要进行URL编码
//参考：
//https://www.cnblogs.com/jerrysion/p/5522673.html
</script>
</head>
<body>
</body>
</html>
11. 历史记录对象
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>a页面</h1>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function qj(){
//window.history.forward();
window.history.go(1); //给正数前进
}
</script>
</head>
<body>
<h1>b页面</h1>
<a href="c.html">进入c页面</a>
<a href="javascript:void(qj())">前进</a>
</body>
</html>
c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function ht(){
//window.history.back();
window.history.go(-1);//给负数就是后退
}
</script>
</head>
<body>
<h1>c页面</h1>
<a href="javascript:void(ht())">返回</a>
</body>
</html>
12. DOM概念
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
DOM：Document Object Model 文档对象模型，就是把我们的HTML文档的各个组成部分看着一个对象
Element 标签对象
Text: 文本对象
Attribute: 属性对象
Comment :注释对象
Node: 节点对象就是把 标签，文本 注释 属性，都可以看做节点。 结点有并列关系，父子关系
Document: 整个HTML文档对象
其他几个DOM对象：他都包含在文档中，那么我们可以通过，Document 整个HTML文档对象，来获取或创建其他DOM对象
*/
</script>
</head>
<body>
<!-- 这是注释 -->
<h1 align="center">一段文本</h1>
</body>
</html>
13. document文档对象中的方法和属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
</body>
</html>
<!-- 当我们操作DOM时， script标签放在文档下面，防止，DOM元素因为加载顺序，而获取不到 -->
<script type="text/javascript">
// Document 对象
// 每个载入浏览器的 HTML 文档都会成为 Document 对象。
//获取文档对象，通过 window对象的document属性来获取文档对象
var doc = window.document;
//文档对象中的属性和方法
//获取body标签对象
var bd = doc.body;
alert(bd);
//获取文档的修改时间
var time = window.document.lastModified;
alert(time);
//设置或获取网页的标题
document.title = "我的新标题";
var t = document.title;
alert(t);
//location.href
//获取或设置地址栏中的内容
var url=document.URL;
alert(url);
</script>
14. 文档对象中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//文档对象中的方法
//write() 向文档写 HTML 表达式 或 JavaScript 代码。
document.write("aaaa");
document.write("<h1>阿三发射点发射点发</h1>")
//获取body标签对象
var bd=document.body;
//设置标签的自带属性值
//bd.bgColor="red";
document.onclick=function(){
//随机换背景颜色
var a=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
var c=Math.floor(Math.random()*255);
//设置标签的自带属性值
//bd.bgColor="rgb("+a+","+b+","+c+")";
//设置标签的css样式
bd.style.backgroundColor="rgb("+a+","+b+","+c+")";
}
</script>
</html>
15. 获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="bd">
<h1 id="myh1">asdfasdfasdfasdfasdfasdf</h1>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
</body>
<!-- DOM操作时，script放到文档下面，防止标签对象获取不到 -->
<script type="text/javascript">
//通过id获取单个的标签对象
var myh1 = window.document.getElementById("myh1");
alert(myh1);
//获取body标签对象
var bd = document.body;
var mybd = document.getElementById("bd");
alert(bd);
alert(mybd);
alert(bd == mybd);
//通过class属性值，获取多个标签对象的数组
var h2Arr = document.getElementsByClassName("myh2");
for (let i = 0; i < h2Arr.length; i++) {
if (i % 2 == 0) {
h2Arr[i].style.background = "red";
} else {
h2Arr[i].style.background = "yellow";
}
}
</script>
</html>
16. 获取标签对象的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<input type="" name="username" id="" value="" />
<input type="" name="password" id="" value="" />
<input type="radio" name="sex" id="" value="1" />
<input type="radio" name="sex" id="" value="0" />
</body>
<script type="text/javascript">
//通过标签名来获取标签对象的数组
var myh1=document.getElementsByTagName("h1");
for(let i=0;i<myh1.length;i++){
if(i%2==0){
myh1[i].style.background="red";
}else{
myh1[i].style.background="blue";
}
}
//针对input标签的获取方法，根据input标签的 name属性值获取，返回的是数组
var objArr=document.getElementsByName("username");
var obj=objArr[0];
alert(obj);
var objArr2=document.getElementsByName("sex");
var obj3=objArr2[0];
var obj4=objArr2[1];
alert(obj3);
alert(obj4);
</script>
</html>
17. 获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">11111111111111111111111111</h1>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
</body>
<script type="text/javascript">
//h5 新增的获取标签对象的方法
var h1=document.querySelector("#myh1"); //根据css选择器来获取
h1.style.color="red";
//.querySelector()即便你通过类选择器，默认选择的是第一个 .myh2
var myh2=document.querySelector(".myh2");
myh2.style.color="blue";
//通过类选择器选择多个，使用下面的
var myh2s=document.querySelectorAll(".myh2");
myh2s[1].style.color="red";
myh2s[2].style.color="blue";
myh2s[myh2s.length-1].style.color="pink";
</script>
</html>
18. 标签对象的两个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">
标签之间的文本
</h1>
<h2 id="myh2">
<span>标签啊手动阀手动阀十分</span>
</h2>
</body>
<script type="text/javascript">
var myh1 = document.getElementById("myh1");
//设置标签之间的文本
myh1.innerText += "新的文本" //+= 追加设置
//获取标签之间的文本
var text = myh1.innerText;
alert(text);
/* //innerHTML 设置或获取标签之间的内容，包括子标签
var myh2 = document.getElementById("myh2");
//innerHTML 会转义HTML标签
myh2.innerHTML="<s>阿三发射点发色</s>"
//var text2 = myh2.innerHTML;
//alert(text2); */
</script>
</html>
19. 动态的创建dom元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//动态的创建Dom元素
//创建标签对象
var myDiv=document.createElement("div");
//获取body标签对象
var bd=document.body;
//站在父标签的角度设置子元素
bd.appendChild(myDiv);
//创建文本对象
var text=document.createTextNode("这是一行文本");
myDiv.appendChild(text);
//创建属性对象
var attr=document.createAttribute("style");
//设置属性的值
attr.value="color:red;font-size:25px";
//给标签设置属性读写
myDiv.setAttributeNode(attr);
//给标签设置属性，另一个方法 参数，属性名 属性值
myDiv.setAttribute("id","d1");
//创建注释对象
var comm=document.createComment("这是一行注释");
bd.appendChild(comm);
//移除属性 ,根据属性名来移除
myDiv.removeAttribute("id");
//移除属性对象
myDiv.removeAttributeNode(attr); //传入的是属性对象，不是属性名
//站在父元素的角度，删除子元素
bd.removeChild(myDiv);
//myDiv.remove();
//站在自身的角度删除自己
comm.remove();
</script>
</html>
20. 替换元素和插入元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">这是原来的元素</h1>
<div id="d1">
<h2 id="nei">这是原来的h2</h2>
</div>
</body>
<script type="text/javascript">
//站在父元素的角度，替换子元素，值1：新的元素，值2：是要替换的旧元素。
//bd.replaceChild(h4, h);
//站在父标签的角度，在这个h1标签对象的前面插入h5这个标签对象。
//bd.insertBefore(h5, h1);
var oldEle=document.getElementById("myh1");
var bd=document.body;
var myh2=document.createElement("h2");
myh2.innerText="新的元素h2";
bd.replaceChild(myh2,oldEle);
var myh3=document.createElement("h3");
myh3.innerText="333333333333333333333";
var myd1=document.getElementById("d1");
//myd1.appendChild(myh3);往后面追加
//站在父标签的角度，在这个#nei标签对象的前面插入myh3这个标签对象。
myd1.insertBefore(myh3,document.getElementById("nei"));
</script>
</html>
扫一扫
1341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
