HTML初学心得6

最新推荐文章于 2021-11-16 21:58:09 发布

weixin_51489973

最新推荐文章于 2021-11-16 21:58:09 发布

阅读量57

点赞数

本文链接：https://blog.csdn.net/weixin_51489973/article/details/117695185

版权

今日是学习网页制作的第六日，昨日我们学习了JavaScript的基础知识，今日给大家分享一下JavaScript操作中的HTML DOM

一、HTML DOM介绍

HTML DOM 是 W3C（万维网联盟）制定的关于HTML的标准

1. HTML DOM（ Document Object Model ），即文档对象模型

2. HTML DOM 定义了访问和操作 HTML 文档的标准方法(接口)

3. HTML DOM 以树状结构表达 HTML 文档

二、HTML DOM 树

三、HTML DOM 节点

在HTML DOM中，所有事物都是节点，整个HTML就是以节点构建的一个DOM树

1. 整个 HTML 文档是一个文档节点

2. 每个 HTML 元素是元素节点

3. 每个 HTML 元素内的文本是文本节点

4. 每个 HTML 属性是属性节点

5. 注释是注释节

四、HTML DOM 节点层级关系

HTML DOM树中的节点彼此拥有层级关系

v 根结点：最顶端结点称为根结点，其没有父节点，如：<html>

v 父节点：其可以拥有子节点，如：<head>

v 子节点：父节点下一级的节点

v 同胞节点：拥有相同父节点的同级节点，如：<head>和<body>

五、JavaScript 访问 DOM 元素

利用以下四种方法访问DOM 元素

1. 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>

2. document.getElementsByName() 方法

3. document.getElementsByTagName() 方法

4. document.getElementsByClassName() 方法

五、JavaScript 修改 DOM 元素

1. 修改 HTML 元素内容

<h1 id="title">JS访问DOM</h1>
<script type="text/javascript">
//获取 id="title" 的元素，并修改其内容
document.getElementById("title").innerHTML = "Hello";
</script>

2. 修改 CSS 样式

<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>

3. 修改 HTML 元素属性

4. 增加或删除 HTML元素

今日关于DOM的知识点就给大家分享到这里吧，希望要是能得到一个一键三连就更好啦