JavaScript学习笔记（二）（DOM 和 BOM）

DOM树

一，查找HTML元素

1，通过id查找

!+s：即查找单个元素

var x=document.getElementById("intro");

2，通过标签名查找

+s：即查找多个元素

var y=document.getElementsByTagName("p");

3，通过类名查找

+s：即查找多个元素

var x=document.getElementsByClassName("intro");

4，特别的，我们也可以通过查找元素改变标签相应的属性

document.getElementById(id).attribute=新属性值
//如：
document.getElementById("image").src="xxx.jpg";

5，如需改变HTML样式

document.getElementById(id).style.property=新样式
//如：
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

6，DOM也可以由事件触发

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

二，事件

1，基本事件

• onload();//用户进入页面时触发
• onunload();//用户离开页面时触发
• onchange();//结合输入文本框使用
• onmouseover();//鼠标移动到标签上时触发
• onmouseout();//鼠标离开标签时触发
• onmousedown();//鼠标按下时触发
• onmouseup();//鼠标松开时触发
• onclick();//完成点击操作时触发

2，事件可以写在标签内，也可以写在JS

写在标签内

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

写在JS内

document.getElementById("myBtn").onclick=function(){displayDate()};

3，增加事件监听

语法 ↓

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

//点击按钮显示日期

document.getElementById("myBtn").addEventListener("click", displayDate);

//点击按钮弹框“你好 世界！”

element.addEventListener("click", function(){ alert("Hello World!"); });
上下两个代码作用是相同的
element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

//可以向同一个元素添加多个事件，且不会覆盖原来事件

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

//也可以向同一个元素添加不同的事件

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

//也可以向windows对象添加事件
//当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

//当传递参数值时，使用"匿名函数"调用带参数的函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

4，事件的冒泡与捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将<p> 元素插入到 <div> 元素中，用户点击<p> 元素, 哪个元素的 “click” 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：
useCapture默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

addEventListener(event, function, useCapture);

5，removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

三，增删改查DOM节点

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

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

js

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

2，创建新的 HTML 元素 (节点) - insertBefore()
html

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

js

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);

3，移除已存在的元素

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

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

4，替换 HTML 元素 - replaceChild()
html

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

js

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);