js学习历程

js学习笔记

const 定义的常量数组和对象可以修改，但是不能重新赋值

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素，使用push方法
cars.push("Audi");

const和let类似，不能再相同的块中与var和let冲突赋值。
let和const不能实现变量提升，必须先声明后使用。

js json

json是用于存储儿和传输数据的格式，仅仅是一个文本，可以被认何编程语言读取及作为数据格式传递。
json格式与创建js对象代码相同，所以js很容易将json数据转化为对象
json语法规则
1.数据为键值对
2.数据由逗号间隔
3.大括号保存对象
4.方括号保存数组

js函数

函数提升

Dom（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（document object model）
html dom 模型被构造为对象的树：

通过可编程的对象模型，js获得足够的能力来创建动态的html
1，js能够改变页面中的所有html元素
2，js能够改变页面中的所有html属性
3，js能够改变页面中的所有CSS样式
4，js能够对页面中的所有事件做出响应
查找HTML元素
1，通过id

<p id="intro">你好世界!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

	2，通过标签名
		通过方法getElementsByTagName（"p"）
	3，通过类名
		通过方法getElementsByClassName（""）

# HTML DOM - 改变 HTML

HTML DOM允许js改变HTML元素的内容

## 改变HTML输出流

	在js中，document.write()可用于直接向HTML输出流些内容
	例如：document.write(Date());显示时间
	*不允许在文档（DOM）加载完成之后使用document.write(),这会覆盖文档。

## 改变HTML内容
修改HTML内容最常用和简单的方法是innerHTML属性。
通过document.getElementById(id).innerHTML="new content"

```javascript
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
```本例中通过DOM获得id = p1的元素，将<p>中的Hello World变成了“新文本”

改变HTML属性

如需改变HTML元素的属性，使用document.getElementsById(id).atrribute = 新属性值

本例中的HTML文档中含有id ="image"的元素，使用DOM来获得id = image的元素，js更改此元素的属性

HTML DOM - 改变CSS

HTML DOM允许js改变HTML元素的样式。

改变HTML的样式

可以使用document.getElementsById(id).style.property = 新样式

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

使用事件

HTML DOM允许我们通过触发事件来执行代码。
比如：
1，元素被点击
2，页面加载完成
3，输入框被修改

HTML DOM事件

HTML DOM使JS有能力对HTML事件做出反应

对事件做出反应

我们可以在事件发生时执行js，比如用户在HTML元素上点击时。
HTML事件的例子：
1，点击鼠标
2，加载网页
3，加载完图像
4，鼠标移动到元素上去
5，输入字段被改变
6，提交表单
7，触发按键时

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

改变了h1上的元素内容

``

HTML事件属性

向HTML元素分配事件，可以使用事件属性。

<button onclick="displayDate()">点这里</button>

向button元素分配onclick事件

使用HTML DOM来分配事件

HTML DOM允许使用js向HTML元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

向button元素分配onclick事件，按钮点击时js函数将会被执行。

onload和onunload

onload和onunload 事件会在用户进入或者离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本
onload 和 onunload 事件可用于处理 cookie。

onchange事件

onchange事件常常结合对输入字段的验证使用。

<input type="text" id="fname" onchange="upperCase()">

当用户鼠标离开输入框时会调用upperCase（）函数，将输入框里的小写字母转成大写字母

onmouseover和onmouseout事件

onmouseover在鼠标移到HTML上方触发，onmouseout在鼠标移出HTML后触发

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse over me"
}
</script>

该代码的实现效果

onmousedown、onmouseup和onclick事件

onmoousedown,onmouseup和onclick构成了鼠标点击事件的所有部分。
点击时触发onmousedown，释放时触发onmouseup，完成鼠标点击时触发onclick。

onfocus

当输入字段获得焦点时，改变其背景色

<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

HTML DOM EventListener

addEventListener()

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听
语法：element.addEventListener(event, function, useCapture)
第一个参数是时间的类型
第二个参数是事件触发后调用的函数
第三个参数是个布尔值用于描述时间是冒泡还是捕获。该参数可选。

像原元素添加事件句柄

可以使用函数名引用外部函数。

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

可以向同个元素添加多个同类事件，相互不会覆盖
也可以向同个元素添加多种不同的事件

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：
element.addEventListener(“click”, function(){ myFunction(p1, p2); });

事件冒泡或事件捕获？

事件的传递有两种方式：冒泡或者捕获
事件传递定义了元素事件触发的顺序，
冒泡：内部元素先被触发，即由内向外
捕获：外部元素先被触发，即由外向内
addEventListener（）方法可以指定，"useCapture"参数来设置传递类型，默认为false，即冒泡传递，当值为true时，事件使用捕获传递。

<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

该代码id为myP、myP2和myDiv、myDiv2的弹窗顺序不同，因为前者的参数设置为false而后者的参数设置为ture所以执行顺序不同。前者是冒泡，由内向外，先显示P的弹窗，再显示了DIV的弹窗，后者因为useCapture设置为true，由外向内执行，先显示关于DIV2的弹窗，再显示关于P的弹窗。

removeEventListener() 方法

removeEventListener（）方法移除由addEventListener（）方法添加的句柄

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

removeHandler函数取消了mousemove事件的监听

HTML DOM元素（节点）

创建新的 HTML 元素 (节点) - appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

以下代码是用于创建

元素:
var para = document.createElement(“p”);
为

元素创建一个新的文本节点：
var node = document.createTextNode(“这是一个新的段落。”);
将文本节点添加到

元素中：
para.appendChild(node);
最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：
var element = document.getElementById(“div1”);
添加到已存在的元素中:
element.appendChild(para);

创建新的HTML元素(节点)-insertBefore（）

appendChild用于添加元素到尾部，如果需要将新元素添加到开始位置，可以使用insertBefore

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

该代码把这是一个新段落，p元素的内容插入到了p1的前面

移除已存在的元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

使用removeChild（）将p1中的元素移走了，DOM中必须清楚子元素的父元素

替换 HTML 元素 - replaceChild()

可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

实例

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML DOM 集合

HTMLCollection 对象

<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
</script>

</body>

getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。可以像数组一样，使用索引来获取元素。

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

集合 length 属性常用于遍历集合中的元素。
修改所有

元素的背景颜色.

HTML DOM 节点列表

所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

本代码将p中的第二个元素访问并且显示在第三个p元素里，将第二个p元素的字体改成红色显示

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";
</script>

修改节点列表中所有 <p> 元素的背景颜色:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
节点列表不是一个数组！
节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。