2018-11-28 javascript学习记录

1.文档对象模型HTML DOM (Document Object Model)
作用：通过DOM，javascript可以动态创建html，例如：改变html元素，改变元素属性，改变样式，对事件做出反应。
1）查找html元素：
通过元素id查找：document.getElementById("test")
通过元素className查找，这里查到到的是一个元素集合：document.getElementsByClassName("testName")
通过元素标签查找，这里查到到的是一个元素集合：document.getElementsByTagName("p")
2）改变html内容：
document.write() 可用于直接向 HTML 输出流写内容
document.getElementById(id).innerHTML=新的 HTML 可以改变元素的内容
document.getElementById(id).attribute=新属性值 可以改变元素的属性
3）改变html样式：
document.getElementById(id).style.property=新样式
4）对事件做出反应，当点击按钮时改变id为id1的元素的字体大小：

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.fontSize='100px'">点我!</button>

使用 HTML DOM 来分配事件：

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

其他事件类型：
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onchange 事件常结合对输入字段的验证来使用。输入字段被改变时触发。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onfocus当输入字段获得焦点时

2.监听事件addEventListener() 方法
在一个元素中添加多个addEventListener() 方法，在操作这个元素的时候可以触发多个方法。

<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

向windows对象添加addEventListener() 方法

<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

addEventListener(event, function, useCapture);
useCapture是事件传递类型
useCapture为true时：捕获
useCapture为false时：冒泡
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
移除监听事件addEventListener() 方法
element.removeEventListener("mousemove", myFunction);

3.getElementsByTagName() 方法返回 HTMLCollection 对象
获取文档所有<p>元素：document.getElementsByTagName("p")

<p>Hello Runoob!</p>
<p id="demo"></p>

<script>
var temp = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第一段内容是" + temp[0].innerHTML;
</script>

HTMLCollection 对象的 length 属性定义了集合中元素的数量。
4.创建及删除html元素：
创建html元素：
先创建这个元素，然后要把这个元素加入到已存在的元素的节点中。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
//创建<p>元素para
var para = document.createElement("p");
//创建元素内容
var node = document.createTextNode("这是一个新的段落。");
// 将这个内容给元素para
para.appendChild(node);
 
var element = document.getElementById("div1");
// 将元素para放到元素element中
element.appendChild(para);
</script>

删除元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
//找到元素id为div1的元素，即要移除的元素的父元素
var parent = document.getElementById("div1");
//找到元素id为p1的元素，即要移除的元素
var child = document.getElementById("p1");
//使用父元素移除子元素
parent.removeChild(child);
</script>