HTML DOM介绍
HTML DOM是W3C(万维网联盟)制定的关于HTML的标准。
HTML DOM( Document Object Model ), 即文档对象模型,它定义了访问和操作 HTML 文档的标准方法(接口),还以树状结构表达 HTML 文档。
在HTML DOM中,所有事物都是节点,整个HTML就是以节点构建的一个DOM树,整个 HTML 文档是一个文档节点,每个 HTML 元素是元素节点,每个 HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点,注释是注释节点。根结点:最顶端结点称为根结点,其没有父节点,如:<html>;父节点:其可以拥有子节点,如:<head>;子节点:父节点下一级的节点;同胞节点:拥有相同父节点的同级节点,如:<head>与<body>
<html> //根节点,无父节点
<head> //<html>的子节点
<meta charset="utf-8">
<title>ShiXun</title>//<head>的子节点
</head>
<body> //<html>的子节点
<h2>实训在线</h2> //<body>的子节点
<p>Hello Web!</p> //<body>的子节点
</body>
</html>
JavaScript 访问 DOM 元素
可以利用以下JavaScript方法获取DOM信息:
document.getElementById() 方法
<h1 id="title">JS访问DOM</h1>
<script type="text/javascript">
//获取 id="title" 的元素
var title = document.getElementById("title");
// 打印 title 元素的内容
document.write("打印输出:" + title.innerHTML);
</script>
document.getElementsByName() 方法
<input type="text" name="user" value="zhangsan1">
<input type="text" name="user" value="zhangsan2">
<script type="text/javascript">
//获取 name="user" 的所有元素(数组)
var users = document.getElementsByName("user");
// 打印 users 数量
document.write("数量:" + users.length); document.write("<br>");
// 打印值
document.write(" 第一个值:" + users[0].value);
document.write(" 第二个值:" + users[1].value);
</script>
运行结果:
JavaScript 修改 DOM 元素
利用 JavaScript 可以修改以下 DOM 信息:
1.
HTML 元素内容
2.
CSS 样式
3.HTML 元素属性
4.
HTML 元素
修改元素内容
<h1 id="title">JS访问DOM</h1>
<script type="text/javascript">
//获取 id="title" 的元素,并修改其内容 document.getElementById("title").innerHTML = "Hello";
</script>
修改元素样式
<h1 id="title">JS访问DOM</h1>
<script type="text/javascript">
//获取 id="title" 的元素
var title = document.getElementById("title");
//修改其颜色
title.style.color = "red";
//修改其字体大小
title.style.fontSize = "46px";
</script>