JAVASCRIPT HTML DOM（一）

来源：互联网发布：mac版beyond compare 编辑：程序博客网时间：2024/04/30 16:13

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

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

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

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

一：查找 HTML 元素

1.通过 id 找到 HTML 元素

<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>
<script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>
</body>
</html>

2.通过标签名找到 HTML 元素

<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>

二.HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1.改变 HTML 输出流

<!DOCTYPE html><html><body><script>document.write(Date());</script></body></html>

2.改变 HTML 内容

<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="New text!";</script></body></html>

<!DOCTYPE html><html><body><h1 id="header">Old Header</h1><script>var element=document.getElementById("header");element.innerHTML="New Header";</script></body></html>

3.改变 HTML 属性

语法：

document.getElementById(id).attribute=new value

（更改了src的值）

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

三.HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法：

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

例1：下面的例子会改变 <p> 元素的样式：
<p id="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue";</script>
例2：改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
<h1 id="id1">My Heading 1</h1><button type="button" onclick="document.getElementById('id1').style.color='red'">点击这里</button>

例3：如何使元素不可见。您希望元素显示或消失吗？

<!DOCTYPE html>
<html>
<body>
<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body>
</html>

0 0