查找 HTML 元素

1.通过ID找到HTML元素

2.通过标签找到HTML元素

3.通过类名找到HTML元素

eg:

var x=document.getElementById("intro");//通过ID

var x=document.getElementById("main");//通过标签名查找 HTML 元素

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

ps:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

改变 HTML 属性

document.getElementById(id).attribute=new value

eg：

document.getElementById("image").src="landscape.jpg";

改变 HTML 样式

document.getElementById(id).style.property=new style

eg:

document.getElementById("p2").style.color="blue";

使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){alert(1111)}

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发

<body onload="checkCookies()">

onchange 事件

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

onmouseover 和 onmouseout 事件

<div onmouseover="mOver(this)" onmouseout="mOut(this)"></div>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="alert(1)">请点击这里</div>

JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）

创建新的 HTML 元素

<div id="div1">
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("新段落");
    para.appendChild(node);//将文字追加到新的P标签中
    var element = document.getElementById("div1");
    element.appendChild(para);
</script>

删除已有的 HTML 元素

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

PS:删除元素必须知道父元素，常用方法:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);//先获取父元素在删除父元素中的子元素

JS学习----HTML DOM

HTML DOM 树