文章目录
- 前言
- 一丶关于DOM + 事件初识
- 二丶获取元素
- <1>querySelector
- <2>querySelectorAll
- 三丶操作元素
- <1>获取/修改元素内容
- 1> innerText
- 2>innerHTML(主要)
- <2>获取/修改样式属性
- 1>查看元素对象属性
- 2> 获取/修改元素属性
- 3>为style属性赋值
- 1>行内样式操作
- 2>类名样式操作
- <3>获取/修改表单元素属性
- 1>文本框 + 按钮 + 普通标签
- 2>复选框
- 四丶操作节点
- <1>创建元素节点
- <2>插入节点
- 1>插入指定节点之后
- 2>插入到指定节点之前
- <3>删除节点
- 五丶总结
前言
这一部分是关于WebAPI的部分，我们上一篇博客说过，JS总共有三部分
1.ECMAScript:基础语法部分
2.DOM API：操作页面结构
3.BOM API：操作浏览器
我们的WebAPI部分就包括了DOM + BOM。
这里给出手册参考地址：
一丶关于DOM + 事件初识
DOM全称为Document Object Model。 一个页面结构就是一个多子树结构，每一个节点都抽象为一个页面文档的对象。
这里有几个重要概念需要进行说明：
文档: 一个页面就是一个 文档, 使用 document 表示。
元素: 页面中所有的标签都称为 元素. 使用 element 表示。
节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等)。使用 node 表示。
我们的JS和DOM API都是和事件相关的
（1）事件源：由哪个元素引起
（2）事件类型：用户的操作，就像点击，双击，选中这些
（3）事件回调函数：事件发生以后需要做什么。（这里我们需要提供一个回调函数，在事件发生以后，由浏览器自动执行里面的代码）
其实我们学的JS代码执行流程也就是上面这些
1.事件源：这里我们学习如何选择页面元素
2.调用DOM的API来做事情。（1）设置属性 （2）设置标签内容
二丶获取元素
我们在获取页面元素这里说两种方式。
<1>querySelector
语法格式如下：
var element = document.querySelector(selectors);关于这个语句的具体含义：
这里注意啦！
1> selectors 包含一个或多个要匹配的选择器的 DOM字符串DOMString， 该字符串必须是有效的
2> CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
3> 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
4> 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素
因为参数是选择器，所以要通过特殊符号指定是那种选择器。
例如：
.** 这种类型就是类选择器
#** 这种类型就是id选择器示例代码如下：
<body>
<div class="1">这里是类选择器</div>
<div id = "2">这里是id选择器</div>
</body>
<script>
var el1 = document.querySelector(".1");
console.log(el1);
var el2 = document.querySelector("#2");
console.log(el2);
</script>对应显示如下：
<2>querySelectorAll
这个的用法和上面差不多是一致的。但是如果说我们要返回多个元素，就要用querySelectorAll方法，返回一个数组，让这个数组里面包含我们要返回的多个元素。
<body>
<p>张三今晚在学习JAVA</p>
<p>李四今晚在玩游戏</p>
<p>王五今晚在和女朋友聊天</p>
</body>
<script>
//如果返回器返回多个元素，需要使用querySelectorAll，返回的是一个数组其中包含多个元素
var arr = document.querySelectorAll("p")
//数组的遍历
//一丶下标的方式
for(let i = 0;i < arr.length;i++){
console.log(arr[i]);
}
//方式二：in
for(let e of arr){//类似JAVA中的一个int[]，for(int x:arr)
console.log(e);
}
</script>在页面上的显示如下
三丶操作元素
<1>获取/修改元素内容
1> innerText
Element.innerText 属性表示一个节点及其后代的“渲染”文本内容
// 读操作
var renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string2>innerHTML(主要)
Element.innerHTML 属性设置或获取HTML语法表示的元素的后代
// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;它是先获取到事件源的元素，然后再去注册事件。
<2>获取/修改样式属性
1>查看元素对象属性
我们可以通过console.dir()查看元素对象属性。
<body>
<img src="dog.jpg" alt="" style="width: 100px; height: 100px;">
</body>
<script>
//获取img元素
var img= document.querySelector("img");
//console.dir表示，将一个对象中的属性丶方法打印出来
console.dir(img);
</script>我们的界面显示如下，右侧就是对象的属性
2> 获取/修改元素属性
我们这里赋值和获取值的方式主要有两种
对象.属性
对象['属性']然后接着上面的代码，给出一个操作示例，点击切换图片
<body>
<img src="dog.jpg" alt="" style="width: 100px; height: 100px;">
</body>
<script>
//获取img元素
var img= document.querySelector("img");
//console.dir表示，将一个对象中的属性丶方法打印出来
console.dir(img);
img.onclick = function(){
//对象src属性保持的是绝对路径，我们用包含来判断就行
if(img.src.lastIndexOf( "rose.jpg") !== -1){
img.src = "dog.jpg";
}else{
img.src = "rose.jpg";
}
}
</script>我们通过这两种方式可以直接获取该元素中的属性，当然也可以设置为我们想要的值。比如上面我们直接赋值rose.jpg。我们页面刚开始加载的时候是dog.jpg，然后点击图片之后执行JS代码img.src = “rose.jpg”，这个时候图片就变为玫瑰花了。
3>为style属性赋值
如果说我们要赋值的是style属性的话，就要分为以下两种方式来进行讨论。
1>行内样式操作
“行内样式”通过style直接在标签上指定的样式，优先级很高。
适用于改的样式少的情况。
<body>
<p>点我试试</p>
<script>
var p = document.querySelector("p");
p.onclick = function(){
console.log(p.style.color)
if(p.style.color == '' || p.style.color == 'black'){
p.style.fontSize = "2em";
p.style.color = 'red';
}else{
p.style.fontSize = '2em';
p.style.color = 'black';
}
}
</script>对应的显示如下
点击之后变为如下样式
2>类名样式操作
如果说在我们要修改的style样式很多的时候，就会很不方便，所以这个时候我们就可以通过class来设置标签样式，再调整class（对应DOM元素的className属性）。
语句如下：
element.className = [CSS 类名];<body>
<span class="day">
这是一大段话<br>
这是一大段话<br>
这是一大段话<br>
这是一大段话<br>
</span>
<script>
//span标签，点击切换模式：因为模式设置的css样式可能比较多，所以切换class类更方便一点
var span = document.querySelector("span");
span.onclick = function(){
//获取当前点击时候的class
//<span class="">标签中的class属性，在js的元素对象属性对应为className,因为class在js中是关键字
var cls = span.className;
if(cls == "day"){
span.className = "black";
}else{
span.className = "day";
}
}对应显示如下，这是白天模式：
点击之后切换黑夜属性：
<3>获取/修改表单元素属性
表单（主要是指input标签）的以下属性都可以通过DOM来修改
value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等）
接下来对上面的这些属性部分进行使用
1>文本框 + 按钮 + 普通标签
<body>
切换播放/暂停<input type="button" id = "btn" value="播放">
</body>
<script>
var btn = document.querySelector("#btn");
btn.onclick = function(){
var content = btn.value;
if(content == "播放"){
//切换显示的内容为暂停
btn.value = "暂停";//注意这里不能写成 content = "播放"
}else{
btn.value = "播放"
}
}
</script>选择按钮元素，绑定点击事件，切换显示的文本内容
<body>
点击计数+1:
<input type="text" id="sum" value="0">
<input type="button" id = "sum_btn" value="点击我+1">
<br>
</body>
<script>
//点击按钮，文本框值+1
var sum = document.querySelector("#sum");
var sumBtn = document.querySelector("#sum_btn");
sumBtn.onclick = function(){
var count = +sum.value;//这里是字符串,要转为数值
console.log(count);
sum.value = count+1;
}
</script>上面要提到的就是这行代码
var count = +sum.value;//这里是字符串,要转为数值如果直接写成sum.value = sum.value + 1,他就会给后面不断加1，是字符串形式的加。然后具体显示如下：
2>复选框
复选框是checked属性，这里需要特别说明。
在html标签中，属性值是checked选中，但是在JS中，checked属性是true/false。
<body>
全部选中/取消：
<!--类似dom元素：{onclick：all()}-->
<input type="checkbox" id="all">全部选中
<input type="checkbox" class="item">妲己
<input type="checkbox" class="item">安琪拉
<input type="checkbox" class="item">貂蝉
<input type="checkbox" class="item">王昭君
</body>
<script>
var all = document.querySelector("#all");
var items = document.querySelectorAll(".item");
all.onclick = function(){
for(item of items){
item.checked = all.checked;
}
}
</script>具体效果如下
当我们点击全部选中框时，就会全选。
为什么要优化呢？因为这里我们想要实现一个功能，就是当我们把妲己，安琪拉，貂蝉，王昭君选中之后，全部选中框就会自动选上。
<body>
全部选中/取消：
<!--类似dom元素：{onclick：all()}-->
<input type="checkbox" id="all">全部选中
<input type="checkbox" class="item">妲己
<input type="checkbox" class="item">安琪拉
<input type="checkbox" class="item">貂蝉
<input type="checkbox" class="item">王昭君
</body>
<script>
var all = document.querySelector("#all");
var items = document.querySelectorAll(".item");
all.onclick = function(){
for(item of items){
item.checked = all.checked;
}
}
for(item of items){//每一个都绑定点击事件
item.onclick = function(){
let allChecked = true;
for(it of items){
if(!it.checked){
allChecked = false;
}
}
all.checked = allChecked;
}
}
</script>这里特别说明一下，如果说框被选上了，那么checked属性就是true，如果没被选上，那么属性框的checked属性就是false。
四丶操作节点
操作节点分为两步
1.创建一个节点
2.把元素节点插入到DOM树当中
<1>创建元素节点
使用 createElement 方法来创建一个元素. options 参数暂不关注
var element = document.createElement("标签名")可以通过这种方法设置DOM对象的属性，标签内容。
首先在这里想通过一个问题来引出为什么要有创建节点这个事。
我们想要实现这个功能，每点击一下，就会在下方新加文本框中的内容。
那么按照我们学习过的内容，可以写出如下代码：
<body>
<input type="text" id="content" value = "新加的内容">
<input type="button" id = "add" value="添加文本框内容为一个段落">
<div id="container">
<h3>显示的内容</h3>
</div>
</body>
<script>
//绑定点击事件，获取文本框内容，添加到container中
var content = document.querySelector("#content");
var container = document.querySelector("#container");
add.onclick = function(){
//点击时，获取文本框内容
var text = content.value;
//第一种方式：innerHTML,先获取container中所有内容，在最后拼接<p>标签
var html = container.innerHTML;
html += "<p><h3>";
html += text;
html += "</h3><p>";
container.innerHTML = html;
}
</script>但是这种方式是有一个很大问题的
它得效率很差，已有的标签浏览器已经渲染了，但是又会重新设置，然后再次渲染，这样就很浪费资源。
所以我们就有了如下的方式，通过新加一个节点来进行新加内容的添加
<body>
<input type="text" id="content" value = "新加的内容">
<input type="button" id = "add" value="添加文本框内容为一个段落">
<div id="container">
<h3>显示的内容</h3>
</div>
</body>
<script>
//绑定点击事件，获取文本框内容，添加到container中
var add = document.querySelector("#add");
var content = document.querySelector("#content");
var container = document.querySelector("#container");
add.onclick = function(){
//第二种方式:创建一个dom元素（<p>）,然后添加到container内，作为最后一个子节点。
var text = content.value;
var p = document.createElement("p");
p.innerHTML = "<h3>" + text + "</h3>";
container.appendChild(p);//添加到dom树形结构中，并作为container最后子节点
}
</script><2>插入节点
1>插入指定节点之后
这个功能的实现需要使用appendChild
element.appendChild(aChild)实际上我们上面就已经实现过了这个功能了。
所以这里就不再写新的代码来进行演示。
2>插入到指定节点之前
这个功能是通过使用insertBefore将节点插入到指定节点之前。
var insertedNode = parentNode.insertBefore(newNode, referenceNode);再准确一些，父节点parentNode有一个子节点referenceNode，这个语句会将newNode插入到referenceNode之前。
<body>
<div id="insertBeforeDiv">
<p>11</p>
<p>22</p>
<p>33</p>
<p>44</p>
</div>
<script>
//insertBefore:在某个节点前插入另一个节点
var insertBeforeDiv = document.querySelector("#insertBeforeDiv");
//准备要插入的节点
var insertNode = document.createElement("p");
insertNode.innerHTML = "插入的新节点";
insertBeforeDiv.insertBefore(insertNode,insertBeforeDiv.children[0]);
</script>效果如下
DOM对象：其中包含属性
DOM.children:返回该DOM对象下一级所有的子节点数组
DOM.parentNode:返回该dom对象上一级的节点
<3>删除节点
这里使用removeChild删除子节点
oldChild = element.removeChild(child);这里注意了
1>child 为待删除节点
2>element 为 child 的父节点
3>返回值为该被删除节点
4>被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom
树的其他位置.
5>如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常.演示如下：
<body>
<div id="insertBeforeDiv">
<p>11</p>
<p>22</p>
<p>33</p>
<p>44</p>
</div>
<script>
var insertBeforeDiv = document.querySelector("#insertBeforeDiv");
var last = insertBeforeDiv.children[insertBeforeDiv.children.length - 1];//取最后一个节点
insertBeforeDiv.removeChild(last);
</script>这里我们就对上面的插入节点的代码进行更改
然后我们就可以看到最后一个节点已经被删除了。
五丶总结
前端部分浅浅的了解了，准备后端吧！！！加油！！！
