JS Dom Tree

Dom tree

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找HTML 元素:

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

id

var x=document.getElementById("intro");
返回值是一个对象obj

标签名

var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

通过类名

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

改变HTML属性

<img id="image" src="smiley.gif"><script>document.getElementById("image").src="landscape.jpg";</script>

该bainHTML样式（CSS）

document.getElementById(*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>""
==========

使用事件

当事件被触发时执行代码:

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

隐藏文本和显示文本语法:

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /> <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />