学习周记 Week6
1.学习目标
掌握HTML DOM基本操作
2.学习内容
2.1 HTML DOM (文档对象模型)
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树
(图为HTML DOM 树)
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML,比如改变页面中的所有 HTML 元素、 HTML 属性、 CSS 样式、对页面中的所有事件做出反应
2.2 查找 HTML 元素
要想通过JavaScript改变HTML元素的样式,我们首先要做的就是找到该元素。
有三种方法:
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
2.2.1 通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id
var x=document.getElementById("你要查找的元素");
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo1">你好</p>
<p id="demo2">再见</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("demo1");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>
运行结果:
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素
如果未找到该元素,则 x 将包含 null
2.2.2 通过标签名查找 HTML 元素
示例:查找 id=“main” 的元素,然后查找 id=“main” 元素中的所有 < p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
</script>
</body>
</html>
运行结果:
我们可以看到语句“< p>你好世界!< /p >”没有被包含在“main”的标签名下 ,所以没有被查找出来。
把代码修改为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>你好世界!</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
document.write('id="main"元素中的第二个段落为:' + y[1].innerHTML);
</script>
</body>
</html>
运行结果:
就可以发现语句“< p>你好世界!< /p >”被成功查找。
2.2.3 通过类名找到 HTML 元素
var x = document.getElementsByClassName("你要查找的元素");
本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意:</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>
运行结果:
3.练习
DOM元素灵活查找<br><br>
<div class="box box-re">
例1:选出所有元素 通过className条件筛选<br><br>
<ul class="list-group">
<li class="list-group-item">无</li>
<li class="list-group-item class">class</li>
<li class="list-group-item">无</li>
<li class="list-group-item class">class</li>
<li class="list-group-item class">class</li>
</ul>
<button class="btn btn-info">修改指定class的背景颜色</button> 未封装<br><br>
<button class="btn btn-info">修改指定class的背景颜色</button> 已封装
</div>
</div>