1.Date对象的常用方法
setFullYear()
setMonth()
setDate()
setHours()
setMinutes()
setSeconds()
定时函数
setTimeout：等待某段时间后调用某个函数（1次）
语法：setTimeout("调用的函数名称",等待时间)
消除：clearTimeout()
setInterval：每隔某段时间反复调用某个函数（多次）
语法：setInterval("调用的函数名称",间隔时间)
清除：clearInterval()
实例
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>时钟特效</title>
<script type="text/javascript">
function disptime() {
var timer;
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML = "<h1>现在是：" + hh + ":" + mm + ":" + ss + "<h1>";
setTimeout("disptime()", 1000)
}
function interval() {
timer = setInterval("disptime()", 1000);
}
</script>
</head>
<body >
<div id="myclock"></div>
</body>
</html>
运行结果
注意一点：调用函数不能写在script里，因为js代码是一步一步运行的，放在script下面不会执行这个disptime()的代码。所以把disptime()放在body里用onload来调用
2.什么是DOM？
DOM-Document Object Mondel(文档对象模型)
DOM提供了访问、动态修改结构文档的接口
3.DOM的组成？
Core DOM：定义了一套标准的针对任何结构化文档的对象
XML DOM：定义了一套标准的针对XML文档的对象
HTML DOM：定义了一套标准的针对HTML文档的对象
4.访问节点
使用getElement系列方式访问节点
getElementById()
getElementByName()
getElementByTagName()
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>改变图片</title>
<style type="text/css">
img {
border: 0px;
padding: 3px;
}
body {
margin: 0px;
font-size: 12px;
line-height: 25px;
}
input {
margin-top: 5px;
}
</style>
<script src="js/changeImg.js"></script>
</head>
<body style="text-align:center;">
<img src="img/fruit.jpg" alt="水果图片" id="fruit" />
<br /><input name="btn" type="button" value="改变图片" onclick="change()" />
</body>
</html>
JavaScript代码
function change(){
var img=document.getElementsByTagName("img");
img[0].setAttribute("src","img/grape.jpg");
}
运行结果
使用层次关系访问节点
parentNode
firstChild
lastChild
实例
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DOM节点</title> <script type="text/javascript" src="js/fruit.js"></script> </head> <body><img src="img/fruit.jpg" alt="图片" id="imgFruit" /> <h1>喜欢的水果</h1><input type="button" onclick="showNode()" value="查找节点" /> <p>DOM应用</p></body> </html>
JavaScript代码
function showNode(){
var imgObj=document.getElementById("imgFruit");
var imgParent=imgObj.parentNode;
alert(imgParent.nodeName);
var bodyFirstChild=imgParent.firstChild;
alert(bodyFirstChild.nodeName);
var bodyLastChild=imgParent.lastChild;
alert(bodyLastChild.nodeName);
}
运行结果
5.操作节点的属性值
Core DOM的标准方法
getAttribute("属性名")：获取属性值
setAttribute("属性名","属性值")：设置属性值
针对HTML文档的特殊方法
对象名.属性值
6.创建节点
createElement(tagName)：创建元素
appendChild(nodeName)：在末尾添加节点
insertBefore(newNode,oldNode)：在某个元素前插入节点
cloneNode(deep)：克隆节点
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增加节点</title>
<style type="text/css">
ol li {
list-style-type: upper-alpha
}
</style>
<script src="js/addImg.js"></script>
</head>
<body>
<h2>喜欢的水果</h2>
<input id="b1" type="button" value="增加一幅图片" onclick="newNode()" />
<input id="b1" type="button" value="增加一个选项" onclick="addAnswer()" />
<img src="img/sixty1.jpg" id="sixty1" alt="水果" />
<img src="img/sixty2.jpg" id="sixty2" alt="果篮" />
<ol id="questions">
<li><input type="text" name="answer" /></li>
</ol>
</body>
</html>
JavaScript代码
function newNode(){
var image=document.createElement("img");
image.setAttribute("src","img/newimg.jpg");
document.body.appendChild(image);
}
function addAnswer(){
var liElement=document.createElement("li");
var inputElement=document.createElement("input");
inputElement.setAttribute("type","text");
inputElement.setAttribute("name","answer");
liElement.appendChild(inputElement);
var Questions=document.getElementById("questions");
Questions.appendChild(liElement);
}
运行结果：
点击添加一张图片
点击添加一个选项
7.数组的赋值和读取
先声明再赋值
var fruit = new Array(4);
fruit[0] = "apple";
fruit[1] = "orange";
声明时同时初始化
var fruit = new Array("apple","orange","peach","banana");
8.数组的读取
单个读取
数组对象名[数组下标]
fruit[0];
循环读取
for
for...in
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>数组方法的应用</title>
<script type="text/javascript">
var arrayFruit = new Array("apple", "orange", "peach", "bannaner");
document.write("排序前的数组<br />");
for(var i in arrayFruit) {
document.write(arrayFruit[i] + "<br />");
}
document.write("排序后的数组<br />");
arrayFruit.sort();
for(var i in arrayFruit) {
document.write(arrayFruit[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>
运行结果
9.Array对象的常用属性和方法
属性
length：设置或返回数组中元素的长度
方法
join()：将数组拼接为字符串
sort()：对数组的元素进行排序
10.今天遇到的问题
关于firstChild和lastChild获取到的结果不是想要的节点而是#text，
问题主要是出自<body>之后和</p>之前的“回车”和“空格”字符，复现里面打印出的#text就是这些“回车”和“空格”字符，也称文本节点，它们才是真正意义上的
firstChild和lastChild，而不是我们想要获取的p，所以将这些空白字符去掉即可。
最终结果就不会有#text了
原文地址：https://www.cnblogs.com/zp-frighting/p/10498463.html