学习周记 Week6

最新推荐文章于 2021-06-26 23:27:46 发布

Daisy47199390

最新推荐文章于 2021-06-26 23:27:46 发布

阅读量88

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/117767971

版权

学习周记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习周记 Week6

1.学习目标
2.学习内容
3.练习

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 中）的形式返回该元素
运行结果1

如果未找到该元素，则 x 将包含 null
运行结果2

2.2.2 通过标签名查找 HTML 元素

示例：查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 元素：

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>

运行结果：
运行结果3
我们可以看到语句“你好世界!”没有被包含在“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>

运行结果：
运行结果4
就可以发现语句“你好世界!”被成功查找。

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>

运行结果：
运行结果4

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>

Daisy47199390

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记 Week6

学习周记 Week61.学习目标2.学习内容2.1 HTML DOM (文档对象模型)2.2 查找 HTML 元素2.2.1 通过 id 查找 HTML 元素2.2.2 通过标签名查找 HTML 元素3.练习1.学习目标掌握HTML DOM基本操作2.学习内容2.1 HTML DOM (文档对象模型)通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模
复制链接

扫一扫