零.前言
JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客
JavaScript(二)---【js数组、js对象、this指针】-CSDN博客
JavaScript(三)---【this指针，函数定义、Call、Apply、函数绑定、闭包】-CSDN博客
JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】-CSDN博客
一.DOM简介
1.1什么是DOM
当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM（Document Object Model）
每个HTML都可以被视为一个文档树，DOM为这个文档树提供了一个编程接口，开发者可以使用JS来操作这个树。
1.2文档树能干什么
文档树可以干的事情非常多，基本上所有可以想到的功能，都可以利用JS+文档树来实现。
- JS能够改变页面中的所有HTML元素
- JS能够改变页面中的所有HTML属性
- JS能够改变页面中的所有CSS样式
- JS能在页面中创建新的HTML事件
二.DOM方法
2.1概括
在DOM中，所有的HTML都被定义为：“对象”，故下文中的所有“对象”都指的是“HTML元素”
另外，在DOM中还有：“方法”、“属性·”两个概念。
“方法”：“指能够在HTML上执行的动作”
“属性”：“能够设置或改变HTML元素的内容(值)”
例如：
<h1 id="demo"></h1>
<script>
document.getElementById("demo").innerHTML = "这是一个例子."
</script>效果：
其中，“getEelmentById”是一个“方法”，而“innerHTML”是一个“属性”
这段代码的作用就是修改<p>标签的内容
2.2常见的DOM方法【查找】
以下是四种通过不同“关键字”来查找HTML元素的方法
- document.getElementById(id)：通过元素id来查找
- document.getElementByTagName(name)：通过标签名来查找
- document.getElementByClassName(name)：通过类名来查找
- document.querySelectorAll(id、类名、类型、属性、属性值等等)：通过“CSS选择器” 来查找
值得注意的是：“上述的id和name都必须用双引号包裹”
2.3常见的DOM方法【改变HTML元素】
以下是四种改变HTML元素属性的方法：
- elements.innerHTML = 新内容：改变元素的内容
- elements.attribute = 新属性值：改变元素的属性值(这里的attribute是具体的属性名)
- elements.setAttribute(属性名,新属性值)：改变元素的属性值
- elements.style.property = 新样式：改变元素的CSS样式
例如，我想要修改<input>输入框的文本类型由“text”变为“password”，可以如下使用：
<input type="password" id="demo">
<script>
document.getElementById("demo").type = "password"
</script>2.4常见的DOM方法【添加和删除元素】
以下是五种添加、删除HTML元素的方法：
- document.createElement(element)：创建HTML元素
- document.removeChild(element)：删除HTML元素
- document.appendChild(element)：添加HTML元素
- document.replaceChild(element)：替换HTML元素
- document.write(text)：写入HTML输出流
2.5常见的DOM问题
1.NodeList与HTMLCollection
“HTMLCollection”是HTML元素的集合(数组)，而NodeList是“文档节点”集合的一个对象。
这两者几乎相同，但是本质上不同
HTMLColeection是一个数组，可以使用数组的方法来对它修改，如“pop()、join()”方法等
但是NodeList是一个文档节点总和的对象，这个对象无法使用数组的方法
同时NodeList只能使用下标来访问内部元素，而HTMLCollection可以使用“下标索引、元素名、id”
我们用一个例子来说明两者区别：
<body>
<h1 class="sample">Hello World</h1>
<h1 class="sample">这是一个例子</h1>
<h1 class="sample">这是一个例子</h1>
<p id="sample"></p>
<script>
var list = [1,2,3,4,5,6]
var x = document.querySelectorAll("h1.sample");
console.log(list);
console.log(x);
</script>
</body>效果：
注意到两者的“Prototype”类型，一个是“Array”数组，另一个是“NodeList” 对象
2.使用“类名”、“标签名”查询返回的是一个“数组”
在使用“类名”、“标签名”来查询元素时，返回的是一个包含“所有符合条件”的元素的“NodeLsit”。
例如我们使用“标签名”查询
<body>
<h1>我是第一个h1标签</h1>
<h1>我是第二个h1标签</h1>
<h1>我是第三个h1标签</h1>
<h1>我是第四个h1标签</h1>
<h1>我是第五个h1标签</h1>
<script>
var x = document.getElementsByTagName("h1");
console.log(x);
</script>
</body>效果：
3.使用document.createElement()创建节点时
对于任何一个元素，它由两部分组成：“元素节点”和“文本节点”
“元素节点”：“代表这个元素”
“文本节点”：“元素内的内容”
我们可以使用“document.createTextNode”来创建一个文本节点，再把这个节点添加到我们的元素节点中即可
<body>
<h1>我是第一个h1标签</h1>
<h1>我是第二个h1标签</h1>
<h1>我是第三个h1标签</h1>
<h1>我是第四个h1标签</h1>
<h1>我是第五个h1标签</h1>
<script>
var body = document.getElementsByTagName("body")[0]
var x = document.createElement("p");
var node = document.createTextNode("这是一个由JS生成的p标签");
x.appendChild(node);
body.appendChild(x);
</script>
</body>效果：
4.使用CSS选择器查找标签时
使用CSS选择器查找符合条件的标签时，返回的是一个“所有符合条件”的"NodeList"。
例如：
<body>
<h1 class="sample">Hello World</h1>
<h1 class="sample">这是一个例子</h1>
<h1 class="sample">这是一个例子</h1>
<p id="sample"></p>
<script>
var x = document.querySelectorAll("h1.sample");
console.log(x);
</script>
<body>结果：
通过NodeList，我们可以实现一些功能：
<body>
<h1 class="sample">Hello World</h1>
<h1 class="sample">这是一个例子</h1>
<h1 class="sample">这是一个例子</h1>
<p id="sample"></p>
<script>
var x = document.querySelectorAll("h1.sample");
console.log(x);
</script>
<script>
var text = "";
for(let i = 0;i < x.length;i++){
text += x[i].innerHTML + "<br>";
}
document.getElementById("sample").innerHTML = text;
</script>
</body>效果：
