JavaScript学习笔记(DOM脚本)
（最近刚来到简书平台，以前在CSDN上写的一些东西，也在逐渐的移到这儿来，有些篇幅是很早的时候写下的，因此可能会看到一些内容杂乱的文章，对此深感抱歉，以下为正文）
正文
本篇讲述的是文档对象模型（DOM）。
JavaScript在Web开发中的主要作用是用于与用户进行交互，而DOM便是我们实现这些功能的基础。DOM是W3C提供的一种标准，它为开发人员提供了一种方式以表达网页中的所有元素。我们可以通过JavaScript修改页面元素相应的DOM属性，便可以对页面中的元素进行相关操作。
有一点儿比较值得称赞的是，因为DOM只表示页面中的内容，所以它并不受浏览器影响，因此我们编写的代码可以在任何兼容DOM的浏览器中运行，这是它一大亮点。
下面我们来通过一个小例子来加深对DOM的认识：
<!DOCTYPE html>
<html lang = "en">
<head>
</head>
<body>
<h1>h1</h1>
<p>Hello World!</p>
</body>
</html>
上面代码是一个相当简单的html页面，我们可以通过DOM的树形表达结构来表示上述的页面，表示如下：
结构图
可以从上图中看出，html页面中的每个元素，都可以在DOM结构中作为一个节点，从而构成一个树形的结构。当然，因为页面比较简单，所以看结构看上去很简单，当今后我们编写复杂页面的时候，就可以发现其对应的DOM树是相当的复杂。
下面我们来看看DOM的核心对象：
[图片上传中...(1.png-3a464b-1576484292866-0)]
基本DOM对象
高级DOM对象
因为DOM中包含的对象及其对应的方法和属性实在是太多了，所以本篇只简单地描述一下Node，Element和Document三个对象及其部分的方法和属性。通过这三个对象，我们就可以创建，修改和导航树形结构了。
1.Document对象及其方法：
Document对象可以在页面上完成查找，创建和删除元素的功能，这些功能对于我们而言十分的重要。
查找一个或多个元素：
Document对象查找功能
下面通过一个小例子来验证这些方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>just a test</title>
</head>
<body bgcolor="white">
<p id="p1">paragraph 1</p>
<p id="p2">paragraph 2</p>
<p id="p3">paragraph 3</p>
<h1 class="test1" >heading1</h1>
<h1 class="test2" id="h2">heading2</h1>
</body>
</html>
通过浏览器打开该界面，并在控制台输入如下代码：
var p1 = document.getElementById("p1");
var p = document.getElementsByTagName("p");
var h1 = document.querySelector(".test1,h1");
var pp = document.querySelectorAll("p");
console.log(p1.innerHTML);
console.log("p的length为："+p.length+" 第二项item[1]内容为： "+p.item(1).innerHTML);
console.log("pp的length为： "+pp.length+" pp的第二项为："+pp.item(2).innerHTML);
console.log(h1);
可以得到如下打印：
示例
从控制台输出可以看出，通过四种方法，我们都可以成功取出页面中的元素，并查看元素的内容。
创建元素和文本：
document对象除了查找功能外还提供了一系列创建元素和文本的方法。
document对象创建元素和文本
下面通过一个小例子来验证这些方法：
<!DOCTYPE html>
<html lang = "en">
<head>
<title>just a test</title>
</head>
<body>
<script>
</script>
</body>
</html>
创建一个空网页，在浏览器中打开，并执行下述代码：
var text = document.createTextNode("heading1"); //创建一个文本节点
var heading1 = document.createElement("h1"); //创建一个h1元素
heading1.appendChild(text); //向h1元素中添加文本节点
document.body.appendChild(heading1); //向body中添加h1元素
执行上述代码后，可以得到如下效果：
示例
从页面中可以看出，我们通过JavaScript动态的改变了页面的显示，是不是开始有了点儿小小的成就感呢~
此时可以查看document对象的documentElement属性，执行完后会返回该元素对象的引用，也可以说是Element对象，同时我们可以通过调用Element的tagName属性，来查看元素的标记。
示例
示例
2.Element对象及其方法：
Element对象相对本次介绍的另外两个对象而言要相对简单，其方法和属性都比较少。
Element对象创建元素和文本
下面通过一个小例子来验证以上方法和属性。
首先创建如下静态页面：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>just a test</title>
</head>
<body bgcolor="white">
<p id="p1">paragraph 1</p>
</body>
</html>
然后再打开控制台在其中输入如下代码：
//获取最外层的元素
var container = document.documentElement;
//获取id为p1的元素
var pElement = document.getElementById("p1");
//输出最外层元素的标记名称
console.log(container.tagName);
//将id为p1的元素的align属性设为居中
pElement.setAttribute("align","center");
//打印此时id为p1的元素的align的值
console.log(pElement.getAttribute("align"));
//删除id为p1的元素的align属性的值
pElement.removeAttribute("align");
执行上述代码可以看到如下效果：
示例
3.Node对象及其方法：
前面我们提到了DOM模型是一个树形结构，Node对象就是树形结构中的每一个节点。通过它我们可以完成对DOM的导航。
Node对象常用属性和方法
下面来通过一个小例子来验证这些方法。
首先创建一个静态页面，代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>just a test</title>
</head>
<body bgcolor="white">
<h1 id="heading1">this is heading</h1>
<p id="p1">this is paragraph</p>
</body>
</html>
然后在控制台输入如下代码：
获取根元素节点,即<html/>元素
var root = document.documentElement;
//输出根节点下是否有子节点
console.log("root节点下是否有子节点："+root.hasChildNodes());
//输出根节点下子节点的数量
console.log("root节点下子节点的数量："+root.childElementCount);
//因为我们知道html的结构，所以知道根节点下的第一个子节点是<head/>
var headElement= root.firstChild;
//因为我们知道html的结构，所以知道根节点下的第二个子节点是<body>
var bodyElement = root.lastChild;
//输出两个子节点的名称
console.log("headElement的名称为："+headElement.tagName+" bodyElement的名称为："+bodyElement.tagName);
//通过id获得h1元素节点
var h1Element = document.getElementById("heading1");
//声明一个pElement变量来容纳p元素节点，这里要注意的是元素与元素之间包含空白的文本节点，所以需要判断节点的类型，如果不是元素节点，需进行两次下一个节点的查
//找
var pElement;
if(h1Element.nextSibling.nodeType == 1){
pElement = h1Element.nextSibling;
}else{
pElement = h1Element.nextSibling.nextSibling;
}
console.log("h1Element的名称为："+h1Element.tagName+" pElement的名称为："+pElement.tagName);
//创建一个文本节点
var newText = document.createTextNode("this is new paragraph");
//创建一个p元素节点
var newPElement = document.createElement("p");
//将文本节点加入p元素节点中
newPElement.appendChild(newText);
//将创建的p元素节点插入到body节点的子节点列表下的最后
document.body.appendChild(newPElement);
执性上述代码前，页面如下：
执行前
执行上述代码后，页面如下：
执行后
学习了上面的3个对象后，我们已经可以自行导航一个页面，获取其中的节点，及相应的属性。除了这样，我们还可以通过修改元素的一个style属性或者class属性来实现对界面的修改。
下面用两个小例子来展示其用法。
Example1：
创建如下静态界面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>just a test</title>
<style>
#divAdvert{
font: 12pt arial;
}
.new-style{
font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="divAdvert">
just a test!
</div>
</body>
</html>
执行前
在控制台输入如下代码：
//根据id获取到div块
var divAdvert = document.getElementById("divAdvert");
//通过style属性将颜色设为红色
divAdvert.style.color = "red";
//通过修改class属性，来使用新的css样式
divAdvert.className = "new-style";
执行上述代码后可以看到如下界面：
执行后
Example2：
第二个例子相对而言比较有意思，是模拟网页中的那种左右移动的广告，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>just a test</title>
<style>
//定义的一个样式
#divAdvert {
position: absolute;
font: 12px Arial;
top: 4px;
left: 0px;
}
</style>
</head>
<body>
//定义的一个div块，其中包含一段文字
<div id="divAdvert">
Here is an advertisement.
</div>
<script>
//声明一个变量来控制文字移动方向是否需要改变，默认为false，false时向右移动，true时向左移动
var switchDirection = false;
function doAnimation() {
//通过id获取div块
var divAdvert = document.getElementById("divAdvert");
//获取当前div块距离最左侧的偏移量
var currentLeft = divAdvert.offsetLeft;
//声明一哥变量用于容纳当前距离最左侧的偏移量
var newLocation;
//判断当前移动方向的值为true或false，false时，将当前的偏移量+2，然后赋值给newLocation，true是-2；
if (!switchDirection) {
newLocation = currentLeft + 2;
if (currentLeft >= 400) {
switchDirection = true;
}
} else {
newLocation = currentLeft - 2;
if (currentLeft <= 0) {
switchDirection = false;
}
}
//通过style属性设置div块距离左侧的偏移量为newLocation的值
divAdvert.style.left = newLocation + "px";
}
//启动循环定时器，每隔10毫秒执行一次上述方法
setInterval(doAnimation, 10);
</script>
</body>
</html>
执行完上述代码可以看到如下效果：
执行效果
以上为为本篇的全部内容。
