JavaScript基础之DOM（三）

查找 HTML 元素

var x=document.getElementById(“main”);

var y=x.getElementsByTagName(“p”);

var x=document.getElementsByClassName(“intro”);

HTML DOM
document.getElementById(id).innerHTML=新的 HTML
document.getElementById(id).attribute=新属性值

CSS DOM
document.getElementById(id).style.property=新样式

HTML DOM 事件
onclick、onload 和onunload 、onchange、onmouseover 和 onmouseout、onmousedown、onmouseup 以及 onclick

HTML DOM EventListener事件监听

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
element.addEventListener(“click”, function(){ alert(“Hello World!”); });

向同一个元素中添加多个事件句柄
addEventListener() 方法***允许向同一个元素添加多个事件，且不会覆盖已存在的事件***：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}

事件冒泡或事件捕获
冒泡：先变内层
捕获：先边外层
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById(“myDiv”).addEventListener(“click”, myFunction, true);
function someOtherFunction() {
alert (“函数已执行!”)
}

removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener(“mousemove”, myFunction);

跨浏览器解决方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}
function myFunction() {
    alert("Hello World!");
}
</script>
</body>
</html>

HTML DOM 元素 (节点)
创建新的 HTML 元素 (节点) - appendChild()
document.getElementById(“div1”).appendChild(document.createElement(“p”));
*** insertBefore()***
removeChild()
var parent = document.getElementById(“div1”);
var child = document.getElementById(“p1”);
parent.removeChild(child);
***替换 HTML 元素 - replaceChild() ***