JavaScript基础 – HTML DOM元素

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

1.查找 HTML 元素

（1）通过 id 查找 HTML 元素

document.getElementById("id");

（2）通过标签名查找 HTML 元素

document.getElementsByTagName("p"); 注意这里是Elements，跟id不同

（3）通过类名查找 HTML 元素

document.getElementByClassName("class");

注意：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

<div class="c" id="id1">
	<p>这是第一段内容</p>
	<p>这是第二段内容</p>
</div>
		
<script type="text/javascript">
//通过ID查找元素
var x = document.getElementById("id1");
x.style.color = "blue";
//通过class查找元素，注意得到的是一个数组，即使只找到一个元素也是数组
var y = document.getElementsByClassName("c");
var z = y[0].getElementsByTagName("p");	//通过标签名查找元素，得到的也是个数组
z[0].style.color = "red";
</script>

2.改变 HTML 输出流

使用 document.write() 直接向 HTML 输出流写内容

3.改变 HTML 内容

最简单的办法使用 innerHTML 属性。

<div class="c" id="id1">
	<p>这是第一段内容</p>
	<p>这是第二段内容</p>
</div>
		
<script type="text/javascript">
var x = document.getElementById("id1");
x.innerHTML = "<p>更换新内容</p>";
</script>

4.改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

<img id="image" src="abc.jpg">
		
<script type="text/javascript">
var x = document.getElementById("image");
x.src = "123.jpg";
</script>

5.改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

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

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

相关的style属性可以参考 http://www.w3school.com.cn/jsref/dom_obj_style.asp

6.HTML 事件属性

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

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

7.使用 HTML DOM 来分配事件

<button id="myBtn">点击这里</button>

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

<p id="demo"></p>

8.onload 和 onunload事件

<body onload="test()">

<script>
function test(){
alert("测试");
}
</script>
</body>

onunload貌似不起作用，可能跟浏览器兼容问题有关

9.onchange 事件

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>
</html>

10.onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

11.onmousedown、onmouseup 以及 onclick 事件

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

12.onfocus

13.onmouseover 和 onmouseout

<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">
请把鼠标移到这段文本上
</h1>

发送评论 编辑评论

发送评论编辑评论