通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
<code>HTML DOM </code>(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
简单来说就是用js来写一些<code>html</code>代码。通过各种方式获取<code>html</code>代码，然后创建新的<code>html</code>标签，还能更改样式等等
通过可编程的对象模型，<code>JavaScript</code> 获得了足够的能力来创建动态的 <code>HTML</code>。
- <code>JavaScript</code>能够改变页面中的所有 HTML 元素
- <code>JavaScript</code>能够改变页面中的所有 HTML 属性
- <code>JavaScript</code> 能够改变页面中的所有 CSS 样式
- <code>JavaScript</code> 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过<code>id</code> 查找 <code>HTML</code> 元素
在 DOM 中查找 <code>HTML</code> 元素的最简单的方法，是通过使用元素的 id。
本例查找 <code>id="intro"</code> 元素：
var x=document.getElementById("intro"); - 通过标签名找到 <code>HTML</code> 元素
通过标签名查找 <code>HTML</code> 元素
本例查找<code> id="main"</code> 的元素，然后查找 <code>id="main"</code> 元素中的所有 <p> 元素：
实例:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p"); - 通过类名找到 <code>HTML</code> 元素
通过类名找到 <code>HTML</code> 元素
本例通过 <code>[getElementsByClassName]</code>函数来查找 <code>class="intro" </code>的元素：
实例
var x=document.getElementsByClassName("intro");
改变 HTML
-
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML;
完美例子：
<html><body><p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML="新文本!";
</script></body></html> -
本例改变了 <code><h1></code> 元素的内容：
实例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
注释:innerHTML标签相当于往<code>html</code>里添加新的字符串，字符串也可以是HTML. -
上面的 HTML 文档含有 id="header" 的 <h1> 元素
-
我们使用 HTML DOM 来获得 id="header" 的元素
-
JavaScript 更改此元素的内容 (innerHTML)
-
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById('id').attribute=新属性值;
栗子：
<!DOCTYPE html>
<html><body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body></html>
实例讲解：
- 上面的 HTML 文档含有 id="image" 的 <img> 元素
- 我们使用 HTML DOM 来获得 id="image" 的元素
- JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）
改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
-
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById('id').style.property=新样式;
下面的例子会改变 <p> 元素的样式：<html><body> <p id="p2">Hello World!</p> <script>document.getElementById("p2").style.color="blue";</script> <p>以上段落通过脚本修改。</p> </body></html> -
使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
……
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
实例
<!DOCTYPE html>
<html><body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">点我!</button>
</body></html>
css属性visibility与display区别
visibility属性隐藏扔占据位置
display不占据位置
实例
<!DOCTYPE html>
<html><body>
<h1 id="id1">我的标题 1</h1>
<input type="button" onclick="document.getElementById('id1').style.visibility='hidden'" value="点我!"/>
<input type="button" onclick="document.getElementById('id1').style.display='none'" value="点我!"/>
</body></html>
网友评论