一.、初识DOM
1.1 概述
- DOM全称为Document Object Model，即文档对象模型
- Document节点就是文档本身
- DOM规定页面中所有的元素都是节点
- Document节点在页面加载时自动创建
- 节点是对象的另外一种叫法，在DOM规则中规定对象都称为节点
- DOM规定html页面中所有的元素都是节点
- document节点在页面加载时自动创建
思想：
- 把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构
- 所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的
- 因此DOM可以理解成文档的编程接口
二、document节点属性
2.1 返回文档内部的某个节点
2.1.1 document.doctype
- 对于HTML文档来说document对象一般有两个子节点，第一个子节点就是doctype。doctype节点是一个对象，包含了当前文档类型信息。如果当前网页没有声明DTD，该属性返回null。
- 对于HTML5文档，doctype节点就代表
<script>
var doctype = document.doctype;
console.log(doctype);// <!DOCTYPE html>
console.log(doctype.name);// html
</script>
2.1.2 document.documentElement
- document.documentElement属性，表示当前文档的根节点。通常是document节点的第二个子节点，紧跟在document.doctype节点后面。
- 对于HTML网页，该属性返回HTML节点。但是对我们来说一般都是通过documentElement节点来访问页面当中的其他子节点。
- documentElement代表的是html标签(html元素)
- 语法：document.documentElement
<script>
console.log(document.documentElement);
</script>
- html并不代表整个文档，docoment代表的是文档本身也就是整个文档
<script>
console.log(document);
</script>
2.1.3 document.body
- body属性返回当前文档的body或frameset节点，如果不存在这样的节点，就返回null。
- 该属性是可写的，如果对其写入一个新的节点会导致原有的所有子节点被移除。
- 语法：document.body
<script>
console.log(document.body);
</script>
2.1.4 document.head
- head属性返回当前文档的head节点。如果当前文档有多个head，则返回第一个。
<script>
console.log(document.head);
</script>
2.2 返回文档的固有属性
-
documentURI：返回当前文档的网址。
-
document.documentURI属性所有文档都具备
-
语法：document.documentURI
-
IE浏览器不支持documentURI属性
-
document.documentURI === document.URI
2.2.1 document.documentURI
<script>
console.log(document.documentURI);
</script>
2.2.2 document.URL
- URL
- 注意：本属性是只读
- 返回当前文档的网址
- document.URL只有HTML文档才具备
<script>
document.URL = 'http://www.baidu.com'; //无效
console.log(document.URL);
</script>
2.2.3 document.domain
- 返回当前文档的域名
- 如果无法获取域名，则返回null
<script>
console.log(document.domain);
//如果当前域名是百度，就关闭当前页面
var baidu = "www.baidu.com";
if (document.domain === baidu) {
window.close();
}
</script>
2.2.4 document.lastModified
- lastModified：返回当前文档（网页）最后修改的时间戳，格式为字符串。
- lastModified属性的值是字符串，所以不能直接用来比较。若想比较两个文档谁的日期更新，则需要转换成时间戳格式才能进行比较(if(Date.parse(doc1.lastModified) > Date.parse(doc2.lastModified)) {
//…
}) Date.parse()能够将时间格式字符串转换成时间戳格式
<script>
console.log(document.lastModified); //04/10/2021 13:52:32
</script>
2.2.5 document.location
- location：返回一个只读对象，提供了当前文档的URL信息
<script>
console.log(document.location);
//实现页面跳转
document.location.href = 'http://www.baidu.com';
console.log(document.location.href);
</script>
注意：search是获取url中保存的信息
<form action="">
<input type="text" name="userName" />
<input type="submit" />
</form>
<button id="but">获取发送信息</button>
<script>
document.getElementById("but").onclick = function() {
console.log(document.location.search);
}
</script>
2.2.6 document.title
- 返回当前文档的标题，该属性是可写的
<title>我是标题头</title>
<script>
var title = document.title;
title = "我是新的标题头";
console.log(title);
</script>
2.2.7 document.characterSet
- 返回渲染当前文章的字符集
<script>
var character = document.characterSet;
console.log(character); //UTF-8
</script>
2.2.8 document.readyState
- 返回当前文档的状态
- 共有三种可能： 加载HTML代码阶段(尚未解析完成)是“loading”；加载外部资源的阶段是"interactive"；全部加载完成是"complete"。
<script>
if (document.readyState === "complete") {
console.log("当前页面已经加载完毕");
}
//这种判断方式只能判断一次，如果页面在判断时没有加载完成，那么就无法确定页面究竟是何时加载完毕
console.log(document.readyState);
var timer = setInterval(function() {
console.log(document.readyState);//loading interactive complete
if (document.readyState == 'complete') {
clearInterval(timer); //清楚定时器
}
}, 20);
</script>
2.3返回页面中指定元素的集合
2.3.1 document.anchors
- 返回页面中带有name属性的a标签的集合
<a href="#">链接1</a>
<a href="#" name="anchors2">链接2</a>
<a href="#" name="anchors3">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
<script>
var collection = document.anchors;
console.log(collection);//
console.log(collection.length);//
console.log(collection[0]);//
</script>
2.3.2 document.forms
- 返回网页中所有表单
<script>
var forms = document.forms;
if (forms !== 0) {
console.log("网页中有表单"); //网页中有脚本
} else {
console.log("网页中没有表单");
}
</script>
2.3.3 document.images
- 返回网页中所有图片
<script>
var imgs = document.images;
if (imgs !== 0) {
console.log("网页中有图片"); //网页中有脚本
} else {
console.log("网页中没有图片");
}
</script>
2.3.4 document.links
- 返回网页中所有链接元素(即带有href属性的a标签)
<script>
var links = document.links;
if (links !== 0) {
console.log("网页中有链接"); //网页中有脚本
} else {
console.log("网页中没有链接");
}
</script>
2.3.5 document.scripts
- 返回网页中所有的脚本
<script>
var scripts = document.scripts;
if (scripts !== 0) {
console.log("网页中有脚本"); //网页中有脚本
} else {
console.log("网页中没有脚本");
}
</script>
三、document节点选中页面元素
3.1 querySelector()
- 描述：本方法用来选中页面元素，根据指定的选择器进行筛选
- 如果有多个节点满足匹配条件则返回第一个匹配的节点
- 如果没有发现匹配的节点则返回null
- querySelector是匹配的选择器，如果是id选择器那么则应为 document.querySelector(‘#名’);
- 语法：document.querySelector(‘选择器名’);
<p id="p1">这是p1</p>
<p id="p2" name="p2_name" class="pp">这是p2<span>这是内部span</span></p>
<h2>这是h2</h2>
<p class="pp" name="p2_name">这是p3</p>
<span>这是span标签</span>
<script>
var p = document.querySelector('.pp');
var p2_span = p.querySelector('span');
console.log(p2_span);
</script>
3.2 querySelectorAll()
- 描述：本方法用来选中页面元素，根据指定的选择器进行筛选。
- 如果有多个元素满足条件，则返回这些元素构成的集合
- 语法：document.querySelectorAll(‘选择器名’);
注意：
- 返回的结果是一个节点列表，不是数组，但能够像数组一样使用列表
- 如果查找失败不是返回null，而是返回一个空的节点列表
<p id="p1">这是p1</p>
<p id="p2" name="p2_name" class="pp">这是p2<span>这是内部span</span></p>
<h2>这是h2</h2>
<p class="pp" name="p2_name">这是p3</p>
<span>这是span标签</span>
<script>
var pList = document.querySelectorAll('.pp');
console.log(pList[1]);
</script>
3.3 getElementById()
- 返回匹配指定ID属性的元素节点（返回的是一个对象）
- 参数 id 是一个大小写敏感的字符串
<p id="p1">这是p1</p>
<p id="p2" name="p2_name" class="pp">这是p2<span>这是内部span</span></p>
<h2>这是h2</h2>
<p class="pp" name="p2_name">这是p3</p>
<span>这是span标签</span>
<script>
var p2 = document.getElementById('p2');
console.log(p2);
// 打印我们返回的元素对象，这样可以更好的查看里面的属性和方法
console.dir(p2);
</script>
3.4 getElementsByTagName()
- 返回所有指定标签的元素(对象)集合
<p id="p1">这是p1</p>
<p id="p2" name="p2_name" class="pp">这是p2<span>这是内部span</span></p>
<h2>这是h2</h2>
<p class="pp" name="p2_name">这是p3</p>
<span>这是span标签</span>
<script>
var p = document.getElementsByTagName('p');
console.log(p[1]);
console.log(p.length);
</script>
3.5 getElementsByClassName()
- 返回符合指定类名的所有元素（集合）
<p id="p1">这是p1</p>
<p id="p2" name="p2_name" class="pp">这是p2<span>这是内部span</span></p>
<h2>这是h2</h2>
<p class="pp" name="p2_name">这是p3</p>
<span>这是span标签</span>
<script>
var pp = document.getElementsByClassName('pp');
console.log(pp[1]);
</script>
3.6 getElementsByName()
- 用于选择拥有name属性的HTML元素
<p id="p1">这是p1</p>
<p id="p2" name="p2_name" class="pp">这是p2<span>这是内部span</span></p>
<h2>这是h2</h2>
<p class="pp" name="p2_name">这是p3</p>
<span>这是span标签</span>
<script>
var p2_name = document.getElementsByName('p2_name');
console.log(p2_name[0]);
</script>
3.7 querySelector系列与getElementsBy系列方法的区别
- querySelector系列属于W3C中的Selectors API(JS)规范
- getElementsBy系列属于W3C的DOM规范
- querySelector系列基本能被所有浏览器支持
- getElementsBy系列通常只有在考虑兼容性的时候才被提起(尽管两者功能相似)
- querySelector系列接收的参数是一个css选择器名
- getElementsBy系列接收的参数只能是单一的className、tagName和name
- querySelectorAll()返回的是一个静态节点列表
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<script>
var ul = document.querySelectorAll('ul')[0];
var list = ul.querySelectorAll("li");
for (var i = 0; i < list.length; i++) {
ul.appendChild(document.createElement("li"));
}
</script>
- getElementsBy系列返回的是一个动态节点列表
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<script>
var ul = document.querySelectorAll('ul')[0];
var list = ul.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
ul.appendChild(document.createElement("li"));
}
</script>
此时会进入死循环状态：
四、document节点创建页面元素和属性
4.1 document.createElement()
- 描述：创建一个页面元素
- 语法：document.createElement(“标签名”)
- 注意：本方法创建的页面元素不会直接显示在页面中，而是默认存在于内存中
<script>
var p = document.createElement('p');
console.log(p);
</script>
4.2 fatherNode.appendChild()
- 描述：给某个节点添加子节点
- 语法：fatherNode.appendChild(子节点)
- fatherNode：父标签对象
<script>
// 创建元素
var p = document.createElement('p');
// 添加元素
document.body.appendChild(p);
</script>
4.3 fatherNode.removeChild()
- 描述：通过父标签对象将自己的一个子标签删除
- 语法：fatherNode.removeChild(子节点)
- fatherNode：父标签对象
// 创建元素
var p = document.createElement("p");
// 添加元素
document.body.appendChild(p);
// 删除元素
document.body.removeChild(p);
4.4 createTextNode()
- 描述：创建文本节点
<script>
var p = document.createElement('p');
//p.innerHTML='这是一个p标签';
var p_text = document.createTextNode('这是p段落');
// 或
//p.innerHTML = '这是p段落';
//document.body.appendChild(p);
p.appendChild(p_text);
document.body.appendChild(p);
</script>
4.5 createAttribute()
- 描述：创建一个新的属性对象节点
- 语法：document.createAttribute(‘属性名’);
注意：
- 本方法创建的是属性节点，不是css属性节点
- 创建的属性节点使用value=‘’;进行赋值
- 创建的属性节点使用setAttributeNode（）方法绑定到元素上。
<script>
// 创建元素
var p = document.createElement('p');
// 创建文本节点
var p_Text = document.createTextNode('我是新创建的p标签');
//将文本节点加入到p标签里
p.appendChild(p_Text);
//创建节点属性
p_alg = document.createAttribute('align');
// 给节点属性赋值
p_alg.value = 'center';
// 将节点属性加入到对应的文本节点中
p.setAttributeNode(p_alg);
//将创建的元素加入到body中
document.body.appendChild(p);
</script>
五、操作元素–页面元素属性操作
修改 HTML 文本中的标签属性，浏览器图形界面也会发生对应的改变
修改 HTML 文本中的标签属性，DOM 中的对象属性也会发生对应的改变
当 DOM 中的对象属性发生了变化，浏览器图形界面也会发生对应的改变
当浏览器图形界面发生了改变，DOM 中的对象属性也会发生对应的改变
1 用户修改了图形界面中标签的内容，DOM中的标签对象的属性会同步发生改变，HTML文本不会发生改变
<input type="text" id="username" value="张三">
<input type="button" value="测试" id="btn">
<script>
let btn = document.querySelector("#btn");
let username = document.querySelector("#username")
btn.onclick = function(){
console.log(username.value);
console.log(username.getAttribute("value"));
}
</script>
2 修改了HTML文本中标签的内容，图形界面和DOM中的对象属性都会发生改变
<input type="text" id="username" value="张三">
<input type="button" value="测试" id="btn">
<script>
let btn = document.querySelector("#btn");
let username = document.querySelector("#username");
btn.onclick = function(){
username.setAttribute("value","李四");
console.log(username.value);
};
</script>
3 修改了 DOM 中的对象属性，图形界面会发生改变，HTML文本不会发生改变
<input type="text" id="username" value="张三">
<input type="button" value="测试" id="btn">
<script>
let btn = document.querySelector("#btn");
let username = document.querySelector("#username");
btn.onclick = function(){
username.value = "李四";
console.log(username.getAttribute("value"));
};
</script>
5.1 getAttribute()
getAttribute(‘属性名’); 获取元素属性值
<div class="div">我的div</div>
var div = document.querySelector(".div");
div.setAttribute("style", "width:200px; height:200px;border:2px #ccc solid;");
console.log("getAttribute的值为：" + div.getAttribute('style'));
5.2 setAttribute()
setAttribute(‘属性名’,‘属性值’); 设置/修改/新增元素属性
<h2 style="color: aquamarine;">雨季</h2>
<button>点我</button>
<script>
var h2 = document.querySelector('h2');
document.querySelector('button').onclick = function() {
h2.setAttribute('style', 'color:red;');
}
</script>
5.3 removeAttribute()
removeAttribute(‘属性名’); 删除元素属性
<div class="div">我的div</div>
var div = document.querySelector(".div");
div.setAttribute("style", "width:200px; height:200px;border:2px #ccc solid;");
console.log("getAttribute的值为：" + div.getAttribute('style'));
//当在实例2的基础之上加上下面这句后
div.removeAttribute('style');
六、操作元素–操作元素内容
innerHTML/innerText/textCoontent都能获取元素的内容
6.1 innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
div,
p {
width: 400px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2022-5-10';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2022年 5月 10日 星期二
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerHTML = getDate();
6.2 innerHTML
从起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
<div></div>
<p>
我是文字
<span>123</span>
</p>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是：</strong> 2019';
//div.innerText += '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
// div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
// console.log(p.innerHTML);
6.3 innerText 、 innerHTML以及textCoontent的区别
- innerHTML获取的内容包含标签，innerText/textCoontent获取的内容不包含标签
- innerHTML/textCoontent获取的内容不会去除两端的空格，innerText获取的内容会去除两端的空格
- 无论通过innerHTML/innerText/textCoontent设置内容，新的内容都会覆盖原来的内容
- 如果通过 innerHTML 设置数据，数据中包含标签，会转换成标签后再添加
- 如果是通过innerText/textCoontent设置数据，数据中包含的标签不会转换成标签，会当做字符串直接设置
setText(oDiv, "www.baidu.com");
function setText(obj, text) { //obj--对象 text--文本
//判断对象中是否有 textContent 属性
if ("textContent" in obj) {
obj.textContent = text;
} else {
obj.innerText = text;
}
}
七、操作元素–操作元素样式
7.1 style
- 描述：用来读写和设置元素的 行内 样式
- 语法：元素节点.style.xxx
** 注意：**
- a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写（比如：backgroundColor…）
- b.CSS属性名是JavaScript保留字的，在属性名之前需要加上字符串“css”
- c.style对象的属性值都是字符串，而且包括单位。
- d.通过js添加的样式都是行内样式，会覆盖掉同名的css样式
<script>
var h2 = document.createElement('h2');
h2.innerHTML = '百度';
// 方式1
// var h2_style = document.createAttribute('style');
// h2_style.value = 'text-align:center;color:red';
// h2.setAttributeNode(h2_style);
//方式2
// h2.setAttribute("style", "text-align:center;color:red");
// 方式3
h2.style.textAlign = 'center';
h2.style.color = 'red';
// h2.style.cssFloat = 'left';
//方式4，见紧接着下面的 cssText 属性
document.body.appendChild(h2);
</script>
7.2 cssText属性
- 描述：可以用来读写或删除整个style属性
- 语法：元素节点.style.cssText=‘css样式’
<script>
// 创建元素
var h2 = document.createElement('h2');
// 在元素内添加内容
h2.innerHTML = '百度';
// 给元素设置相关样式 h2.style.cssText等价于 h2.style.value
h2.style.cssText = 'color: #f40; text-align: center; font-size: 16px;';
// 将创建的元素加入到页面中
document.body.appendChild(h2);
</script>
注意：
- 删除整个 style 属性可以用 xxx.cssText=" ";
- cssText 对应的是HTML元素的style属性，因此不用改写css属性名
7.3 元素节点的style属性方法
针对的是 style 属性里面的某一个属性名和值
- setProperty(propertyName,value) 设置某个css属性
- getPropertyValue(propertyName) 读取某个css属性
- removeProperty(propertyName) 删除某个css属性
- 这三个方法的第一个参数，都是css属性名，且不用改写连线词
<script>
var divStyle = document.querySelector('div').style;
//divStyle.setProperty('background-color', 'blue');
//console.log(divStyle.getPropertyValue('background-color'));//red
divStyle.removeProperty('background-color')
</script>
7.4 className属性
- 通过 元素.className 来设置元素的样式
- 适合于样式较多或者功能复杂的情况
- 如果想要保留原先的类名，我们可以按照如下示例的方式做 多类名选择器
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change'; // 或下面这种写法
this.className += ' change';
}
7.5 获取元素样式–getComputedStyle(对象)
通过style属性只能获取到行内样式的属性值，获取不到CSS设置的属性值(例如：oDiv.styyle.width)
如果想获取到CSS设置的属性值，必须通过getComputedStyle方法获取(例如：window.getComputedStyle(oDiv).width)
该方法返回一个CSS对象，该对象中存储的是一个标签经过计算之后的最终样式，最终样式中包含了写在内部样式和外部样式中的内容，但是该CSS对象的样式是只读的，也就是我们无法通过该对象来修改样式
7.6 classList
标签对象.classList
获取一个标签对象的所有class值，保存在一个对象中，提供了一个函数add，可以向class属性中添加一个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
border: 1px solid orangered;
}
.pink {
background-color: pink;
}
.red {
background-color: red;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box1"></div>
<script>
let box1 = document.getElementById("box1");
box1.classList.add("pink");
box1.classList.add("red");
box1.classList.remove("pink");
// 判断
console.log(box1.classList.contains("pink"));// false
</script>
</body>
</html>
八、操作元素–修改元素属性以及表单属性
8.1 修改元素属性–src
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
修改其他元素属性依次类推，比如：
- 输入框的对象.value
1.文本框、密码框 value 代表的是它们的值，通过value能够读取或设置文本框或密码框的值
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
2.单选框和多选框的value属性，代表的是提交到服务器的数据，这个value值通常是不去做修改的
3.下拉框的value属性，可以用于设置某一个下拉选项为选中状态 下拉框的值=选中的值
4.下拉框中option属性，代表的是提交到服务器的数据，如果没有value提交的是文本，因此通常不做修改
- input标签对象.type
- 单选框和多选框.checked
<input type="checkbox" class="single">1
<input type="checkbox" class="single">2
<input type="checkbox" class="single">3
<input type="checkbox" id="all">全选
<script>
/**
* 点击全选，所有单选全部选中
* 再次点击全选，所有单选按钮全部不选中
* 当所有单选全部选中时，全选按钮选中
* 当全选状态时，某一个单选按钮未选中，则全选按钮未选中
*/
//1.实现全选
let allChecked = document.querySelector("#all");
let sings = document.querySelectorAll(".single");
// 全选
allChecked.onclick = function(){
for(let i = 0; i < sings.length; i++){
sings[i].checked = allChecked.checked;
}
};
// 单选
sings.forEach(element => {
element.onclick = function(){
let flag = true;
for(let i = 0; i < sings.length; i++){
if(!sings[i].checked) {
flag = false;
break;
}
}
allChecked.checked = flag;
};
})
</script>
- a标签的 href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
// 根据系统不同时间来判断，所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// 需要一个div元素，显示不同问候语，修改元素内容即可
// 1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'images/s.gif';
div.innerHTML = '亲，上午好，好好写代码';
} else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = '亲，下午好，好好写代码';
} else {
img.src = 'images/w.gif';
div.innerHTML = '亲，晚上好，好好写代码';
}
</script>
</body>
</html>
9330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
